/* =====================================================================
   publico/assets/tema.css
   ---------------------------------------------------------------------
   EL SISTEMA DE DISEÑO DE ALMACEN MAKER, EN UN SOLO ARCHIVO.

   Manual de marca Rev. G. Este archivo es el maestro: publico.css,
   tienda.css y las hojas que vengan CONSUMEN de acá y no definen
   colores, fuentes, tiempos ni curvas propias.

   POR QUÉ ESTÁ SEPARADO
   ---------------------
   Hoy el mismo bloque :root está copiado en publico.css y en
   tienda.css. Dos copias de la misma verdad: el día que cambie un
   color, una de las dos se queda vieja y nadie se entera hasta que un
   cliente ve dos azules distintos entre el catálogo y la ficha.

   Es el mismo patrón que ya conocemos de amcUrlSubida y del escape
   del apóstrofo: una regla aplicada en casi todos lados, y el que
   falta compensado con un parche en otro sitio.

   CÓMO SE CARGA
   -------------
   PRIMERO este archivo, DESPUÉS la hoja de la sección:

     <link rel="stylesheet" href="/publico/assets/tema.css?v=1">
     <link rel="stylesheet" href="/publico/assets/publico.css?v=1">

   Y las tres fuentes en el <head>, antes de las dos hojas:

     Oswald 500,600,700 · Work Sans 400,600 · Caveat 600

   MIENTRAS DURE LA MIGRACIÓN
   --------------------------
   Este archivo NO toca <body> ni pinta nada por su cuenta. Solo
   declara variables y componentes nuevos. Así convive con el
   publico.css viejo sin pelearse: lo que todavía usa --tinta y
   --papel sigue funcionando igual hasta que le toque su turno.
   ===================================================================== */


/* =====================================================================
   NIVEL 1 · PRIMITIVAS
   Hex crudos, sin significado. NUNCA se usan en un componente.
   Si ves --p- algo dentro de una regla de componente, está mal.
   ===================================================================== */
:root{
  --p-azul-plano:#262B33;
  --p-azul-800:#2C323C;
  --p-azul-700:#333A47;
  --p-blanco-tiza:#EEF1F4;
  --p-blanco-100:#FFFFFF;
  --p-blanco-300:#E3E9EF;
  --p-amarillo:#F5B000;
  --p-amarillo-alto:#FFC633;
  --p-ambar-tinta:#8A6100;
  --p-grafito:#4A5568;
  --p-linea-plano:#9FB0C2;
  --p-gris-500:#8A96A8;
  --p-gris-600:#626D7E;

  --p-verde-oxido-claro:#7BB37A;
  --p-verde-oxido-oscuro:#2E6B2C;
  --p-lacre-claro:#E8836E;
  --p-lacre-oscuro:#A83A22;
  --p-helio-claro:#7FB3CC;
  --p-helio-oscuro:#1F5F7D;

  /* --- Tipografía: tres familias, tres trabajos. No se cruzan. --- */
  --font-display:'Oswald','Arial Narrow',sans-serif;   /* títulos, nav, botones */
  --font-body:'Work Sans',system-ui,sans-serif;        /* todo lo que se lee */
  --font-hand:'Caveat',cursive;                        /* solo cotas y notas */

  /* --- Forma. Radio bajo. El único elemento tipo píldora de todo
         el sistema es el interruptor de tema, más abajo. --- */
  --radius-sm:4px;
  --radius-md:8px;
  --maxw:1180px;
  --maxw-catalogo:1600px;   /* rejillas de producto: ver "TRES ANCHOS" abajo */

  /* --- Espacio: escala de 8. Ningún valor suelto. --- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px;

  /* --- Movimiento. Es identidad, igual que el amarillo: un sistema
         que habla de precisión no puede moverse blando. --- */
  --dur-press:140ms;   /* respuesta al presionar */
  --dur-ui:200ms;      /* menús, tooltips, foco, subrayados */
  --dur-panel:260ms;   /* paneles que se desplazan. Techo del sistema. */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);

  /* --- Densidad. La web pública es cómoda; el portal, compacta. --- */
  --pad-panel:24px;
  --row-h:44px;

  /* Cuánto mide la cabecera COMPLETA cuando está pegada arriba (las
     tres franjas, no solo la navegación — ver la nota junto a .cab en
     layout.css). Es un punto de partida nomás: el script que hay justo
     después del header la corrige al medir la cabecera real apenas
     carga la página, porque el alto real cambia por ancho de pantalla
     y por cuánto ocupan el teléfono/la dirección en la franja 1. Todo
     lo que se pega DEBAJO del header (filtros, el resumen de compra,
     la galería de producto, el selector de letras de marcas, el menú
     de Mi cuenta) usa esta variable como tope en vez de --row-h solo,
     para no quedar tapado detrás de la cabecera pegajosa.
     Si algún día la cabecera vuelve a ser solo la navegación, esta
     variable puede volver a valer lo mismo que --row-h. */
  --cab-alto:140px;
}

[data-density="compacta"]{ --pad-panel:16px; --row-h:32px; }


/* =====================================================================
   NIVEL 2 · SEMÁNTICAS
   Lo único que un componente tiene derecho a consumir.
   El valor cambia con el tema; el nombre no cambia nunca.

   Los temas se llaman por su nombre del manual — vitela y azul — y no
   light/dark. Cuando la pieza se llama distinto en el código que en
   la conversación, el sistema se desarma antes que el diseño.
   ===================================================================== */

html[data-theme="vitela"]{
  color-scheme:light;
  --bg:var(--p-blanco-tiza);
  --bg-elev:var(--p-blanco-100);
  --bg-elev-2:var(--p-blanco-300);
  --ink:var(--p-azul-plano);
  --ink-dim:var(--p-grafito);
  --ink-faint:var(--p-gris-600);
  --line:var(--p-grafito);
  --accent:var(--p-amarillo);
  --accent-hover:var(--p-amarillo-alto);
  --accent-ink:#20242B;
  --accent-text:var(--p-ambar-tinta);   /* ver nota abajo */
  --ok:var(--p-verde-oxido-oscuro);
  --danger:var(--p-lacre-oscuro);
  --info:var(--p-helio-oscuro);
  --grid-minor:rgba(74,85,104,0.045);
  --grid-major:rgba(74,85,104,0.09);
  --panel-border:rgba(38,43,51,0.12);
  --shadow:rgba(38,43,51,0.12);
}

html[data-theme="azul"]{
  color-scheme:dark;
  --bg:var(--p-azul-plano);
  --bg-elev:var(--p-azul-800);
  --bg-elev-2:var(--p-azul-700);
  --ink:var(--p-blanco-tiza);
  --ink-dim:var(--p-linea-plano);
  --ink-faint:var(--p-gris-500);
  --line:var(--p-linea-plano);
  --accent:var(--p-amarillo);
  --accent-hover:var(--p-amarillo-alto);
  --accent-ink:#20242B;
  --accent-text:var(--p-amarillo);
  --ok:var(--p-verde-oxido-claro);
  --danger:var(--p-lacre-claro);
  --info:var(--p-helio-claro);
  --grid-minor:rgba(159,176,194,0.035);
  --grid-major:rgba(159,176,194,0.07);
  --panel-border:rgba(159,176,194,0.16);
  --shadow:rgba(0,0,0,0.4);
}

/* Sin atributo, Vitela. El sistema nace en papel y el papel es claro.
   Ojo: acá NO hay prefers-color-scheme a propósito. Plano Azul es una
   elección explícita del visitante, no una consecuencia de cómo tenga
   configurado el teléfono. */
html:not([data-theme]){
  color-scheme:light;
  --bg:var(--p-blanco-tiza);
  --bg-elev:var(--p-blanco-100);
  --bg-elev-2:var(--p-blanco-300);
  --ink:var(--p-azul-plano);
  --ink-dim:var(--p-grafito);
  --ink-faint:var(--p-gris-600);
  --line:var(--p-grafito);
  --accent:var(--p-amarillo);
  --accent-hover:var(--p-amarillo-alto);
  --accent-ink:#20242B;
  --accent-text:var(--p-ambar-tinta);
  --ok:var(--p-verde-oxido-oscuro);
  --danger:var(--p-lacre-oscuro);
  --info:var(--p-helio-oscuro);
  --grid-minor:rgba(74,85,104,0.045);
  --grid-major:rgba(74,85,104,0.09);
  --panel-border:rgba(38,43,51,0.12);
  --shadow:rgba(38,43,51,0.12);
}

/* EL AMARILLO TIENE DOS FORMAS Y SE CONFUNDEN FÁCIL:
     --accent       relleno. Idéntico en los dos temas y en impreso.
     --accent-text  tinta. Se oscurece a ámbar sobre fondo claro.
   Sobre blanco tiza, #F5B000 como texto da 1.7:1 — ilegible. Es el
   error más común al llevar el sistema a fondo claro. */


/* =====================================================================
   FONDO: LA CUADRÍCULA
   Nunca liso. Dos niveles, relación 1:4, siempre bajo el 10%.
   Se pone en el elemento que la necesita, no en <body> — esa decisión
   la toma publico.css cuando le toque la migración.
   ===================================================================== */
.grid-bg{
  background-image:
    repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  var(--grid-minor) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid-minor) 0 1px, transparent 1px 24px);
}

/* Sobre fotografía baja al 6%: por encima compite con la pieza. */
.grid-bg--foto{ opacity:.6; }


/* =====================================================================
   COMPONENTES DEL SISTEMA
   El inventario mínimo. Todo lo que se construya se arma con esto o
   justifica por qué necesita una pieza nueva.
   ===================================================================== */

/* ---------- Lámina: panel con marcas de registro ----------
   La pieza que más viaja: web, flyer, etiqueta, señalética. */
.lamina{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-md);
  padding:var(--pad-panel);
  box-shadow:0 16px 34px -20px var(--shadow);
}
.lamina::before,
.lamina::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
}
.lamina::before{ top:-1px; left:-1px;  border-top:2px solid var(--line); border-left:2px solid var(--line); }
.lamina::after { bottom:-1px; right:-1px; border-bottom:2px solid var(--line); border-right:2px solid var(--line); }

/* La etiqueta que nombra la lámina, asomando por el borde. */
.lamina-tab{
  position:absolute; top:-14px; left:22px; z-index:2;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-display); font-weight:600; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:2px;
  transform:rotate(-1.2deg);
  box-shadow:0 6px 14px -4px var(--shadow);
}

/* ---------- Eyebrow: la etiqueta sobre un título ---------- */
.eyebrow{
  font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-text);
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--accent); flex:none; }

/* ---------- Cota: acento de precisión junto a un titular ----------
   Máximo una por vista. Su fuerza está en la escasez. */
.cota{
  font-family:var(--font-hand); font-size:20px; font-weight:600;
  color:var(--accent-text); display:inline-flex; align-items:center; gap:8px;
}

/* ---------- Anotación manuscrita ----------
   Decoración con temperatura. NUNCA transporta información necesaria:
   quien no pueda leer una cursiva tiene que poder operar todo igual. */
.anotacion{
  font-family:var(--font-hand); font-size:20px; font-weight:600;
  color:var(--ink-dim); display:inline-block; transform:rotate(-2deg);
}
.anotacion--der{ transform:rotate(2deg); }

/* ---------- Botones ----------
   UN solo botón sólido por vista: es la acción principal.
   Todo lo demás, ghost. */
.btn-sistema{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px;                 /* área táctil de lámina 21 */
  font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:0.06em; text-transform:uppercase;
  border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer;
  transition:transform var(--dur-press) var(--ease-out),
             background-color var(--dur-ui) ease,
             border-color var(--dur-ui) ease,
             color var(--dur-ui) ease;
}
/* La escala al presionar es lo que hace que la interfaz se sienta
   atenta. Va en :active, no en hover: es respuesta, no adorno. */
.btn-sistema:active{ transform:scale(0.97); }

.btn-solido{ background:var(--accent); color:var(--accent-ink); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }

@media (hover:hover) and (pointer:fine){
  .btn-solido:hover{ background:var(--accent-hover); }
  .btn-ghost:hover{ border-color:var(--ink); }
}

/* ---------- Chips ----------
   El amarillo marca UN elemento por grupo. Marca lo más relevante,
   no un estado — para eso están los cuatro de abajo. */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--panel-border); color:var(--ink-dim); background:var(--bg-elev);
}
.chip--prioritario{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.chip--ok{     color:var(--ok);     border-color:currentColor; }
.chip--error{  color:var(--danger); border-color:currentColor; }
.chip--info{   color:var(--info);   border-color:currentColor; }
/* Regla dura: el color nunca es el único portador del estado. Cada
   chip lleva su palabra escrita adentro, sin excepción. */


/* =====================================================================
   INTERRUPTOR DE TEMA
   El ÚNICO elemento tipo píldora autorizado en todo el sistema. La
   forma sola ya lo identifica: por eso no lleva sol ni luna adentro.

   El marcado lo pinta _cabecera.php (franja 3, extremo derecho) y el
   panel de menú en móvil. Los dos leen y escriben el mismo
   data-theme del <html>, así que no pueden desincronizarse.
   ===================================================================== */
.tema{
  position:relative; flex:none;
  width:64px; height:34px; padding:0;
  min-width:44px; min-height:34px;
  border:1.5px solid var(--line); border-radius:999px;
  background:var(--bg-elev); cursor:pointer;
  transition:border-color var(--dur-ui) ease, background-color var(--dur-ui) ease;
}
.tema::after{
  content:""; position:absolute; top:50%; left:4px;
  width:22px; height:22px; margin-top:-11px;
  border-radius:50%; background:var(--ink);
  transition:transform var(--dur-press) var(--ease-out);
}
html[data-theme="azul"] .tema::after{ transform:translateX(28px); }
.tema:active{ transform:scale(0.97); }

@media (hover:hover) and (pointer:fine){
  .tema:hover{ border-color:var(--ink); }
}

/* El punto es --ink en los dos temas, no --accent. Un mando que está
   presente en TODAS las vistas y no señala nada se comería el único
   amarillo permitido por vista, en cada página del sitio. */

/* El cambio de tema NO se anima: la página entera cruzando de color
   deja media pantalla en un estado y media en otro, y eso se ve peor
   que el salto. Lo único que se mueve es el punto del mando. */


/* =====================================================================
   BASE COMPARTIDA
   Lo mínimo que no puede vivir en la hoja de una sección.
   ===================================================================== */

/* TRES ANCHOS, Y LA DIFERENCIA NO ES CAPRICHO.

   .envoltura        1180px. Contenido que se LEE: portada, fichas. El
                     tope del manual es una regla de medida de línea —
                     existe para que un párrafo no pase de 75
                     caracteres, porque más que eso el ojo pierde el
                     renglón al volver.

   --maxw-catalogo   1600px. El catálogo (/tienda/ y sus landings). Una
                     rejilla de productos no tiene renglón que proteger:
                     a 1180 dejaba casi 400px vacíos a cada lado en un
                     monitor de 1920 y las tarjetas iban de a cuatro. El
                     párrafo de la landing sí se lee, y conserva su tope
                     propio en .cat-intro. Lo aplica publico.css.

   .envoltura-ancha  el ancho del catálogo (--maxw-catalogo, 1600px),
                     centrado. Cabecera y pie: son estructura, no
                     lectura, así que no se aprietan al ancho de párrafo
                     de .envoltura — pero TAMPOCO se estiran hasta el
                     borde del vidrio. Antes iban a todo el ancho
                     (max-width:none) y en un monitor de 1920+ el logo y
                     el pie quedaban pegados a los bordes mientras el
                     catálogo (que sí topa en 1600) arrancaba más
                     adentro: los tres bordes no coincidían y la página
                     se veía descuadrada. Ahora los tres comparten el
                     mismo borde izquierdo y derecho. En pantallas de
                     hasta 1600 no cambia nada — solo topa cuando sobra.

   El padding crece con la pantalla en vez de quedar fijo: a 24px en un
   monitor grande el logo queda pegado al borde del vidrio. */
.envoltura{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s3); }
.envoltura-ancha{ width:100%; max-width:var(--maxw-catalogo); margin:0 auto; padding:0 clamp(20px, 2.6vw, 56px); }

/* El foco se marca con borde de acento, nunca con sombra difusa. */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* Cualquier ancla con id queda por debajo de la cabecera pegajosa. */
[id]{ scroll-margin-top:96px; }


/* =====================================================================
   MOVIMIENTO REDUCIDO
   No es movimiento cero: se conservan opacidad y color, que ayudan a
   entender QUÉ cambió. Se elimina todo desplazamiento y escalado.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .btn-sistema:active,
  .tema:active{ transform:none; }
  .tema::after{ transition:background-color var(--dur-press) ease; }
  html[data-theme="azul"] .tema::after{ transform:translateX(28px); }
}