/* ==========================================================================
   Taller Norte ERP · Sistema de diseño
   Tokens → base → layout → componentes → vistas → impresión
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  --marca: #0b1f3a;
  --azul-l: #2563eb;  --azul-d: #6f9bff;
  --turq-l: #0f9f92;  --turq-d: #35c9b9;
  --verde-l: #1f8a57; --verde-d: #4cc38a;
  --ambar-l: #b7791f; --ambar-d: #f0b44c;
  --rojo-l: #d23a4b;  --rojo-d: #ff7b89;
  --violeta-l: #7048e8; --violeta-d: #a78bfa;

  --fondo: light-dark(#f4f6fa, #0c121c);
  --superficie: light-dark(#ffffff, #131b27);
  --superficie-2: light-dark(#f8fafc, #182231);
  --superficie-3: light-dark(#eef2f7, #1f2b3c);
  --borde: light-dark(#e2e8f0, #243246);
  --borde-fuerte: light-dark(#cbd5e1, #34455d);
  --texto: light-dark(#0f1c2e, #e6edf6);
  --texto-2: light-dark(#475569, #a3b1c4);
  --texto-3: light-dark(#7c8a9e, #6f8098);

  --primario: light-dark(var(--azul-l), var(--azul-d));
  --primario-fondo: light-dark(#eaf1ff, #16284a);
  --primario-texto: light-dark(#fff, #0b1426);
  --exito: light-dark(var(--verde-l), var(--verde-d));
  --exito-fondo: light-dark(#e7f6ee, #10291e);
  --aviso: light-dark(var(--ambar-l), var(--ambar-d));
  --aviso-fondo: light-dark(#fdf3e1, #2d2310);
  --peligro: light-dark(var(--rojo-l), var(--rojo-d));
  --peligro-fondo: light-dark(#fdecee, #331820);
  --info: light-dark(var(--turq-l), var(--turq-d));
  --info-fondo: light-dark(#e3f6f4, #0f2a29);
  --violeta: light-dark(var(--violeta-l), var(--violeta-d));
  --violeta-fondo: light-dark(#efe9fe, #221a3d);

  --lateral: light-dark(#0b1f3a, #0a111b);
  --lateral-texto: #aebdd2;
  --lateral-activo: rgba(255 255 255 / .1);

  --sombra-1: 0 1px 2px rgba(15 28 46 / .06), 0 1px 1px rgba(15 28 46 / .04);
  --sombra-2: 0 4px 14px rgba(15 28 46 / .08), 0 1px 3px rgba(15 28 46 / .06);
  --sombra-3: 0 24px 60px rgba(8 18 34 / .25);
  --radio: 10px;
  --radio-s: 7px;
  --radio-l: 14px;

  --fuente: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;

  --ancho-lateral: 244px;
  --alto-barra: 60px;

  accent-color: var(--primario);
  scrollbar-color: var(--borde-fuerte) transparent;
}
html.tema-oscuro { color-scheme: dark; }
html.tema-claro { color-scheme: light; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto);
  font: 14px/1.5 var(--fuente); -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.sprite { display: none; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.s { width: 15px; height: 15px; }
.ico.l { width: 22px; height: 22px; }
.num, .monto, td.num { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--primario) 25%, transparent); }
kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--borde-fuerte); border-bottom-width: 2px;
  border-radius: 5px; font: 600 11px/1.4 var(--fuente); color: var(--texto-2); background: var(--superficie-2);
}
hr { border: 0; border-top: 1px solid var(--borde); margin: 16px 0; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--lateral); color: var(--lateral-texto);
  display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; scrollbar-width: thin; scrollbar-color: #2b3e59 transparent;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: #fff; }
.marca-logo {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #2563eb, #0f9f92); box-shadow: 0 6px 16px rgba(37 99 235 / .35); overflow: hidden;
}
.marca-logo img { width: 100%; height: 100%; object-fit: cover; }
.marca-logo .ico { color: #fff; }
.marca strong { display: block; font-size: 14.5px; line-height: 1.2; }
.marca small { display: block; font-size: 11.5px; color: #7f93ae; }
.nav-grupo { margin-top: 12px; padding: 0 10px 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #6c819d; font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--lateral-texto);
  font-weight: 500; font-size: 13.5px; text-decoration: none; position: relative;
}
.nav-item:hover { background: rgba(255 255 255 / .06); color: #fff; text-decoration: none; }
.nav-item.activo { background: var(--lateral-activo); color: #fff; }
.nav-item.activo::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #6f9bff; }
.nav-item .contador { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #d23a4b; color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
.lateral-pie { margin-top: auto; padding-top: 14px; }
.estado-local { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(255 255 255 / .05); font-size: 12px; }
.estado-local i { width: 8px; height: 8px; border-radius: 50%; background: #4cc38a; box-shadow: 0 0 0 4px rgba(76 195 138 / .18); flex: none; }
.estado-local.alerta i { background: #f0b44c; box-shadow: 0 0 0 4px rgba(240 180 76 / .18); }
.estado-local strong { color: #fff; display: block; font-size: 12.5px; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 20; height: var(--alto-barra); display: flex; align-items: center; gap: 12px;
  padding: 0 24px; background: color-mix(in srgb, var(--fondo) 82%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.barra .menu-movil { display: none; }
.buscador-global { flex: 1; max-width: 520px; position: relative; }
.buscador-global input { width: 100%; height: 38px; padding: 0 64px 0 38px; border-radius: 9px; border: 1px solid var(--borde); background: var(--superficie); }
.buscador-global > .ico { position: absolute; left: 12px; top: 10px; color: var(--texto-3); }
.buscador-global kbd { position: absolute; right: 9px; top: 9px; }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chip-barra {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--borde); background: var(--superficie); font-size: 12.5px; font-weight: 550; color: var(--texto-2); cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.chip-barra:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.chip-barra b { color: var(--texto); font-weight: 650; }
.chip-barra .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); }
.chip-barra.ok .punto { background: var(--exito); }
.chip-barra.aviso .punto { background: var(--aviso); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  color: #fff; background: linear-gradient(135deg, #2563eb, #7048e8); border: 0; cursor: pointer;
}
.contenido { padding: 24px; max-width: 1480px; width: 100%; margin: 0 auto; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cabecera p { color: var(--texto-2); margin-top: 4px; }
.cabecera .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.migas { font-size: 12px; color: var(--texto-3); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }

/* ---------- Resultados de búsqueda global ---------- */
.resultados-globales {
  position: absolute; top: 44px; left: 0; right: 0; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: var(--sombra-3); max-height: 70vh; overflow-y: auto; padding: 6px; z-index: 40;
}
.resultados-globales h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 8px 10px 4px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  font-weight: 560; font-size: 13.5px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); box-shadow: 0 1px 2px rgba(37 99 235 / .25); }
.btn.primario:hover { filter: brightness(1.07); }
.btn.exito { background: var(--exito); border-color: var(--exito); color: #fff; }
.btn.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn.peligro-suave { color: var(--peligro); }
.btn.peligro-suave:hover { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 40%, transparent); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn.fantasma:hover { background: var(--superficie-3); color: var(--texto); }
.btn.s { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn.l { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.btn.icono { width: 36px; padding: 0; }
.btn.icono.s { width: 30px; }
.btn.bloque { width: 100%; }
.btn .cargando { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.grupo-btn { display: inline-flex; border: 1px solid var(--borde); border-radius: 9px; padding: 3px; background: var(--superficie-2); gap: 2px; }
.grupo-btn button { border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: 6px; font-weight: 560; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.grupo-btn button.activo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }

/* ---------- Tarjetas y paneles ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-1); }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.tarjeta-cab p { color: var(--texto-3); font-size: 12.5px; margin-top: 2px; }
.tarjeta-cuerpo { padding: 18px; }
.tarjeta-pie { padding: 12px 18px; border-top: 1px solid var(--borde); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tarjeta.plana { box-shadow: none; }
.rejilla { display: grid; gap: 16px; }
.rejilla.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla.dash { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pila { display: flex; flex-direction: column; gap: 16px; }
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.espacio { flex: 1; }
.suave { color: var(--texto-2); }
.tenue { color: var(--texto-3); font-size: 12.5px; }
.fuerte { font-weight: 650; }
.positivo { color: var(--exito); }
.negativo { color: var(--peligro); }

/* KPIs */
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.kpi-cab { display: flex; align-items: center; justify-content: space-between; color: var(--texto-2); font-size: 12.5px; font-weight: 550; }
.kpi-icono { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--primario-fondo); color: var(--primario); }
.kpi-icono.exito { background: var(--exito-fondo); color: var(--exito); }
.kpi-icono.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.kpi-icono.peligro { background: var(--peligro-fondo); color: var(--peligro); }
.kpi-icono.info { background: var(--info-fondo); color: var(--info); }
.kpi-icono.violeta { background: var(--violeta-fondo); color: var(--violeta); }
.kpi-valor { font-size: 25px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-detalle { font-size: 12.5px; color: var(--texto-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
a.kpi, button.kpi { text-align: left; border: 1px solid var(--borde); cursor: pointer; color: inherit; font: inherit; text-decoration: none; }
a.kpi:hover, button.kpi:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.tendencia { font-weight: 650; font-size: 12px; padding: 1px 6px; border-radius: 5px; }
.tendencia.sube { color: var(--exito); background: var(--exito-fondo); }
.tendencia.baja { color: var(--peligro); background: var(--peligro-fondo); }

/* ---------- Insignias ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px;
  font-weight: 620; white-space: nowrap; background: var(--superficie-3); color: var(--texto-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge.sin-punto::before { display: none; }
.badge.exito { background: var(--exito-fondo); color: var(--exito); }
.badge.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.badge.peligro { background: var(--peligro-fondo); color: var(--peligro); }
.badge.info { background: var(--info-fondo); color: var(--info); }
.badge.primario { background: var(--primario-fondo); color: var(--primario); }
.badge.violeta { background: var(--violeta-fondo); color: var(--violeta); }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span, .campo > label { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.campo small { color: var(--texto-3); font-size: 12px; }
.campo .error { color: var(--peligro); font-size: 12px; display: none; }
.control, .campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea {
  height: 38px; width: 100%; padding: 0 11px; border-radius: 8px; border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto); transition: border-color .15s, box-shadow .15s;
}
.campo textarea { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; }
.control:focus, .campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 18%, transparent);
}
.campo input:user-invalid, .campo select:user-invalid, .campo textarea:user-invalid { border-color: var(--peligro); background: var(--peligro-fondo); }
.campo:has(:user-invalid) .error { display: block; }
.campo input[readonly] { background: var(--superficie-2); color: var(--texto-2); }
.campo .con-sufijo { position: relative; }
.campo .con-sufijo input { padding-right: 52px; }
.campo .con-sufijo b { position: absolute; right: 11px; top: 9px; font-size: 12.5px; color: var(--texto-3); font-weight: 600; }
.campo .con-prefijo { position: relative; }
.campo .con-prefijo input { padding-left: 30px; }
.campo .con-prefijo b { position: absolute; left: 11px; top: 9px; font-size: 13px; color: var(--texto-3); font-weight: 600; }
.form { display: grid; gap: 14px; }
.form.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form .ancho { grid-column: 1 / -1; }
.seccion-form { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); grid-column: 1 / -1; padding-top: 6px; border-top: 1px dashed var(--borde); margin-top: 4px; }
.seccion-form:first-child { border: 0; padding: 0; margin: 0; }
.buscador { position: relative; min-width: 220px; }
.buscador input { width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: 8px; border: 1px solid var(--borde-fuerte); background: var(--superficie); }
.buscador > .ico { position: absolute; left: 11px; top: 10px; color: var(--texto-3); }
.buscador input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 18%, transparent); }
select.control { padding-right: 28px; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 550; }
.interruptor input { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--borde-fuerte); position: relative; cursor: pointer; transition: background .2s; margin: 0; flex: none; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0 0 0 / .25); }
.interruptor input:checked { background: var(--primario); }
.interruptor input:checked::after { transform: translateX(16px); }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcion span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 9px; border: 1px solid var(--borde-fuerte); font-size: 12.5px; font-weight: 600; text-align: center; color: var(--texto-2); }
.opcion input:checked + span { border-color: var(--primario); background: var(--primario-fondo); color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.opcion input:focus-visible + span { outline: 2px solid var(--primario); outline-offset: 2px; }

/* ---------- Barra de herramientas y pestañas ---------- */
.herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.herramientas .buscador { flex: 1; max-width: 420px; }
.herramientas select.control, .herramientas input.control { width: auto; min-width: 150px; height: 36px; }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.pestanas button, .pestanas a {
  border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--texto-2); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; text-decoration: none;
}
.pestanas .activo { color: var(--primario); border-bottom-color: var(--primario); }
.pestanas .contador { background: var(--superficie-3); border-radius: 10px; padding: 0 7px; font-size: 11.5px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); font-weight: 580; font-size: 12.5px; color: var(--texto-2);
}
.chip b { color: var(--texto); }
.chip.activo { border-color: var(--primario); background: var(--primario-fondo); color: var(--primario); }

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tabla th {
  text-align: left; font-size: 11.5px; font-weight: 650; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 14px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); white-space: nowrap; position: sticky; top: 0;
}
.tabla td { padding: 11px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr.clic:hover td { background: var(--superficie-2); }
.tabla .der, .tabla td.num, .tabla th.num { text-align: right; }
.tabla .centro { text-align: center; }
.tabla td strong { font-weight: 600; display: block; }
.tabla td small { color: var(--texto-3); font-size: 12px; display: block; }
.tabla tfoot td { font-weight: 700; background: var(--superficie-2); border-top: 1px solid var(--borde); border-bottom: 0; }
.tabla .acciones-fila { text-align: right; white-space: nowrap; }
.tabla tr.anulada td { color: var(--texto-3); }
.tabla tr.anulada td strong { text-decoration: line-through; }
.tabla.compacta td, .tabla.compacta th { padding: 8px 12px; }
.paginacion { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--borde); color: var(--texto-2); font-size: 12.5px; gap: 12px; flex-wrap: wrap; }
.paginacion .fila { gap: 6px; }

/* ---------- Estados vacíos y carga ---------- */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 20px; color: var(--texto-2); }
.vacio .ico { width: 40px; height: 40px; color: var(--texto-3); stroke-width: 1.4; margin-bottom: 4px; }
.vacio strong { color: var(--texto); font-size: 15px; }
.vacio p { max-width: 380px; font-size: 13px; }
.esqueleto { background: linear-gradient(90deg, var(--superficie-3) 25%, var(--superficie-2) 50%, var(--superficie-3) 75%); background-size: 200% 100%; animation: brillo 1.3s infinite; border-radius: 8px; }
@keyframes brillo { to { background-position: -200% 0; } }
.carga-vista { display: grid; gap: 16px; }
.carga-vista .esqueleto { height: 110px; }
.aviso-caja {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid; font-size: 13px;
  background: var(--info-fondo); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--texto);
}
.aviso-caja .ico { color: var(--info); margin-top: 1px; }
.aviso-caja.aviso { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }
.aviso-caja.aviso .ico { color: var(--aviso); }
.aviso-caja.peligro { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 30%, transparent); }
.aviso-caja.peligro .ico { color: var(--peligro); }
.aviso-caja.exito { background: var(--exito-fondo); border-color: color-mix(in srgb, var(--exito) 30%, transparent); }
.aviso-caja.exito .ico { color: var(--exito); }
.aviso-caja strong { display: block; }

/* ---------- Diálogos ---------- */
dialog.modal {
  border: 0; padding: 0; border-radius: 16px; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-3);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: none; flex-direction: column;
}
dialog.modal[open] { display: flex; animation: aparecer .18s ease-out; }
dialog.modal.ancho { width: min(820px, calc(100vw - 32px)); }
dialog.modal.muy-ancho { width: min(1100px, calc(100vw - 32px)); }
dialog.modal.estrecho { width: min(420px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(8 16 30 / .55); backdrop-filter: blur(2px); }
dialog.modal.panel-derecho { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; border-radius: 16px 0 0 16px; width: min(640px, 100vw); }
dialog.modal.panel-derecho[open] { animation: deslizar .22s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes deslizar { from { transform: translateX(40px); opacity: .4; } }
.modal-cab { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--borde); }
.modal-cab .eyebrow { font-size: 11.5px; font-weight: 650; color: var(--primario); text-transform: uppercase; letter-spacing: .06em; }
.modal-cab h2 { font-size: 18px; }
.modal-cab p { color: var(--texto-2); font-size: 13px; margin-top: 3px; }
.modal-cab .btn { margin-left: auto; }
.modal-cuerpo { padding: 18px 20px; overflow-y: auto; flex: 1; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--borde); background: var(--superficie-2); border-radius: 0 0 16px 16px; }
dialog.panel-derecho .modal-pie { border-radius: 0 0 0 16px; }
.modal-pie .izq { margin-right: auto; }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed; inset: auto 20px 20px auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
  display: flex; flex-direction: column; gap: 10px; z-index: 1000; pointer-events: none; color: inherit;
}
.toasts:empty { display: none; }
.toast {
  pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; width: min(380px, calc(100vw - 40px)); padding: 13px 14px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-left: 4px solid var(--exito);
  border-radius: 12px; box-shadow: var(--sombra-3); animation: aparecer .2s ease-out;
}
.toast.error { border-left-color: var(--peligro); }
.toast.aviso { border-left-color: var(--aviso); }
.toast.info { border-left-color: var(--primario); }
.toast .ico { margin-top: 1px; color: var(--exito); }
.toast.error .ico { color: var(--peligro); }
.toast.aviso .ico { color: var(--aviso); }
.toast.info .ico { color: var(--primario); }
.toast strong { display: block; font-size: 13.5px; }
.toast small { display: block; color: var(--texto-2); font-size: 12.5px; margin-top: 2px; }
.toast .btn { margin-left: auto; }
.toast.saliendo { opacity: 0; transform: translateX(20px); transition: all .2s; }

/* ---------- Menús emergentes ---------- */
.menu-emergente {
  position: fixed; min-width: 210px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 11px;
  box-shadow: var(--sombra-3); padding: 6px; z-index: 900; margin: 0; inset: auto;
}
.menu-emergente button, .menu-emergente a {
  display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; border-radius: 7px;
  text-align: left; cursor: pointer; font-weight: 530; color: var(--texto); text-decoration: none;
}
.menu-emergente button:hover, .menu-emergente a:hover { background: var(--superficie-3); text-decoration: none; }
.menu-emergente .peligro { color: var(--peligro); }
.menu-emergente hr { margin: 6px 0; }
.menu-emergente .cab-menu { padding: 8px 10px 6px; }
.menu-emergente .cab-menu small { color: var(--texto-3); display: block; }

/* ---------- Combobox / autocompletado ---------- */
.combo { position: relative; }
.combo-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 11px; box-shadow: var(--sombra-3); max-height: 360px; overflow-y: auto; padding: 5px; margin: 0; list-style: none;
}
.combo-lista li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.combo-lista li[aria-selected="true"], .combo-lista li:hover { background: var(--primario-fondo); }
.combo-lista li .espacio { min-width: 0; }
.combo-lista li strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-lista li small { display: block; color: var(--texto-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-lista .sin-resultados { color: var(--texto-3); cursor: default; justify-content: center; }
.combo-lista .sin-resultados:hover { background: none; }

/* ---------- Gráficos ---------- */
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .rejilla-linea { stroke: var(--borde); stroke-dasharray: 3 4; }
.grafico text { fill: var(--texto-3); font-size: 11px; font-family: var(--fuente); }
.grafico .barra-a { fill: var(--primario); }
.grafico .barra-b { fill: var(--info); }
.grafico .barra-c { fill: var(--peligro); }
.grafico rect:hover { filter: brightness(1.15); }
.grafico .linea { fill: none; stroke: var(--exito); stroke-width: 2.2; }
.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--texto-2); flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.barra-progreso { height: 8px; border-radius: 4px; background: var(--superficie-3); overflow: hidden; }
.barra-progreso i { display: block; height: 100%; width: var(--pct, 0%); background: var(--primario); border-radius: 4px; }
.barra-progreso.exito i { background: var(--exito); }
.barra-progreso.aviso i { background: var(--aviso); }
.barra-progreso.peligro i { background: var(--peligro); }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--borde); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple .espacio { min-width: 0; }
.lista-simple strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-simple small { color: var(--texto-3); font-size: 12px; }
.definiciones { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 13.5px; }
.definiciones dt { color: var(--texto-2); }
.definiciones dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.definiciones .total { font-size: 17px; font-weight: 750; padding-top: 8px; border-top: 1px solid var(--borde); }
.definiciones .total + .total { border: 0; padding-top: 0; }
.miniatura { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: var(--superficie-3); flex: none; display: grid; place-items: center; color: var(--texto-3); font-size: 10px; font-weight: 700; overflow: hidden; }
.ident { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ident > div { min-width: 0; }

/* ---------- Acceso (login / asistente) ---------- */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--superficie); }
.acceso-arte {
  background: radial-gradient(1200px 600px at -10% -20%, #2563eb55, transparent 60%), radial-gradient(900px 500px at 110% 120%, #0f9f9255, transparent 60%), #0b1f3a;
  color: #dbe6f5; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.acceso-arte h1 { font-size: 34px; line-height: 1.15; color: #fff; max-width: 460px; letter-spacing: -.02em; }
.acceso-arte p { color: #a9bbd4; max-width: 440px; margin-top: 14px; font-size: 15px; }
.acceso-arte ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.acceso-arte li { display: flex; gap: 10px; align-items: center; color: #c8d6ea; }
.acceso-arte li .ico { color: #35c9b9; }
.acceso-form { display: grid; place-items: center; padding: 40px 24px; }
.acceso-caja { width: min(400px, 100%); display: flex; flex-direction: column; gap: 18px; }
.acceso-caja h2 { font-size: 24px; }
.pin-puntos { display: flex; gap: 12px; justify-content: center; margin: 6px 0; }
.pin-puntos i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borde-fuerte); transition: all .15s; }
.pin-puntos i.lleno { background: var(--primario); border-color: var(--primario); transform: scale(1.1); }
.pin-puntos.error i { border-color: var(--peligro); animation: temblar .35s; }
@keyframes temblar { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.teclado button {
  height: 58px; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie-2); font-size: 21px; font-weight: 600;
  cursor: pointer; transition: background .1s;
}
.teclado button:hover { background: var(--superficie-3); }
.teclado button:active { transform: scale(.97); }
.teclado button.accion { font-size: 13px; color: var(--texto-2); }
.pasos { display: flex; gap: 8px; }
.pasos i { flex: 1; height: 4px; border-radius: 2px; background: var(--superficie-3); }
.pasos i.hecho { background: var(--primario); }

/* ---------- Punto de venta ---------- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.pos-buscar { position: relative; }
.pos-buscar input { height: 48px; font-size: 15.5px; padding-left: 44px; border-radius: 11px; border: 1.5px solid var(--borde-fuerte); width: 100%; background: var(--superficie); }
.pos-buscar input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 15%, transparent); }
.pos-buscar > .ico { position: absolute; left: 14px; top: 14px; color: var(--texto-3); width: 20px; height: 20px; }
.pos-buscar kbd { position: absolute; right: 12px; top: 13px; }
.lineas-pos .linea {
  display: grid; grid-template-columns: minmax(0, 1fr) 118px 110px 84px 104px 34px; gap: 10px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--borde);
}
.lineas-pos { container-type: inline-size; }
@container (max-width: 640px) {
  .lineas-pos .linea { grid-template-columns: minmax(108px, 1.1fr) minmax(0, 1fr) minmax(0, .8fr) 30px; row-gap: 8px; }
  .lineas-pos .linea > :first-child { grid-column: 1 / -1; }
  .lineas-pos .linea > .subtotal { order: 1; grid-column: 1 / -1; }
  .lineas-pos .linea.cab { display: none; }
}
.lineas-pos .linea.cab { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); font-weight: 650; padding-block: 9px; background: var(--superficie-2); }
.lineas-pos .linea input { height: 34px; width: 100%; border: 1px solid var(--borde-fuerte); border-radius: 7px; padding: 0 8px; background: var(--superficie); text-align: right; font-variant-numeric: tabular-nums; }
.lineas-pos .linea .subtotal { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.cantidad { display: flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: 8px; overflow: hidden; height: 34px; }
.cantidad button { width: 30px; height: 100%; border: 0; background: var(--superficie-2); cursor: pointer; display: grid; place-items: center; }
.cantidad button:hover { background: var(--superficie-3); }
.cantidad input { border: 0 !important; border-radius: 0 !important; text-align: center !important; height: 100% !important; min-width: 0; }
.resumen-pos { position: sticky; top: calc(var(--alto-barra) + 16px); }
.total-grande { font-size: 32px; font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.total-bs { color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.pagos-lista { display: grid; gap: 8px; }
.pago-linea { display: grid; grid-template-columns: 1fr 120px 30px; gap: 8px; align-items: center; }
.pago-linea select, .pago-linea input { height: 36px; border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 0 8px; background: var(--superficie); width: 100%; }
.pago-linea input { text-align: right; }
.metodos-rapidos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.metodos-rapidos button { height: 38px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie-2); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--texto-2); }
.metodos-rapidos button:hover { border-color: var(--primario); color: var(--primario); background: var(--primario-fondo); }
.saldo-pago { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 9px; font-weight: 650; }
.saldo-pago.falta { background: var(--aviso-fondo); color: var(--aviso); }
.saldo-pago.cambio { background: var(--exito-fondo); color: var(--exito); }
.saldo-pago.exacto { background: var(--superficie-3); color: var(--texto-2); }

/* Líneas de compra: dos filas (producto arriba; cantidad, costo, precio y ubicación abajo) */
.lineas-compra .linea { grid-template-columns: repeat(4, minmax(0, 1fr)) 110px 30px; row-gap: 8px; align-items: start; }
.lineas-compra .linea > .ident { grid-column: 1 / 5; }
.lineas-compra .linea .subtotal { line-height: 38px; }
.lineas-compra .mini { min-width: 0; }
.lineas-compra .mini > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); font-weight: 650; margin-bottom: 4px; }
.lineas-compra .mini small { display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .lineas-compra .linea { grid-template-columns: 1fr 1fr; }
  .lineas-compra .linea > .ident { grid-column: 1 / -1; }
  .lineas-compra .linea > [data-quitar] { justify-self: end; }
  .lineas-compra .linea .subtotal { text-align: left; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .rejilla.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 1100px) {
  .pos { grid-template-columns: minmax(0, 1fr); }
  .resumen-pos { position: static; }
}
@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; left: 0; top: 0; z-index: 100; width: 270px; transform: translateX(-100%); transition: transform .22s; }
  .app.menu-abierto .lateral { transform: none; box-shadow: var(--sombra-3); }
  .app.menu-abierto::after { content: ""; position: fixed; inset: 0; background: rgba(8 16 30 / .5); z-index: 90; }
  .barra .menu-movil { display: inline-flex; }
  .rejilla.dash, .rejilla.c3, .pos { grid-template-columns: minmax(0, 1fr); }
  .resumen-pos { position: static; }
  .acceso { grid-template-columns: 1fr; }
  .acceso-arte { display: none; }
}
@media (max-width: 720px) {
  .contenido { padding: 16px; }
  .barra { padding: 0 12px; }
  .rejilla.c2, .rejilla.c4, .form.c2, .form.c3 { grid-template-columns: minmax(0, 1fr); }
  .chip-barra .ocultable, .buscador-global kbd, #chipCaja [data-caja] { display: none; }
  .chip-barra { padding: 0 9px; }
  .barra { gap: 8px; }
  .barra-acciones { gap: 4px; }
  .buscador-global input { padding-right: 10px; }
  .kpi-valor { font-size: 21px; }
}

/* ---------- Impresión (reportes en pantalla) ---------- */
@media print {
  .lateral, .barra, .no-imprimir, .toasts { display: none !important; }
  .app { display: block; }
  body { background: #fff; color: #000; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}