/* Re-vestido de la vista original.
 *
 * Esa pantalla llega como un blob con su propia hoja de estilos y su propia paleta, así
 * que quedaba fuera del sistema: fondo casi negro, otra tipografía y chips con otra
 * gramática. Como es la primera vista del sidebar, era la inconsistencia más visible del
 * dashboard. Aquí no se toca su marcado ni su lógica: se le aplican encima los mismos
 * tokens que al resto, después de su hoja original.
 *
 * Todo va acotado a `body:not(.light-mode)` porque esa pantalla tiene su propio modo
 * claro; sin el acotado estos `!important` lo dejarían inservible.
 */

body:not(.light-mode) {
  background: #07090C !important;
  color: #E7EDF3 !important;
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body:not(.light-mode) .top-bar {
  background: #0B1116 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
body:not(.light-mode) .top-bar h1 { font-weight: 600 !important; letter-spacing: -.01em; }
body:not(.light-mode) .top-bar .meta {
  color: #6E7D8C !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
}

body:not(.light-mode) .btn-refresh {
  border-radius: 9px !important;
  background: #F0B429 !important;
  color: #1A1206 !important;
  font-weight: 600 !important;
}

body:not(.light-mode) .stat {
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 14px !important;
  background: #0E141B !important;
}
/* El número de una tarjeta es un dato: mono tabular, como en el resto del dashboard. */
body:not(.light-mode) .stat .n {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  letter-spacing: -.02em;
}
body:not(.light-mode) .stat .l { color: #93A1AF !important; }

body:not(.light-mode) .filters input,
body:not(.light-mode) .filters select {
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 9px !important;
  background: #0A0F15 !important;
  color: #D4DDE6 !important;
}
body:not(.light-mode) .btn-clear {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #B6C2CE !important;
}

body:not(.light-mode) .table-wrap,
body:not(.light-mode) .side {
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
  background: #0E141B !important;
}

/* Encabezado de columna: etiqueta apagada, no un dato que compita con su columna. */
body:not(.light-mode) th {
  background: #0E141B !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  color: #5E6C7A !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
body:not(.light-mode) td {
  border-bottom: 1px solid rgba(255, 255, 255, .045) !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
body:not(.light-mode) tr:hover td { background: rgba(255, 255, 255, .03) !important; }
body:not(.light-mode) .price-copec { color: #E7EDF3 !important; }

/* Chips con la fórmula del sistema: fondo 13%, borde 35%, texto saturado. */
body:not(.light-mode) .badge {
  border-radius: 8px !important;
  border: 1px solid !important;
  font-weight: 500 !important;
}
body:not(.light-mode) .badge.cheaper {
  background: rgba(46, 164, 124, .14) !important;
  border-color: rgba(46, 164, 124, .35) !important;
  color: #4CC79B !important;
}
body:not(.light-mode) .badge.expensive {
  background: rgba(226, 68, 74, .13) !important;
  border-color: rgba(226, 68, 74, .35) !important;
  color: #F0666B !important;
}
body:not(.light-mode) .badge.equal {
  background: rgba(76, 141, 246, .12) !important;
  border-color: rgba(76, 141, 246, .30) !important;
  color: #7FB4FF !important;
}
body:not(.light-mode) .badge.na {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  color: #5E6C7A !important;
}

body:not(.light-mode) .comp-card {
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 14px !important;
  background: #0A0F15 !important;
}
body:not(.light-mode) .comp-card a,
body:not(.light-mode) .comp-link-icon { color: #7FB4FF !important; }

/* ------------------------------------------------------------------ *
 * Tema Copec en la vista original.
 *
 * `theme.js` le activa su propio `light-mode`, que ya resuelve el grueso del modo claro.
 * Aquí sólo se le imponen los tokens de la marca encima: rojo Copec en el cromo, la
 * misma tipografía y los mismos chips que el resto del dashboard.
 * ------------------------------------------------------------------ */

:root[data-tema="copec"] body {
  background: #EEF1F5 !important;
  color: #121821 !important;
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}
:root[data-tema="copec"] .top-bar {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(16, 24, 40, .11) !important;
  color: #121821 !important;
}
:root[data-tema="copec"] .top-bar h1 { color: #121821 !important; }
:root[data-tema="copec"] .top-bar .meta {
  color: #6B7684 !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
}
:root[data-tema="copec"] .btn-refresh {
  background: #D60812 !important;
  border-color: #D60812 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
:root[data-tema="copec"] .stat,
:root[data-tema="copec"] .table-wrap,
:root[data-tema="copec"] .side {
  background: #FFFFFF !important;
  border: 1px solid rgba(16, 24, 40, .11) !important;
}
:root[data-tema="copec"] .stat .n {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  font-variant-numeric: tabular-nums;
  color: #121821 !important;
}
:root[data-tema="copec"] th {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(16, 24, 40, .13) !important;
  color: #838E9C !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
:root[data-tema="copec"] td {
  border-bottom: 1px solid rgba(16, 24, 40, .075) !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
:root[data-tema="copec"] .badge.cheaper {
  background: rgba(15, 122, 85, .10) !important;
  border: 1px solid rgba(15, 122, 85, .34) !important;
  color: #0B6446 !important;
}
:root[data-tema="copec"] .badge.expensive {
  background: rgba(193, 18, 31, .10) !important;
  border: 1px solid rgba(193, 18, 31, .34) !important;
  color: #A80F1A !important;
}
:root[data-tema="copec"] .badge.equal {
  background: rgba(11, 78, 162, .10) !important;
  border: 1px solid rgba(11, 78, 162, .34) !important;
  color: #0A4691 !important;
}
:root[data-tema="copec"] .badge.na {
  background: rgba(16, 24, 40, .05) !important;
  border: 1px solid rgba(16, 24, 40, .14) !important;
  color: #838E9C !important;
}

/* El botón de tema propio de esta vista queda fuera: el tema ahora lo manda el shell para
   las once vistas a la vez, y tener dos controles sobre la misma clase sólo permite
   dejarlos desincronizados. */
.btn-theme { display: none !important; }