/* GasCompara — capa minimalista sobre la plantilla (tema teal, modo oscuro).
 * Cada criterio tiene su color (ver CRITERIOS en calculos.js): oro precio, tierra altura,
 * azul baúl, rojo seguridad, verde rendimiento, violeta test drive. */
[data-bs-theme=dark] .theme-teal {
  --adminuiux-theme-1: #2dd4bf;
  --adminuiux-theme-1-rgb: 45, 212, 191;
  --adminuiux-theme-1-hover: #14b8a6;
  --adminuiux-theme-2: #0f766e;
  --adminuiux-theme-accent-1: #a78bfa;
  --adminuiux-bg-1: #0e0f11;
  --adminuiux-bg-2: #15171a;
}

body.gas { background: #0e0f11; color: #e6e8eb; }
.gas .pageloader { background: #0e0f11; }
.gas-acento { color: #2dd4bf; }

/* Barra superior y menú */
.gas .adminuiux-header .navbar { background: rgba(14, 15, 17, .9) !important; backdrop-filter: blur(10px); border-bottom: 1px solid #1f2226; }
.gas .company-tagline { font-size: 11px; opacity: .6; }
.gas .adminuiux-sidebar { background: #121417 !important; border-right: 1px solid #1f2226; }
.gas .adminuiux-sidebar .nav-link.active { color: #0e0f11 !important; background: #2dd4bf !important; }
.gas .adminuiux-sidebar .nav-link.active .menu-icon { color: #0e0f11 !important; }
.gas .adminuiux-mobile-footer { background: rgba(18, 20, 23, .96) !important; border-top: 1px solid #1f2226; }
.gas .adminuiux-mobile-footer .nav-link.active { color: #2dd4bf !important; }
@media (min-width: 992px) { .gas .adminuiux-mobile-footer { display: none !important; } .gas-toasts { margin-bottom: 0 !important; } }

.gas-logo { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #2dd4bf; color: #0e0f11; font-size: 17px; }
.gas-logo-lg { width: 64px; height: 64px; font-size: 30px; border-radius: 18px; }
.gas-dot-count { position: absolute; top: 2px; right: 0; font-size: 10px; font-weight: 700; background: #2dd4bf; color: #0e0f11; border-radius: 10px; padding: 0 5px; line-height: 16px; }
.gas-dot-count:empty { display: none; }
.btn-link-header { position: relative; }

/* Tarjetas */
.gas .card.gas-card { background: #15171a; border: 1px solid #23262a; box-shadow: none; color: #e6e8eb; }
.gas-head-icon { width: 44px; height: 44px; border-radius: 12px; margin-right: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px;
  color: #2dd4bf; background: rgba(45, 212, 191, .08); border: 1px solid rgba(45, 212, 191, .25); flex-shrink: 0; }
.gas-label { letter-spacing: .08em; }
.min-w-0 { min-width: 0; }
.gas-link { color: #e6e8eb; text-decoration: none; }
.gas-link:hover { color: #2dd4bf; }

.gas-dest { color: inherit; transition: border-color .15s; }
.gas-dest:hover { border-color: var(--c) !important; }
.gas-icono { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
  background: color-mix(in srgb, var(--c) 12%, transparent); }

/* Chips y filtros */
.gas-chip { --c: #2dd4bf; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.gas-chip i { color: var(--c) !important; }
.gas-chip.apagado { color: #8b9198; background: transparent; border-style: dashed; border-color: #3a3e44; }
.gas-chip.apagado i { color: #8b9198 !important; }
.gas-filtro { border: 1px solid #2c3035; background: transparent; color: #c5cad0; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; }
.gas-filtro.activo { background: #2dd4bf; border-color: #2dd4bf; color: #0e0f11; }

.gas-range { --c: #2dd4bf; accent-color: var(--c); }
.gas-range::-webkit-slider-thumb { background: var(--c); }
.gas-range::-moz-range-thumb { background: var(--c); }
.gas-range::-webkit-slider-runnable-track { background: #2a2e33; }
.gas .form-check-input:checked { background-color: #a78bfa; border-color: #a78bfa; }

.gas-metric { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 10px; background: #1b1e22; }
.gas-metric i { font-size: 17px; }
.gas-metric b { display: block; font-size: 13px; line-height: 1.2; }
.gas-metric small { display: block; font-size: 11px; color: #8b9198; line-height: 1.2; }

.gas-total { min-width: 40px; text-align: center; padding: 3px 8px; border-radius: 10px; font-weight: 800; font-size: 15px; background: rgba(45, 212, 191, .12); color: #2dd4bf; flex-shrink: 0; }
.gas-total.sm { font-size: 12px; padding: 1px 6px; }

.gas-barra { height: 5px; border-radius: 5px; background: #24272b; overflow: hidden; margin-top: 4px; }
.gas-barra span { display: block; height: 100%; border-radius: 5px; }

/* Mini barras por criterio en el ranking */
.gas-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.gas-mini span { height: 5px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--v), #24272b var(--v)); }
.gas-rank { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
  background: #1f2226; color: #a7adb4; }
.gas-rank.top { background: #2dd4bf; color: #0e0f11; }
.gas-rankrow { color: inherit; padding: 6px; border-radius: 10px; }
.gas-rankrow:hover { background: #1b1e22; }

.gas-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #22252a; }
.gas-lista li:last-child { border-bottom: 0; }
.gas-ul { padding-left: 0; list-style: none; }
.gas-ul li { position: relative; padding-left: 20px; margin-bottom: 5px; }
.gas-ul li::before { content: "\F26E"; font-family: bootstrap-icons; position: absolute; left: 0; color: #34c38f; }
.gas-ul.contras li::before { content: "\F62A"; color: #ef5b5b; }
.gas-apagado { opacity: .75; }

/* Tablas */
.gas-tabla { --bs-table-bg: transparent; --bs-table-color: #dfe3e7; --bs-table-hover-bg: #1b1e22; font-size: 13px; }
.gas-tabla thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8b9198; white-space: nowrap; border-bottom-color: #2c3035; }
.gas-tabla td, .gas-tabla th { border-color: #22252a; }
.gas-tabla td.text-end { white-space: nowrap; }
.gas-tabla-wrap { max-height: 75vh; }
.gas-tabla-wrap thead th { position: sticky; top: 0; background: #15171a; z-index: 2; }
.gas-sticky { position: sticky; left: 0; background: #15171a !important; z-index: 1; min-width: 160px; }
.gas-tabla-wrap thead th.gas-sticky { z-index: 3; }
.gas-tabla-comp th:first-child { min-width: 130px; }
.gas-tabla-comp td { min-width: 120px; }
.gas-gana { background: color-mix(in srgb, var(--c) 9%, transparent) !important; }
.gas-copa { color: #f2c14e; font-size: 11px; }

.gas-toast { background: #1b1e22; color: #e6e8eb; border: 1px solid #2c3035 !important; }
.gas-toasts { z-index: 1100; margin-bottom: 70px; }

.gas .form-control, .gas .form-select { background-color: #1b1e22; border-color: #2c3035; color: #e6e8eb; }
.gas .form-control:focus, .gas .form-select:focus { border-color: #2dd4bf; box-shadow: 0 0 0 .2rem rgba(45, 212, 191, .12); }
.gas .form-select option, .gas .form-select optgroup { background: #15171a; color: #e6e8eb; }
.gas .text-secondary { color: #8b9198 !important; }
.gas .btn-theme { color: #0e0f11; font-weight: 600; }
.gas .btn-outline-theme { color: #2dd4bf; border-color: rgba(45, 212, 191, .5); }
.gas .btn-outline-theme:hover { color: #0e0f11; }
.gas a { color: #2dd4bf; }
.gas a.gas-link, .gas a.gas-rankrow, .gas a.gas-dest { color: #e6e8eb; }

@media (min-width: 992px) { .gas-sticky-top { position: sticky; top: 84px; } }
@media (max-width: 575px) {
  .gas .card-body { padding: .9rem; }
  .gas-tabla-comp { font-size: 12px; }
  .gas-tabla-comp td { min-width: 104px; }
}