/* web/static/classic.css — Modo Classic: paleta inspirada en Martini Racing
   (crema, celeste, azul marino, rojo), tipografía redondeada, sin efectos
   retro (CRT, glow fosforescente, boot terminal). Todo scopeado bajo
   html[data-modo="classic"] para convivir con theme.css y landing.css sin
   tocarlos. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

html[data-modo="classic"] {
  --rc-bg: #4fb3e8;
  --rc-bg-panel: #ffffff;
  --rc-bg-panel-2: #eaf5fb;
  --rc-green: #10214f;
  --rc-green-bright: #10214f;
  --rc-green-dim: #10214f;
  --rc-green-faint: #cfe9f7;
  --rc-glow: rgba(16, 33, 79, 0.16);
  --cl-rojo: #c8102e;
  --cl-crema: #faf7f0;
  --cl-azul-francia: #002654;
  --cl-amarillo-huevo: #f4c430;
  --rc-halo-seleccion: #ffc93c;
  --rc-halo-seleccion-glow: rgba(255, 201, 60, 0.55);
  --rc-halo-seleccion-glow-suave: rgba(255, 201, 60, 0.4);
  --rc-font: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --rc-cursor: auto;
  --rc-cursor-mira: pointer;
}

/* Modo oscuro de Classic (toggle sol/luna en el header, ver
   btn-tema-classic en landing.js): mismas variables de acá arriba,
   redefinidas a tonos de gris puro (sin rojo/navy/amarillo) para más fácil
   lectura. Como casi todo Classic ya se apoya en estas variables en vez de
   colores sueltos, esto solo alcanza para repintar todo el modo sin tocar
   ningún tamaño/layout — lo que queda abajo son los pocos colores que
   estaban escritos a mano (no vía variable) y necesitan su propio
   override puntual. */
html[data-modo="classic"][data-tema="oscuro"] {
  --rc-bg: #1a1a1a;
  --rc-bg-panel: #262626;
  --rc-bg-panel-2: #313131;
  --rc-green: #e6e6e6;
  --rc-green-bright: #ffffff;
  --rc-green-dim: #a8a8a8;
  --rc-green-faint: #3a3a3a;
  --rc-glow: rgba(255, 255, 255, 0.12);
  --cl-rojo: #9e9e9e;
  --cl-crema: #f2f2f2;
  --cl-azul-francia: #101010;
  --cl-amarillo-huevo: #cfcfcf;
  --rc-halo-seleccion: #d9d9d9;
  --rc-halo-seleccion-glow: rgba(217, 217, 217, 0.35);
  --rc-halo-seleccion-glow-suave: rgba(217, 217, 217, 0.22);
}
/* Colores que no pasan por ninguna variable de arriba (hover states y
   fondos puntuales escritos a mano en las reglas de más abajo). En oscuro,
   ninguno de estos dos hover cambia el color del texto (a pedido: con el
   fondo ya oscuro, "negro" o cualquier color fijo quedaba invisible o
   raro) — el propio movimiento/subrayado/negrita del botón ya avisa que
   hay interacción, no hace falta tocar el texto. */
html[data-modo="classic"][data-tema="oscuro"] .carrousel span:hover,
html[data-modo="classic"][data-tema="oscuro"] .btn-categoria:hover {
  color: inherit;
}
html[data-modo="classic"][data-tema="oscuro"] .card.expandida {
  border-color: var(--rc-green-dim);
  box-shadow: 0 16px 34px -6px rgba(0, 0, 0, 0.6);
}
html[data-modo="classic"][data-tema="oscuro"] input:focus,
html[data-modo="classic"][data-tema="oscuro"] textarea:focus,
html[data-modo="classic"][data-tema="oscuro"] select:focus {
  box-shadow: 0 0 0 3px rgba(230, 230, 230, 0.3);
}
html[data-modo="classic"][data-tema="oscuro"] #btn-logout-classic:hover,
html[data-modo="classic"][data-tema="oscuro"] .rc-logout-tarjeta button:hover {
  background: #000000;
}
/* Los logos de marca son archivos SVG con su propio color fijo (negro por
   default, ver /logos/*.svg) — no toman color por CSS al ir en <img>. En
   oscuro, sobre fondos ahora grises/negros, quedaban invisibles: este
   filtro los vuelve blancos sea cual sea su color original (brightness:0
   los deja negro sólido, invert:1 lo pasa a blanco sólido). */
html[data-modo="classic"][data-tema="oscuro"] .marca-logo-carrousel,
html[data-modo="classic"][data-tema="oscuro"] .marca-logo-card {
  filter: brightness(0) invert(1);
}
html[data-modo="classic"][data-tema="oscuro"] .rc-logout-tarjeta {
  background: var(--rc-bg-panel);
}

html[data-modo="classic"] header {
  background: var(--cl-azul-francia);
}

/* Logo en blanco sobre el header azul Francia */
html[data-modo="classic"] .rc-logo-linea {
  color: #fff;
  -webkit-text-stroke: 1px #fff;
}

/* Fecha/hora/ciudad/dólar en blanco, legibles sobre el header oscuro */
html[data-modo="classic"] .rc-fecha-hora {
  color: #fff;
}

/* Texto del noticiero (crawl) en amarillo huevo */
html[data-modo="classic"] .rc-noticiero-texto {
  color: var(--cl-amarillo-huevo);
}
html[data-modo="classic"] .rc-noticiero-texto.clickeable:hover {
  color: #fff;
}

/* Marcas del carrousel: fijas (sin desplazamiento, ver landing.js), hover
   negro y en negrita en vez del verde de Fallout. Se oculta la segunda
   tanda duplicada (solo existe para el scroll infinito de Fallout) y se
   centra la única tanda visible, así queda equidistante de ambos bordes
   de la pantalla sin tocar el gap entre marcas. */
html[data-modo="classic"] .carrousel-wrap {
  overflow: visible;
}
html[data-modo="classic"] .carrousel {
  width: 100%;
  justify-content: center;
}
html[data-modo="classic"] .carrousel-tanda:nth-of-type(2) {
  display: none;
}
/* En pantallas chicas, cada marca pasa a bloque propio y se acomodan en
   varias filas centradas, en vez de desbordar el ancho de la pantalla. */
html[data-modo="classic"] .carrousel-tanda {
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 10px;
}
html[data-modo="classic"] .carrousel span:hover {
  color: #000;
  font-weight: 800;
}

/* Logo real de cada marca: mismo alto que el texto que acompaña, así el
   carrousel y el título de cada card no cambian de tamaño ni se desalinean. */
html[data-modo="classic"] .marca-logo-carrousel {
  display: inline-block;
  height: 16px;
  width: auto;
  vertical-align: -3px;
  margin-right: 7px;
}
html[data-modo="classic"] .marca-logo-card {
  display: inline-block;
  /* 1em (no un px fijo): hereda el font-size real del título que acompaña
     en cada contexto (.card h3 son 15px, .tarjeta-recomendado h3 varía por
     clamp) y siempre queda del mismo alto que esa fuente, sin importar
     cuál título sea ni si su tamaño cambia más adelante. */
  height: 1em;
  width: auto;
  vertical-align: -0.15em;
  margin-right: 5px;
}

/* Sin scanlines ni flicker CRT */
html[data-modo="classic"] .rc-crt { display: none; }

/* Sin glitch de transición al cambiar de pantalla (categorías, secciones) */
html[data-modo="classic"] .rc-deformando {
  animation: none;
  transform: none;
  filter: none;
}

/* Sin glow fosforescente en ningún texto */
html[data-modo="classic"] body,
html[data-modo="classic"] * {
  text-shadow: none !important;
}

/* Botones y controles: esquinas redondeadas, sombra suave en vez de glow */
html[data-modo="classic"] button,
html[data-modo="classic"] input,
html[data-modo="classic"] textarea,
html[data-modo="classic"] select {
  border-radius: 10px;
  border-width: 2px;
}
html[data-modo="classic"] button {
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(10, 47, 63, 0.12);
}
html[data-modo="classic"] button:hover,
html[data-modo="classic"] button:focus-visible {
  box-shadow: 0 4px 14px rgba(10, 47, 63, 0.18);
}
html[data-modo="classic"] button:active {
  box-shadow: 0 1px 4px rgba(10, 47, 63, 0.15);
}

/* Ítems del menú principal (Celulares, Tablets, Notebooks, Gaming,
   Accesorios, Búsqueda por Marca): un realce sutil al pasar el mouse,
   acento rojo Martini que se desliza desde abajo. */
html[data-modo="classic"] .btn-categoria {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
html[data-modo="classic"] .btn-categoria::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--cl-rojo);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
html[data-modo="classic"] .btn-categoria:hover {
  transform: translateY(-2px);
  color: var(--cl-azul-francia);
}
html[data-modo="classic"] .btn-categoria:hover::after {
  transform: scaleX(1);
}

/* El botón "Modo Fallout" se va transformando lentamente al pasar el mouse:
   mismo ícono, pero con la paleta verde fosforescente de Fallout, como
   anticipo visual (además de la música que arranca en landing.js). */
html[data-modo="classic"] #btn-modo-fallout {
  transition: color .6s ease, background-color .6s ease, border-color .6s ease,
    box-shadow .6s ease, text-shadow .6s ease;
}
html[data-modo="classic"] #btn-modo-fallout:hover {
  color: #7bffa0 !important;
  background: #0b1f0b !important;
  border-color: #33ff66 !important;
  box-shadow: 0 0 12px rgba(51, 255, 102, 0.55), inset 0 0 8px -2px rgba(51, 255, 102, 0.55) !important;
  text-shadow: 0 0 3px rgba(51, 255, 102, 0.55), 0 0 8px rgba(51, 255, 102, 0.55) !important;
}
html[data-modo="classic"] input:focus,
html[data-modo="classic"] textarea:focus,
html[data-modo="classic"] select:focus {
  box-shadow: 0 0 0 3px rgba(0, 170, 240, 0.25);
}
/* El buscador ya tiene su propio marco (border+box-shadow del contenedor
   .rc-buscador) — el input de adentro no necesita este anillo de foco
   genérico encima (se veía como un rectángulo de más al escribir). */
html[data-modo="classic"] .rc-buscador input:focus {
  box-shadow: none !important;
}

/* Logo: tipografía redondeada, blanca y en negrita, sin la carita animada */
html[data-modo="classic"] .rc-logo-linea {
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
}
html[data-modo="classic"] .rc-cara-wrap { display: none; }

/* Cards de producto: bordes redondeados, look más suave */
html[data-modo="classic"] .card,
html[data-modo="classic"] .pipboy,
html[data-modo="classic"] .tarjeta-recomendado {
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(10, 47, 63, 0.10);
}

/* Card seleccionada (título expandido): en Classic el contorno pasa a
   negro, con la luz amarilla detrás. El box-shadow se repite acá (con más
   especificidad que la regla genérica de .card de arriba) para que la luz
   amarilla no quede pisada por la sombra suave por default. */
html[data-modo="classic"] .card.expandida {
  border-color: #000;
  box-shadow: 0 16px 34px -6px rgba(0, 0, 0, 0.45);
}

/* --- Carrousel de recomendados (reemplaza al Pip-Boy en Modo Classic, y al
   Pip-Boy apagado en Modo Fallout, ver landing.css/landing.js):
   6 cards de productos al azar (2 filas x 3), refrescadas cada 12s ---
   Cada card tiene 4 sub-secciones (etiqueta / título / precios / acciones).
   El grid padre define esas 4 filas explícitas y cada card las hereda con
   "subgrid" vía grid-row: span 4; con 6 cards y solo 3 columnas, el grid
   ubica automáticamente la segunda tanda de 3 en las siguientes 4 filas
   implícitas, alineando título/precio/acciones dentro de cada fila de 3
   sin importar el largo del nombre. Mismo gap que la separación entre los
   botones del menú principal (10px, ver .categorias-columna). Layout
   compartido por los dos modos (ver .carrousel-recomendados-wrap en
   landing.css, con height:100% para llegar hasta el borde inferior de la
   barra lateral). Acá solo quedan los colores propios de Classic. */
.carrousel-recomendados-grid {
  /* min-height:0 (no un piso fijo): sin esto, un flex item con
     grid-template-rows:auto no puede achicarse por debajo del alto natural
     de sus 2 filas de cards — así, si esa altura no entraba en el espacio
     libre arriba del footer, la grilla lo desbordaba igual (las cards se
     veían "gigantes" y tapaban el borde del footer). overflow-y:auto acá
     abajo es la red de seguridad si de verdad no entra: scrollea adentro
     de la caja, nunca se mete debajo del footer. */
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  opacity: 0;
  transition: opacity .25s ease;
}
.carrousel-recomendados-grid.visible { opacity: 1; }
/* Padding/gap/fuentes recortados a propósito (ver comentario de
   .carrousel-recomendados-grid más arriba): esta card entra 2 veces (2
   filas x 3) en el mismo alto que ocupa la barra lateral, así que no puede
   usar el tamaño "normal" de una card de catálogo — si no, no entraba y
   quedaba con scroll interno (lo que se pidió evitar del todo). */
.tarjeta-recomendado {
  position: relative;
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 4px;
  align-items: start;
  padding: 12px 14px;
  background: var(--rc-bg-panel);
  border: none;
  border-top: 6px solid var(--cl-rojo);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(16, 33, 79, 0.18);
}
.tarjeta-recomendado-etiqueta {
  grid-row: 1;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  color: var(--cl-rojo);
  text-transform: uppercase;
}

/* Botón de modo activo: rojo Martini en vez del acento marino */
html[data-modo="classic"] .btn-modo.activo {
  color: var(--cl-crema);
  background: var(--cl-rojo);
  border-color: var(--cl-rojo);
}

/* Botón "Cerrar sesión" del header: mismo diseño solido navy/blanco que el
   del panel de admin de clientes. */
html[data-modo="classic"] #btn-logout-classic {
  background: var(--cl-azul-francia);
  color: #fff;
  border-color: var(--cl-azul-francia);
}
html[data-modo="classic"] #btn-logout-classic:hover {
  background: #001835;
}

/* Mensaje de confirmación de log out: tarjeta blanca redondeada, igual
   estética que el gate inicial y el panel de clientes. */
html[data-modo="classic"] .rc-logout-tarjeta {
  background: #fff;
  border: none;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16, 33, 79, 0.25);
}
html[data-modo="classic"] .rc-logout-tarjeta button {
  background: var(--cl-azul-francia);
  color: #fff;
  border-color: var(--cl-azul-francia);
}
html[data-modo="classic"] .rc-logout-tarjeta button:hover {
  background: #001835;
}
.tarjeta-recomendado h3 {
  grid-row: 2;
  margin: 0;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.15;
  font-weight: 800;
  color: var(--rc-green-bright);
  align-self: start;
  /* Sin esto, la card mide distinto en Classic (Nunito) y Fallout (Share
     Tech Mono): dos fuentes con ancho de letra distinto envuelven el mismo
     texto en distinta cantidad de líneas. Con tope fijo de 2 líneas, la
     card mide exactamente igual en ambos modos. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.15em * 2);
}
.tarjeta-recomendado-precio {
  grid-row: 3;
  margin: 0; display: flex; flex-direction: column; gap: 1px;
  align-self: start;
}
.tarjeta-recomendado-precio strong { font-size: 18px; font-weight: 800; color: var(--cl-rojo); }
.tarjeta-recomendado-precio span { font-size: 12px; font-weight: 600; color: var(--rc-green-bright); opacity: .8; }

/* Elegir color + Agregar al carrito: ocultos hasta hacer hover sobre la card */
.tarjeta-recomendado-acciones {
  grid-row: 4;
  align-self: start;
  display: flex; gap: 8px; align-items: center; margin-top: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.tarjeta-recomendado:hover .tarjeta-recomendado-acciones {
  opacity: 1; pointer-events: auto;
}
.tarjeta-recomendado-acciones .dropdown-color { flex: 1; min-width: 0; }
.tarjeta-recomendado-acciones .dropdown-color-boton { width: 100%; font-size: 11px; padding: 5px 8px; }
.tarjeta-recomendado-acciones .btn-agregar { flex-shrink: 0; font-size: 11px; padding: 5px 10px; }
.tarjeta-recomendado-vacia { justify-content: center; align-items: center; text-align: center; }

@media (max-width: 700px) {
  .carrousel-recomendados-grid { grid-template-columns: 1fr; }
}