/* ── Variables ─────────────────────────────────────── */
:root {
  --c-primario:        #201d3a;
  --c-primario-hover:  #14122a;
  --c-primario-claro:  #efe9d8;
  --c-acento:          #b8902c;
  --c-acento-hover:    #96731f;
  --c-acento-claro:    #f6ecd2;
  --c-fondo:           #f7f4ee;
  --c-superficie:      #ffffff;
  --c-borde:           #e2ddd0;
  --c-texto:           #221f2e;
  --c-texto-suave:     #676274;
  --c-exito:           #166534;
  --c-exito-fondo:     #dcfce7;
  --c-exito-borde:     #bbf7d0;
  --c-advert:          #92400e;
  --c-advert-fondo:    #fef3c7;
  --c-advert-borde:    #fde68a;
  --c-peligro:         #991b1b;
  --c-peligro-fondo:   #fee2e2;
  --c-peligro-borde:   #fecaca;
  --c-neutro:          #374151;
  --c-neutro-fondo:    #f3f4f6;
  --c-neutro-borde:    #d1d5db;
  --fuente-display:    Georgia, 'Times New Roman', serif;
  --radio:             6px;
  --radio-lg:          10px;
  --sombra:            0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --sombra-sm:         0 1px 2px rgba(0,0,0,.06);
  --espaciado:         1rem;
  --ancho-max:         1120px;
  --sidebar-ancho:     240px;
}

/* ── Reset base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  -webkit-text-size-adjust: 100%;
}

/* Utilidades visuales reutilizables */
.ancho-440 { max-width: 440px; }
.ancho-480 { max-width: 480px; }
.ancho-520 { max-width: 520px; }
.ancho-540 { max-width: 540px; }
.ancho-560 { max-width: 560px; }
.ancho-600 { max-width: 600px; }
.texto-opcional { font-weight: 400; color: var(--c-texto-suave); }
.texto-ayuda { margin: .5rem 0 0; font-size: .875rem; color: var(--c-texto-suave); }
.campo-numero { max-width: 160px; }
.btn-ancho { width: 100%; justify-content: center; }
.form-inline { margin: 0; }
.margen-inferior { margin-bottom: 1.25rem; }
.aviso-separado { margin-top: .5rem; }
.oculto { display: none !important; }
.seccion-formulario { margin-top: 1rem; }
.tarjeta-header-compacta { padding-bottom: .5rem; margin-bottom: .5rem; }
.subtitulo-campo { font-size: .875rem; }
.kpi-valor-moneda { font-size: 1.35rem; }
.codigo-tabla { background: none; border: 0; padding: 0; font-size: .85em; }
.badge-nav { font-size: .7rem; }
.error-titulo { margin: .25rem 0 .5rem; }
.error-mensaje { color: var(--c-texto-suave); margin-bottom: 1.5rem; }
.texto-peligro { color: var(--c-peligro); }

/* ── Focus visible ─────────────────────────────────── */
:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Accesibilidad de movimiento ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ══ BARRA SIMPLE (login / error, sin sesión) ═════════ */
header.barra-simple {
  background: var(--c-primario);
  color: #fff;
  padding: 0.85rem 1.25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
header.barra-simple .marca { margin: 0; }

/* ══ SIDEBAR / APP SHELL ═══════════════════════════════ */
.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-family: var(--fuente-display);
  font-size: 1.2rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.marca:hover { color: var(--c-acento-claro); }
.logo-marca {
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255,255,255,.15);
}
.logo-marca-sm {
  height: 20px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  border-radius: 3px;
  background: rgba(255,255,255,.15);
}

.sidebar {
  width: var(--sidebar-ancho);
  flex-shrink: 0;
  background: var(--c-primario);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1.25rem 1rem;
  gap: 1.5rem;
}
.sidebar .marca {
  padding: 0 0.25rem;
  margin-bottom: 0.25rem;
}
.sidebar .marca span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}
.nav-links a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radio);
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-links a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-links a[aria-current="page"] {
  background: var(--c-acento);
  color: var(--c-primario);
  font-weight: 700;
}

.nav-grupo-etiqueta {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.62);
  padding: 0 0.75rem;
  margin: 0.15rem 0 0.1rem;
}

.nav-separador {
  height: 1px;
  background: rgba(255,255,255,.14);
  margin: 0.5rem 0.25rem 0;
}

.sidebar-usuario {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar-usuario-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.3rem 0.25rem;
  border-radius: var(--radio);
}
.sidebar-usuario-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-usuario-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botón salir */
.btn-nav-salir {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  font-size: 0.8125rem !important;
  padding: 0.4rem 0.7rem !important;
  cursor: pointer;
  border-radius: var(--radio) !important;
  font-family: inherit;
  white-space: nowrap;
  width: 100%;
  justify-content: center;
}
.btn-nav-salir:hover { background: rgba(255,255,255,.2) !important; }

/* Toggle móvil (barra superior delgada, solo <960px) */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radio);
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.sidebar-toggle:focus-visible { outline-color: #fff; }
.sidebar-toggle-marca {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 700;
  font-family: var(--fuente-display);
  font-size: 1.05rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sidebar-backdrop { display: none; }

.app-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Sidebar como panel deslizable en móvil ──────────── */
@media (max-width: 960px) {
  .app-shell {
    display: block;
    padding-top: 52px;
  }
  .sidebar-toggle,
  .sidebar-toggle-marca {
    display: flex;
    position: fixed;
    top: 0;
    z-index: 210;
    height: 52px;
  }
  .sidebar-toggle { left: 0.25rem; }
  .sidebar-toggle-marca { left: 3.25rem; right: 0.75rem; }
  .app-shell::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: var(--c-primario);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index: 200;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 220;
    box-shadow: 2px 0 16px rgba(0,0,0,.25);
  }
  .sidebar.abierta { transform: translateX(0); }
  .sidebar .marca { display: none; }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 215;
  }
  .sidebar-backdrop.abierta { display: block; }

  .app-content { width: 100%; }
}

/* ══ LAYOUT ════════════════════════════════════════════ */
main {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 1.5rem var(--espaciado);
  width: 100%;
}

/* ── Encabezado de sección ─────────────────────────── */
.page-header {
  margin-bottom: 1.5rem;
}
.page-header h1 {
  margin: 0 0 0.25rem;
  font-family: var(--fuente-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--c-texto);
}
.page-header p {
  margin: 0;
  color: var(--c-texto-suave);
  font-size: 0.9rem;
}

h1 { font-family: var(--fuente-display); font-size: 1.7rem; margin: 0 0 1rem; }
h2 { font-family: var(--fuente-display); font-size: 1.25rem; margin: 0 0 0.75rem; }

/* ══ TARJETAS ══════════════════════════════════════════ */
.tarjeta, form.tarjeta {
  background: var(--c-superficie);
  padding: 1.25rem;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  margin-bottom: 1.25rem;
  border: 1px solid var(--c-borde);
}
.tarjeta-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-borde);
}
.tarjeta-header h2 { margin: 0 0 0.2rem; font-size: 1rem; font-weight: 600; }
.tarjeta-header p  { margin: 0; color: var(--c-texto-suave); font-size: 0.875rem; }

/* ── Grilla de tarjetas ────────────────────────────── */
.tarjeta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* ── KPI cards ─────────────────────────────────────── */
.kpi {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-top: 3px solid var(--c-acento);
  border-radius: var(--radio-lg);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--sombra-sm);
}
.kpi-valor {
  font-family: var(--fuente-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-primario);
  font-variant-numeric: tabular-nums;
}
.kpi-etiqueta {
  font-size: 0.8125rem;
  color: var(--c-texto-suave);
  margin-top: 0.25rem;
}
.kpi.kpi-alerta { border-top-color: var(--c-peligro); }
.kpi.kpi-alerta .kpi-valor { color: var(--c-peligro); }
.kpi.kpi-warn { border-top-color: var(--c-advert); }
.kpi.kpi-warn  .kpi-valor  { color: var(--c-advert); }

/* ── Acciones rápidas ──────────────────────────────── */
.acciones-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

/* ══ TABLAS ════════════════════════════════════════════ */
.tabla-envolvente {
  background: var(--c-superficie);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  border: 1px solid var(--c-borde);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.tabla-envolvente table { margin-bottom: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-superficie);
}
th {
  background: #f8f9fb;
  color: var(--c-texto-suave);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--c-borde);
}
td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #eef0f4;
  vertical-align: middle;
  font-size: 0.9rem;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }

/* ── Estado vacío ──────────────────────────────────── */
.estado-vacio {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--c-texto-suave);
}
.estado-vacio p { margin: 0.25rem 0 0; font-size: 0.9rem; }

/* ══ FORMULARIOS ═══════════════════════════════════════ */
label {
  display: block;
  margin-top: 0.85rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--c-texto);
}
label:first-child { margin-top: 0; }
.campo-ayuda {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--c-texto-suave);
  margin-top: 0.15rem;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="file"],
select,
textarea {
  display: block;
  width: 100%;
  font-size: 0.9375rem;
  font-family: inherit;
  padding: 0.45rem 0.65rem;
  margin-top: 0.3rem;
  border: 1.5px solid var(--c-borde);
  border-radius: var(--radio);
  background: var(--c-superficie);
  color: var(--c-texto);
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  padding-right: 2rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c-primario);
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,58,95,.15);
}
input[disabled], select[disabled] {
  background: var(--c-fondo);
  color: var(--c-texto-suave);
  cursor: not-allowed;
}

/* ── Grupos de campos ──────────────────────────────── */
.campo-grupo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
/* Los labels dentro de una fila comparten la misma línea de partida: la regla
 * general de "label" de arriba está pensada para labels apiladas verticalmente
 * (solo el primero de todos pierde el margen), así que aquí se reinicia el
 * margen de cada label de la fila y se repone como margen de la fila completa,
 * evitando que el segundo campo de cada .campo-grupo quede más abajo que el
 * primero. */
.campo-grupo > label { margin-top: 0; }
label + .campo-grupo,
.campo-grupo + .campo-grupo {
  margin-top: 0.85rem;
}
@media (max-width: 500px) {
  .campo-grupo { grid-template-columns: 1fr; }
  .campo-grupo > label:not(:first-child) { margin-top: 0.85rem; }
}

/* ══ BOTONES ═══════════════════════════════════════════ */
button, .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radio);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
  line-height: 1.3;
}
button { width: auto; margin-top: 0; }

/* Primario */
.btn-primario, button[type="submit"]:not(.btn-secundario):not(.btn-peligro):not(.btn-nav-salir) {
  background: var(--c-primario);
  color: #fff;
  border-color: var(--c-primario);
}
.btn-primario:hover,
button[type="submit"]:not(.btn-secundario):not(.btn-peligro):not(.btn-nav-salir):hover {
  background: var(--c-primario-hover);
  border-color: var(--c-primario-hover);
}

/* Secundario */
.btn-secundario {
  background: var(--c-superficie);
  color: var(--c-primario);
  border-color: var(--c-borde);
}
.btn-secundario:hover {
  background: var(--c-primario-claro);
  border-color: var(--c-primario);
}

/* Peligro */
.btn-peligro {
  background: var(--c-peligro-fondo);
  color: var(--c-peligro);
  border-color: var(--c-peligro-borde);
}
.btn-peligro:hover {
  background: var(--c-peligro);
  color: #fff;
  border-color: var(--c-peligro);
}

/* Pequeño */
.btn-sm {
  font-size: 0.8125rem;
  padding: 0.3rem 0.7rem;
}

/* Grupo de botones */
.btn-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
  align-items: center;
}

button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ══ BADGES ════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-exito   { background: var(--c-exito-fondo);  color: var(--c-exito);   border-color: var(--c-exito-borde);  }
.badge-advert  { background: var(--c-advert-fondo); color: var(--c-advert);  border-color: var(--c-advert-borde); }
.badge-peligro { background: var(--c-peligro-fondo); color: var(--c-peligro); border-color: var(--c-peligro-borde); }
.badge-neutro  { background: var(--c-neutro-fondo); color: var(--c-neutro);  border-color: var(--c-neutro-borde); }
.badge-primario{ background: var(--c-primario-claro); color: var(--c-primario); border-color: var(--c-borde); }
.badge-acento  { background: var(--c-acento-claro); color: var(--c-acento-hover); border-color: #e6d29c; }

/* ══ ALERTAS / MENSAJES ════════════════════════════════ */
.alerta {
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  border: 1.5px solid;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alerta-error   { background: var(--c-peligro-fondo); color: var(--c-peligro);  border-color: var(--c-peligro-borde); }
.alerta-exito   { background: var(--c-exito-fondo);   color: var(--c-exito);    border-color: var(--c-exito-borde);   }
.alerta-advert  { background: var(--c-advert-fondo);  color: var(--c-advert);   border-color: var(--c-advert-borde);  }

/* Legacy compat */
.error { color: var(--c-peligro); font-weight: 600; font-size: 0.9rem; }
.aviso { color: var(--c-texto-suave); font-style: italic; font-size: 0.875rem; margin: 0.5rem 0 0; }

/* ══ NUEVA VENTA ═══════════════════════════════════════ */
.lineas-venta { margin-bottom: 0.75rem; }
.linea-venta {
  display: grid;
  grid-template-columns: 1.5rem 1fr 7rem auto;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #fafbfc;
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
}
.linea-num {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-texto-suave);
  align-self: center;
  text-align: center;
}
.linea-control { margin: 0; font-weight: 400; }
.linea-venta select { flex: none; }
.linea-venta input[type="number"] { flex: none; }
.linea-error {
  grid-column: 2 / -1;
  font-size: 0.8rem;
  color: var(--c-peligro);
  margin-top: 0.1rem;
  display: none;
}
.linea-error.visible { display: block; }

.btn-quitar-linea {
  background: none !important;
  border: none !important;
  color: var(--c-texto-suave) !important;
  padding: 0.3rem !important;
  align-self: center;
  font-size: 1.1rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.btn-quitar-linea:hover { color: var(--c-peligro) !important; }
.btn-quitar-linea:disabled { visibility: hidden; }

.resumen-venta {
  background: var(--c-primario-claro);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.resumen-total {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-primario);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 580px) {
  .linea-venta {
    grid-template-columns: 1.5rem 1fr 6rem auto;
  }
}
@media (max-width: 440px) {
  .linea-venta {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .linea-num { text-align: left; }
  .btn-quitar-linea { justify-self: end; }
}

/* ══ LOGO PREVIEW ══════════════════════════════════════ */
.logo-preview {
  max-height: 80px;
  max-width: 200px;
  display: block;
  margin-top: 0.75rem;
  border-radius: var(--radio);
  border: 1px solid var(--c-borde);
}

/* ══ VENTA DETALLE ═════════════════════════════════════ */
.venta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem;
  color: var(--c-texto-suave);
  margin-bottom: 0.25rem;
}
.venta-meta strong { color: var(--c-texto); }
.venta-total-row td {
  font-weight: 700;
  font-size: 1rem;
  border-top: 2px solid var(--c-borde) !important;
  border-bottom: none !important;
}

/* ══ CÓDIGO / COMANDOS ═════════════════════════════════ */
code {
  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  font-size: 0.875rem;
  background: var(--c-fondo);
  border: 1px solid var(--c-borde);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
}
pre {
  background: var(--c-fondo);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  padding: 0.75rem 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
}
pre code { background: none; border: none; padding: 0; }

/* ══ ENLACE VOLVER ═════════════════════════════════════ */
.enlace-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--c-primario);
  text-decoration: none;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.enlace-volver:hover { text-decoration: underline; }

/* ══ LÍNEAS DE COMPRA (producto + cantidad + costo unitario) ══════════ */
.lineas-compra { margin-bottom: 0.75rem; }
.lineas-compra-header {
  display: grid;
  grid-template-columns: 1.5rem 1fr 5.5rem 6rem 5.5rem auto;
  gap: 0.5rem;
  padding: 0 0.75rem;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-texto-suave);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.lineas-compra-header span:first-child { grid-column: 2; }
.linea-compra {
  display: grid;
  grid-template-columns: 1.5rem 1fr 5.5rem 6rem 5.5rem auto;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--c-fondo);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
}
.linea-compra select { flex: none; }
.linea-compra input[type="number"] { flex: none; }
.linea-subtotal {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-texto);
  text-align: right;
  white-space: nowrap;
  padding-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .lineas-compra-header { grid-template-columns: 1.5rem 1fr 5rem 5.5rem 5rem auto; }
  .linea-compra { grid-template-columns: 1.5rem 1fr 5rem 5.5rem 5rem auto; }
}
@media (max-width: 480px) {
  .lineas-compra-header { display: none; }
  .linea-compra {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .linea-compra .linea-num { text-align: left; }
  .linea-compra .btn-quitar-linea { justify-self: end; }
  .linea-subtotal {
    text-align: left;
    padding-bottom: 0;
    color: var(--c-texto-suave);
  }
  .linea-subtotal::before { content: "Subtotal: "; font-weight: 400; }
}

/* Columna numérica alineada a la derecha en tablas (montos, cantidades) y una
 * variante compacta de badge; ambas ya se usaban en el detalle de venta. */
.col-der { text-align: right; font-variant-numeric: tabular-nums; }
.badge-sm { font-size: 0.7rem; padding: 0.15rem 0.45rem; }
.col-fecha { white-space: nowrap; }
.celda-truncar {
  display: inline-block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ══ RESPONSIVE TABLAS MÓVIL ═══════════════════════════ */
@media (max-width: 540px) {
  .tabla-envolvente { border-radius: var(--radio); box-shadow: none; }

  table, thead, tbody, th, td, tr { display: block; }
  thead tr { position: absolute; top: -9999px; left: -9999px; }
  tbody tr {
    margin-bottom: 0.65rem;
    border: 1px solid var(--c-borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--c-superficie);
  }
  tbody tr:last-child { margin-bottom: 0; }
  td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eef0f4;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    gap: 0.5rem;
  }
  td:last-child { border-bottom: none; }
  td::before {
    content: attr(data-etiqueta);
    font-weight: 600;
    color: var(--c-texto-suave);
    font-size: 0.8rem;
    flex-shrink: 0;
  }
  .celda-truncar {
    display: inline;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* ══ PÁGINA DE LOGIN ═══════════════════════════════════ */
.login-wrap {
  max-width: 400px;
  margin: 3rem auto 0;
}
.login-marca {
  text-align: center;
  margin-bottom: 1.5rem;
}
.login-marca img {
  max-height: 72px;
  margin: 0 auto 0.5rem;
  display: block;
}
.login-marca strong {
  font-family: var(--fuente-display);
  font-size: 1.4rem;
  color: var(--c-primario);
}

/* ══ GRÁFICOS (SVG servido por el propio servidor) ═════ */
.grafico-svg {
  width: 100%;
  height: auto;
  display: block;
}
.grafico-barra { fill: var(--c-acento); }
.grafico-barra:hover { fill: var(--c-acento-hover); }
.grafico-eje { stroke: var(--c-borde); stroke-width: 1; }
.grafico-etiqueta { fill: var(--c-texto-suave); font-size: 11px; font-family: inherit; }
.grafico-valor { fill: var(--c-texto); font-size: 12px; font-weight: 600; font-family: inherit; }
.grafico-vacio { fill: var(--c-texto-suave); font-size: 13px; font-family: inherit; text-anchor: middle; }

/* ══ IMPRESIÓN / EXPORTAR A PDF ════════════════════════ */
@media print {
  .sidebar, .sidebar-toggle, .sidebar-toggle-marca, .sidebar-backdrop,
  .app-shell::before, .no-imprimir {
    display: none !important;
  }
  .app-shell { display: block; padding-top: 0; }
  main { max-width: none; padding: 0; }
  body { background: #fff; }
  .tarjeta, .tabla-envolvente { box-shadow: none; border: 1px solid #ccc; }
}

/* ══ PÁGINA DE ERROR ═══════════════════════════════════ */
.error-wrap {
  max-width: 500px;
  margin: 3rem auto 0;
  text-align: center;
}
.error-codigo {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--c-borde);
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* ══ RONDA «PRIMER CLIENTE»: buscar productos, entender el inicio, recuperarse de errores ══ */

/* Accesibilidad: saltar al contenido y foco visible también en campos de formulario */
.saltar-contenido {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 300;
  background: var(--c-primario);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radio);
  text-decoration: none;
  font-weight: 600;
}
.saltar-contenido:focus { top: 0.5rem; }
main:focus { outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .55);
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--c-peligro); }
tr[hidden] { display: none !important; }
.alerta:focus { outline: 3px solid #3b82f6; outline-offset: 2px; }
.alerta-nota { display: block; margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 400; }
.acciones-centradas { justify-content: center; margin: 1rem 0 0; }

/* Campos de texto en pantallas táctiles: 16 px evita el zoom automático de iOS al enfocar */
@media (pointer: coarse) {
  input[type="text"], input[type="search"], input[type="number"], input[type="date"],
  input[type="password"], select, textarea { font-size: 1rem; }
}

/* Inicio: primeros pasos */
.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.paso {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  background: var(--c-superficie);
}
.paso-actual { border-color: var(--c-acento); background: var(--c-acento-claro); }
.paso-hecho { background: var(--c-fondo); }
.paso-marca {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--c-primario-claro);
  color: var(--c-primario);
}
.paso-actual .paso-marca { background: var(--c-primario); color: #fff; }
.paso-hecho .paso-marca { background: var(--c-exito-fondo); color: var(--c-exito); }
.paso-texto { display: flex; flex-direction: column; min-width: 0; }
.paso-texto span { font-size: 0.8125rem; color: var(--c-texto-suave); }
@media (max-width: 480px) {
  .paso { grid-template-columns: 2rem minmax(0, 1fr); }
  .paso .btn { grid-column: 2; justify-self: start; }
}

/* Inicio: tarjetas de «lo de hoy» */
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
a.kpi { display: block; text-decoration: none; color: inherit; }
a.kpi:hover { box-shadow: var(--sombra); }
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
  .kpi { padding: 0.8rem 0.9rem; }
  .kpi-valor { font-size: 1.5rem; }
  .kpi-valor.kpi-valor-moneda { font-size: 1.1rem; }
}

/* Inicio: existencias con filtro */
.existencias-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.25rem 0 0.25rem;
}
.existencias-cabecera h2 { margin: 0; font-size: 1.1rem; }
.filtro-tabla { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; }
.filtro-tabla .filtro-etiqueta { margin: 0; font-size: 0.8125rem; }
.filtro-tabla input[type="search"] { width: 16rem; max-width: 100%; margin-top: 0.2rem; }
.filtro-check { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 400; min-height: 44px; }
.filtro-check input { width: 1.1rem; height: 1.1rem; margin: 0; }
#filtro-estado { min-height: 1.2em; margin: 0 0 0.5rem; }

/* Nueva venta: buscador de productos */
.linea-venta { grid-template-columns: 1.5rem minmax(0, 1fr) 6.5rem auto; }
.buscador { position: relative; min-width: 0; }
.buscador-input { margin-top: 0; }
.linea-cantidad { margin-top: 0; }
.buscador-popup {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  background: var(--c-superficie);
  border: 1.5px solid var(--c-primario);
  border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  max-height: min(22rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.buscador-popup[hidden] { display: none; }
.buscador-lista { list-style: none; margin: 0; padding: 0; }
.buscador-opcion {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.75rem;
  min-height: 44px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-borde);
  touch-action: manipulation;
}
.buscador-opcion:hover { background: var(--c-primario-claro); }
.buscador-opcion[aria-selected="true"] { background: var(--c-acento-claro); }
.buscador-nombre { font-weight: 600; overflow-wrap: anywhere; }
.buscador-meta { font-size: 0.8125rem; color: var(--c-texto-suave); }
.buscador-opcion-agotada { cursor: not-allowed; }
.buscador-opcion-agotada .buscador-nombre { color: var(--c-texto-suave); font-weight: 400; }
.buscador-estado {
  margin: 0;
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--c-texto-suave);
  background: var(--c-fondo);
}
.linea-info { grid-column: 2 / -1; font-size: 0.8125rem; color: var(--c-texto-suave); }
.linea-error { font-weight: 600; }
@media (max-width: 580px) {
  .linea-venta { grid-template-columns: 1.5rem minmax(0, 1fr) 6rem auto; }
}
@media (max-width: 440px) {
  .linea-venta { grid-template-columns: 1fr; }
  .linea-info, .linea-error { grid-column: auto; }
}

/* El atributo hidden debe ganar a reglas como `select { display: block }` */
[hidden] { display: none !important; }

/* Toques sin retardo de doble toque y objetivos táctiles de al menos 44 px en el celular */
button, .btn, a.kpi { touch-action: manipulation; }
@media (pointer: coarse) {
  .paso .btn, .btn-sm { min-height: 44px; }
}
@media (max-width: 440px) {
  .btn-quitar-linea:disabled { display: none; }
}