/* Sistema de diseño — Coliseo Games & Comics (cómic/pop-art).
   Fuentes self-hosted (fonts/*.woff2) en vez de un CDN externo — mismo
   criterio offline-first que el resto del proyecto (nunca depender de una
   red externa para lo que se puede servir desde el propio Django). */

@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bangers-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/work-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/work-sans-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/work-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/work-sans-700.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root {
  /* --- Paleta ---
     --color-alarma/--color-halftone/--color-ok oscurecidos el 2026-07-29
     (Checkpoint 1.1) — los valores originales (#E63946/#2E86AB/#2A9D8F) no
     pasaban AA (4.5:1) como texto normal contra --color-papel ni contra el
     fondo tintado de su propio badge (color-mix(..., 12%, white)), pese a
     que el spec los daba por verificados. Ver 05_estilo_codigo.md para los
     ratios medidos (WCAG relative luminance real, no de memoria). */
  --color-tinta: #1a1a2e;
  --color-tinta-suave: #2d2d4a;
  --color-alarma: #C81E2E;
  --color-panel: #FDB927;
  --color-halftone: #1D6E8F;
  --color-papel: #F7F3E9;
  --color-papel-alt: #EFEAD9;
  --color-ok: #1E786A;
  --color-texto-sobre-oscuro: #F7F3E9;
  --color-texto-sobre-claro: #1a1a2e;

  /* --- Tipografía --- */
  --fuente-display: 'Bangers', cursive;
  --fuente-cuerpo: 'Work Sans', sans-serif;
  --fuente-dato: 'JetBrains Mono', monospace;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-lg: 1.25rem;
  --texto-xl: 1.75rem;
  --texto-2xl: 2.5rem;

  /* --- Espaciado y layout --- */
  --espacio-xs: 4px;
  --espacio-sm: 8px;
  --espacio-md: 16px;
  --espacio-lg: 24px;
  --espacio-xl: 32px;

  --radio-borde: 4px;
  --ancho-borde-panel: 3px;
  --sombra-panel: 4px 4px 0 var(--color-tinta);

  /* --- Breakpoints (referencia — usados en media queries, no como var) --- */
  /* --bp-movil: 375px; --bp-tablet: 768px; --bp-desktop: 1024px; */

  /* --- Textura halftone --- */
  --patron-halftone: radial-gradient(circle, var(--color-tinta) 1px, transparent 1.5px);
  --patron-halftone-tamano: 12px 12px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  background: var(--color-papel);
  color: var(--color-texto-sobre-claro);
}

/* --- Panel --- */

.panel {
  background: var(--color-papel);
  border: var(--ancho-borde-panel) solid var(--color-tinta);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-panel);
  padding: var(--espacio-md);
}

/* --- Título de pantalla --- */

.titulo-pantalla {
  font-family: var(--fuente-display);
  font-size: var(--texto-2xl);
  color: var(--color-tinta);
  background: var(--color-panel);
  border: var(--ancho-borde-panel) solid var(--color-tinta);
  border-radius: var(--radio-borde);
  padding: var(--espacio-sm) var(--espacio-md);
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 0;
}

.titulo-pantalla::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--patron-halftone);
  background-size: var(--patron-halftone-tamano);
  opacity: 0.08;
  pointer-events: none;
}

.subtitulo-seccion {
  font-family: var(--fuente-display);
  font-size: var(--texto-xl);
  color: var(--color-tinta);
  margin: 0;
}

/* --- Botones --- */

.btn-primary, .btn-secondary {
  font-size: var(--texto-lg);
  letter-spacing: 0.5px;
  border: var(--ancho-borde-panel) solid var(--color-tinta);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-panel);
  padding: var(--espacio-sm) var(--espacio-lg);
  min-height: 44px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-primary {
  font-family: var(--fuente-display);
  color: var(--color-texto-sobre-oscuro);
  background: var(--color-alarma);
}

.btn-secondary {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  background: var(--color-papel);
  color: var(--color-tinta);
}

.btn-secondary.btn-destructivo {
  color: var(--color-alarma);
  border-color: var(--color-alarma);
}

.btn-primary:hover, .btn-secondary:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-tinta);
}

.btn-secondary.btn-destructivo:hover {
  box-shadow: 2px 2px 0 var(--color-alarma);
}

.btn-primary:active, .btn-secondary:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.btn-primary:focus-visible, .btn-secondary:focus-visible {
  outline: 3px solid var(--color-halftone);
  outline-offset: 2px;
}

/* --- Badges --- */

.badge {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: var(--texto-sm);
  border-radius: 999px;
  padding: 2px var(--espacio-sm);
  display: inline-block;
  border: 2px solid currentColor;
}

.badge-ok        { color: var(--color-ok);      background: color-mix(in srgb, var(--color-ok) 12%, white); }
.badge-pendiente { color: #8a6200;              background: color-mix(in srgb, var(--color-panel) 25%, white); }
.badge-error     { color: var(--color-alarma);  background: color-mix(in srgb, var(--color-alarma) 12%, white); }
.badge-neutro    { color: var(--color-tinta);   background: var(--color-papel-alt); }
/* Fondo sólido (no pastel como los otros 4) — para el caso que merece más
   peso visual que los demás sin poder confundirse con .badge-error (ej.
   "se crea un producto nuevo", el cambio más grande de una importación
   masiva, ver importar-excel.js). Mismo tratamiento de "bloque sólido +
   texto claro" que .btn-primary, no un componente nuevo. */
.badge-destacado { color: var(--color-texto-sobre-oscuro); background: var(--color-halftone); border-color: var(--color-halftone); }

/* --- Texto dato (SKU/CAE/montos/números de comprobante) --- */

.texto-dato {
  font-family: var(--fuente-dato);
  font-size: var(--texto-sm);
  color: var(--color-tinta);
  background: var(--color-papel-alt);
  padding: 1px var(--espacio-xs);
  border-radius: 2px;
}

.texto-dato-destacado {
  font-family: var(--fuente-dato);
  font-weight: 500;
}

/* --- Estado vacío --- */

.estado-vacio {
  font-family: var(--fuente-cuerpo);
  font-style: italic;
  color: var(--color-tinta-suave);
  text-align: center;
  padding: var(--espacio-xl);
  position: relative;
}

.estado-vacio::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--patron-halftone);
  background-size: var(--patron-halftone-tamano);
  opacity: 0.08;
  pointer-events: none;
}

/* --- Tabla --- */

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
}

.tabla th {
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: var(--texto-sm);
  text-align: left;
  padding: var(--espacio-sm);
  background: var(--color-tinta);
  color: var(--color-texto-sobre-oscuro);
  border-bottom: var(--ancho-borde-panel) solid var(--color-tinta);
}

.tabla td {
  padding: var(--espacio-sm);
  border-bottom: 1px solid var(--color-papel-alt);
}

.tabla tbody tr:nth-child(even) {
  background: var(--color-papel-alt);
}

.tabla tbody tr:hover {
  background: color-mix(in srgb, var(--color-halftone) 10%, var(--color-papel));
}

/* Tabla responsive: tarjetas apiladas en vez de scroll horizontal (< 768px).
   Cada <td> necesita data-etiqueta="..." para el label — lo agrega el JS
   de cada pantalla real (Checkpoint 2+), acá solo se deja la regla lista. */
@media (max-width: 767px) {
  .tabla thead {
    display: none;
  }
  .tabla, .tabla tbody, .tabla tr, .tabla td {
    display: block;
    width: 100%;
  }
  .tabla tbody tr {
    background: var(--color-papel);
    border: var(--ancho-borde-panel) solid var(--color-tinta);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-panel);
    padding: var(--espacio-sm);
    margin-bottom: var(--espacio-md);
  }
  .tabla tbody tr:nth-child(even) {
    background: var(--color-papel);
  }
  .tabla td {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-sm);
    border-bottom: 1px solid var(--color-papel-alt);
    padding: var(--espacio-xs) 0;
  }
  .tabla td:last-child {
    border-bottom: none;
  }
  .tabla td::before {
    content: attr(data-etiqueta);
    font-weight: 700;
  }
}

/* --- Pestañas / tabs --- */

.tabs {
  display: flex;
  gap: var(--espacio-xs);
  border-bottom: var(--ancho-borde-panel) solid var(--color-tinta);
  margin-bottom: var(--espacio-md);
  /* Con 4+ pestañas (o etiquetas largas) no entran en 375px — que se
     desplacen dentro de su propio contenedor en vez de forzar scroll
     horizontal de toda la página (encontrado en el Checkpoint 2, el demo
     del Checkpoint 1 solo probó 3 pestañas cortas). El panel-lateral y su
     overlay son position:fixed sobre el viewport real, así que cualquier
     desborde de .tabs quedaba visible al costado, sin cubrir. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-boton {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: var(--texto-base);
  padding: var(--espacio-sm) var(--espacio-md);
  background: var(--color-papel-alt);
  color: var(--color-tinta-suave);
  border: var(--ancho-borde-panel) solid var(--color-tinta);
  border-bottom: none;
  border-radius: var(--radio-borde) var(--radio-borde) 0 0;
  cursor: pointer;
}

.tab-boton[aria-selected="true"] {
  background: var(--color-papel);
  color: var(--color-tinta);
  position: relative;
  top: var(--ancho-borde-panel);
}

.tab-boton:focus-visible {
  outline: 3px solid var(--color-halftone);
  outline-offset: 2px;
}

/* --- Formulario --- */

.form-campo {
  margin-bottom: var(--espacio-md);
}

.form-campo label {
  font-family: var(--fuente-cuerpo);
  font-weight: 500;
  font-size: var(--texto-sm);
  display: block;
  margin-bottom: var(--espacio-xs);
}

.form-campo input, .form-campo select, .form-campo textarea {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  width: 100%;
  padding: var(--espacio-sm);
  min-height: 44px;
  border: 2px solid var(--color-tinta-suave);
  border-radius: var(--radio-borde);
  background: white;
  color: var(--color-tinta);
}

.form-campo input:focus-visible, .form-campo select:focus-visible, .form-campo textarea:focus-visible {
  outline: 3px solid var(--color-halftone);
  outline-offset: 1px;
  border-color: var(--color-halftone);
}

.form-campo .error {
  color: var(--color-alarma);
  font-size: var(--texto-xs);
  margin-top: var(--espacio-xs);
}

.form-campo .ayuda {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  margin-top: var(--espacio-xs);
  font-style: italic;
}

/* --- Panel lateral (drawer) para alta/edición --- */

.panel-lateral {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  max-width: 420px;
  background: var(--color-papel);
  border-left: var(--ancho-borde-panel) solid var(--color-tinta);
  box-shadow: -4px 0 0 var(--color-tinta);
  padding: var(--espacio-lg);
  overflow-y: auto;
  z-index: 100;
}

.panel-lateral-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.5);
  z-index: 99;
}