/* © 2026 Carlos Sanz Izquierdo — clicgest.es */

/* ============================================================
   TPV — Layout base
   Hereda el lenguaje visual de ClicGest: Plus Jakarta Sans + tokens
   de superficie/radio/sombra. Punto único de la estética del TPV.
   ============================================================ */

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

:root {
  /* Marca (clonada de ClicGest, ajustable para la tienda) */
  --cg-primary:  #166534;
  --cg-accent:   #22c55e;
  --cg-dark:     #0f172a;
  --cg-light:    #f8fafc;
  --cg-danger:   #be123c;

  /* Superficie / línea / texto auxiliar */
  --cg-surface:  #ffffff;
  --cg-line:     #e2e8f0;
  --cg-muted:    #5b6577;

  /* Radios */
  --cg-r-sm: 10px;
  --cg-r:    14px;
  --cg-r-lg: 18px;

  /* Sombras */
  --cg-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --cg-shadow:    0 2px 12px rgba(15, 23, 42, .05);
  --cg-shadow-lg: 0 12px 30px rgba(15, 23, 42, .10);

  /* Densidad */
  --cg-pad: 20px;
  --cg-gap: 16px;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.cg-card {
  background: var(--cg-surface);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-r);
  box-shadow: var(--cg-shadow);
  padding: var(--cg-pad);
}

/* Botón de marca. El texto va en negro sobre el verde claro para
   garantizar contraste (no dependemos del color como único canal). */
.btn-cg {
  background: var(--cg-accent);
  color: #00210f;
  font-weight: 700;
  border: none;
}
/* En hover oscurecemos el verde pero MANTENEMOS el texto oscuro:
   #00210f sobre #16a34a = 5.20:1 (AA). Pasar a blanco daba 3.30:1,
   insuficiente para el botón a tamaño normal (p. ej. el del 404). */
.btn-cg:hover { background: #16a34a; color: #00210f; }
.btn-cg:disabled, .btn-cg.disabled { opacity: .55; }

/* Encabezado de página: título + acción primaria a la derecha. */
.cg-page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:1rem; }
.cg-page-head h1 { margin:0; }

/* ============================================================
   STEPPER — progreso del asistente de importación (3 pasos).
   El estado NO se transmite solo por color: cada paso lleva su
   número, su nombre y un icono (check si está completado).
   ============================================================ */
.cg-steps { display:flex; align-items:flex-start; gap:0; list-style:none; padding:0; margin:0 0 1.25rem; }
.cg-steps li { flex:1 1 0; text-align:center; position:relative; font-size:.85rem; color:var(--cg-muted); }
/* Línea que une los pasos (detrás de los círculos). */
.cg-steps li::before {
  content:""; position:absolute; top:17px; left:-50%; width:100%; height:3px;
  background:var(--cg-line); z-index:0;
}
.cg-steps li:first-child::before { display:none; }
.cg-steps .cg-step-dot {
  position:relative; z-index:1; width:36px; height:36px; margin:0 auto .4rem;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:#fff; border:2px solid var(--cg-line); color:var(--cg-muted); font-weight:700;
}
.cg-steps .cg-step-label { display:block; font-weight:600; }
/* Paso completado: verde + check; el check (icono) es el canal real. */
.cg-steps li.is-done { color:var(--cg-primary); }
.cg-steps li.is-done .cg-step-dot { background:var(--cg-primary); border-color:var(--cg-primary); color:#fff; }
.cg-steps li.is-done::before { background:var(--cg-primary); }
/* Paso actual: anillo de acento + texto en negrita oscuro. */
.cg-steps li.is-active { color:var(--cg-dark); }
.cg-steps li.is-active .cg-step-dot { border-color:var(--cg-primary); color:var(--cg-primary); box-shadow:0 0 0 4px rgba(22,101,52,.12); }

/* ============================================================
   ESTADO VACÍO — pantalla sin datos con orientación de qué hacer.
   ============================================================ */
.cg-empty { text-align:center; padding:2.5rem 1rem; }
.cg-empty .cg-empty-icon {
  width:72px; height:72px; margin:0 auto 1rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(22,101,52,.08); color:var(--cg-primary); font-size:2rem;
}
.cg-empty h2 { font-size:1.15rem; font-weight:700; margin-bottom:.35rem; }
.cg-empty p { color:var(--cg-muted); max-width:30rem; margin:0 auto 1.25rem; }

/* ============================================================
   MATRIZ color × talla — botones-toggle grandes (teclado y táctil).
   Usa .btn-check de Bootstrap; el marcado se ve por relleno + icono ✓,
   nunca solo por color.
   ============================================================ */
.cg-chip-group { display:flex; flex-wrap:wrap; gap:.5rem; }
.cg-chip {
  --b: var(--cg-line);
  border:1.5px solid var(--b); border-radius:999px; padding:.4rem .85rem;
  font-weight:600; font-size:.9rem; cursor:pointer; user-select:none;
  background:#fff; color:var(--cg-dark); transition:all .12s ease;
  display:inline-flex; align-items:center; gap:.3rem; line-height:1.1;
}
.cg-chip:hover { border-color:var(--cg-primary); }
.cg-chip .bi-check2 { display:none; }
.btn-check:checked + .cg-chip {
  background:var(--cg-primary); border-color:var(--cg-primary); color:#fff;
}
.btn-check:checked + .cg-chip .bi-check2 { display:inline; }
/* Foco de teclado: anillo SÓLIDO de marca (no solo el glow tenue, que
   sobre blanco quedaba en ~1.5:1). El trazo #166534 da 7.13:1: visible. */
.btn-check:focus-visible + .cg-chip {
  outline:2px solid var(--cg-primary); outline-offset:2px;
  box-shadow:0 0 0 4px rgba(22,101,52,.20);
}

/* ============================================================
   GRID DE VARIANTES — fila editable alineada con una cabecera única.
   Evita repetir la etiqueta de cada campo en cada variante.
   ============================================================ */
.cg-varhead, .cg-varrow {
  display:grid;
  grid-template-columns: 1.1fr 1fr 1.7fr 1fr 1fr .7fr auto;
  gap:.5rem; align-items:center;
}
.cg-varhead {
  padding:0 .5rem .4rem; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; color:var(--cg-muted);
  border-bottom:1px solid var(--cg-line);
}
.cg-varrow { padding:.5rem; border-radius:var(--cg-r-sm); }
.cg-varrow + .cg-varrow { margin-top:.25rem; }
.cg-varrow.is-bajo { background:rgba(190,18,60,.05); box-shadow:inset 3px 0 0 var(--cg-danger); }
.cg-varrow.is-off  { opacity:.7; }
.cg-var-label { display:none; } /* etiqueta interna (solo visible apilado en móvil) */

/* Apilado en pantallas estrechas: cada campo recupera su etiqueta. */
@media (max-width: 991.98px) {
  .cg-varhead { display:none; }
  .cg-varrow {
    grid-template-columns: 1fr 1fr; gap:.6rem;
    border:1px solid var(--cg-line); padding:.85rem;
  }
  .cg-var-label { display:block; font-size:.72rem; font-weight:700; color:var(--cg-muted); margin-bottom:.15rem; }
  .cg-varrow .cg-var-actions { grid-column:1 / -1; }
}

/* ============================================================
   VENTA (Fase 2) — panel de totales y control de cantidad del carrito.
   ============================================================ */
/* Panel de totales: pegajoso en escritorio para tenerlo siempre a mano. */
.cg-totales { position:sticky; top:1rem; }
.cg-total-num { font-size:1.9rem; font-weight:800; color:var(--cg-primary); line-height:1; }

/* Control de cantidad (− [n] +) de cada línea del carrito. */
.cg-qty { display:inline-flex; align-items:center; gap:.25rem; justify-content:center; }
.cg-qty .btn { width:32px; padding:.15rem 0; font-weight:700; line-height:1; }

/* El campo de código de barras destaca: es el centro de la pantalla. */
#ean { letter-spacing:.04em; }
#ean:focus { border-color:var(--cg-primary); box-shadow:0 0 0 .2rem rgba(22,101,52,.18); }