/* ============================================================
   1. VARIABLES Y TEMAS
   ============================================================ */
:root {
  --bg: #1a1a1a;
  --header: #202020;
  --card: #2b2b2b;
  --fila: #222222;
  --linea: #3a3a3a;
  --texto: #e9ecef;
  --suave: #9aa3ad;
  --azul: #1f538d;
  --azul-claro: #3498db;
  --verde: #27ae60;
  --verde-txt: #2ecc71;
  --rojo: #c0392b;
  --rojo-claro: #e74c3c;
  --naranja: #e67e22;
  --amarillo: #f1c40f;
  --superficie-2: #2c3e50;
  --hover-ghost: #333;
  --input-fondo: #232323;
  --radio: 8px;
  --primary: var(--azul-claro);
  --primaryT: rgba(52, 152, 219, .35);
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Tema claro: pisa las mismas variables, todo el resto del CSS ya las usa */
:root[data-tema="claro"] {
  --bg: #f4f5f7;
  --header: #ffffff;
  --card: #ffffff;
  --fila: #f0f1f3;
  --linea: #dcdfe3;
  --texto: #1c1e21;
  --suave: #5b6570;
  --superficie-2: #e4e9ef;
  --hover-ghost: rgba(0, 0, 0, .06);
  --input-fondo: #eef0f3;
  color-scheme: light;
}

/* ============================================================
   2. BASE
   ============================================================ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.4;
}

:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }

h2 { margin: 0 0 14px; font-size: 20px; }

main { max-width: 1400px; margin: 0 auto; padding: 16px 20px 40px; }

.card { background: var(--card); border-radius: var(--radio); padding: 20px; }

/* ============================================================
   3. CABECERA
   ============================================================ */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 20px; background: var(--header); border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.marca-nombre { font-size: 15px; font-weight: 700; white-space: nowrap; }
.acciones { display: flex; gap: 8px; flex-wrap: nowrap; flex: 0 0 auto; }

.estado { font-size: 13px; color: var(--suave); display: inline-flex; align-items: center; gap: 6px; }
.estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--suave); }
.estado.ok::before { background: var(--verde-txt); }
.estado.aviso::before { background: var(--naranja); }

/* Indicador de caja (encabezado) */
.caja-chip {
  padding: 4px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: transparent; border: 1px solid var(--linea); border-radius: 999px;
}
.caja-chip.abierta { color: var(--verde-txt); border-color: var(--verde); background: rgba(39, 174, 96, .12); }
.caja-chip.cerrada { color: var(--rojo-claro); border-color: var(--rojo); background: rgba(192, 57, 43, .12); }
.caja-chip.vieja { color: var(--naranja); border-color: var(--naranja); background: rgba(230, 126, 34, .12); }
.caja-chip:hover { filter: brightness(1.2); }

/* Membresia (chip) */
.mem-chip {
  height: 26px; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: transparent; border: 1px solid var(--linea); border-radius: 999px; color: var(--suave);
}
.mem-chip.activa { color: var(--verde-txt); border-color: var(--verde); background: rgba(39, 174, 96, .12); }
.mem-chip.vencida, .mem-chip.sin {
  color: #fff; border-color: var(--naranja);
  background: linear-gradient(135deg, var(--naranja), #f39c12);
  font-weight: 800; letter-spacing: .3px;
  box-shadow: 0 2px 8px rgba(230,126,34,.35);
  animation: pulso-mem 2.4s ease-in-out infinite;
}
.mem-chip.vencida:hover, .mem-chip.sin:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(230,126,34,.5); }
@keyframes pulso-mem { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,126,34,.5); } 50% { box-shadow: 0 0 0 6px rgba(230,126,34,0); } }
.mem-chip:hover { filter: brightness(1.2); }

/* Interruptor de tema (From Uiverse.io by JkHuger) */
.theme { display: flex; align-items: center; align-self: stretch; -webkit-tap-highlight-color: transparent; }
.theme .theme__toggle-wrap { margin-top: auto; margin-bottom: 0; }
.theme__fill, .theme__icon { transition: 0.3s; }
.theme__fill { background-color: var(--bg); display: block; mix-blend-mode: difference; position: fixed; inset: 0; height: 100%; transform: translateX(-100%); pointer-events: none; }
.theme__icon, .theme__toggle { z-index: 1; }
.theme__icon, .theme__icon-part { position: absolute; }
.theme__icon { display: block; top: 0.5em; left: 0.5em; width: 1.5em; height: 1.5em; }
.theme__icon-part { border-radius: 50%; box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset; top: calc(50% - 0.5em); left: calc(50% - 0.5em); width: 1em; height: 1em; transition: box-shadow 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out; transform: scale(0.5); }
.theme__icon-part ~ .theme__icon-part { background-color: hsl(0,0%,100%); border-radius: 0.05em; top: 50%; left: calc(50% - 0.05em); transform: rotate(0deg) translateY(0.5em); transform-origin: 50% 0; width: 0.1em; height: 0.2em; }
.theme__icon-part:nth-child(3) { transform: rotate(45deg) translateY(0.45em); }
.theme__icon-part:nth-child(4) { transform: rotate(90deg) translateY(0.45em); }
.theme__icon-part:nth-child(5) { transform: rotate(135deg) translateY(0.45em); }
.theme__icon-part:nth-child(6) { transform: rotate(180deg) translateY(0.45em); }
.theme__icon-part:nth-child(7) { transform: rotate(225deg) translateY(0.45em); }
.theme__icon-part:nth-child(8) { transform: rotate(270deg) translateY(0.5em); }
.theme__icon-part:nth-child(9) { transform: rotate(315deg) translateY(0.5em); }
.theme__label, .theme__toggle, .theme__toggle-wrap { position: relative; }
.theme__toggle, .theme__toggle:before { display: block; }
.theme__toggle { font-size: inherit; background-color: hsl(48,90%,85%); border-radius: 25% / 50%; box-shadow: 0 0 0 0.125em var(--primaryT); padding: 0.25em; width: 6em; height: 3em; -webkit-appearance: none; appearance: none; transition: background-color 0.3s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.3s ease-in-out; }
.theme__toggle:before { background-color: hsl(48,90%,55%); border-radius: 50%; content: ""; width: 2.5em; height: 2.5em; transition: 0.3s; }
.theme__toggle:focus { box-shadow: 0 0 0 0.125em var(--primary); outline: transparent; }
.theme__toggle:checked { background-color: hsl(198,90%,15%); }
.theme__toggle:checked:before, .theme__toggle:checked ~ .theme__icon { transform: translateX(3em); }
.theme__toggle:checked:before { background-color: hsl(198,90%,55%); }
.theme__toggle:checked ~ .theme__fill { transform: translateX(0); }
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) { box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset; transform: scale(1); top: 0.2em; left: -0.2em; }
.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part { opacity: 0; }
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) { transform: rotate(45deg) translateY(0.8em); }
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) { transform: rotate(90deg) translateY(0.8em); }
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) { transform: rotate(135deg) translateY(0.8em); }
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) { transform: rotate(180deg) translateY(0.8em); }
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) { transform: rotate(225deg) translateY(0.8em); }
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) { transform: rotate(270deg) translateY(0.8em); }
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) { transform: rotate(315deg) translateY(0.8em); }
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) { transform: rotate(360deg) translateY(0.8em); }
.theme__toggle-wrap { margin: 0 0.75em; font-size: 7px; }

/* Banners (aviso de copia y stock bajo) */
.banner {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 20px; background: #4a3a12; border-bottom: 1px solid #7a6220; color: #ffe08a;
}
.banner-stock { background: #4a1f1a; border-bottom-color: #8a3a30; color: #ffd9d4; }
.banner-stock .btn { color: #ffd9d4; border-color: #8a3a30; background: rgba(255, 255, 255, .08); }
.banner-stock .btn:hover { background: rgba(255, 255, 255, .16); }

/* ============================================================
   4. PESTANAS
   ============================================================ */
.tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--linea); overflow-x: auto; }
.tab {
  background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--suave);
  padding: 14px 18px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--texto); }
.tab.activa { color: var(--texto); border-bottom-color: var(--azul-claro); }
.tab-tutorial { display: flex; align-items: center; padding: 14px 18px; font-weight: 600; white-space: nowrap; color: var(--suave); text-decoration: none; border-bottom: 3px solid transparent; }
.tab-tutorial:hover { color: var(--texto); }

/* ============================================================
   5. FORMULARIOS Y BOTONES
   ============================================================ */
label, .lbl { display: block; font-size: 14px; color: var(--suave); margin-bottom: 4px; }

input, select {
  width: 100%; height: 40px; padding: 0 12px; font: inherit; color: var(--texto);
  background: var(--bg); border: 1px solid var(--linea); border-radius: 6px;
}
input::placeholder { color: #6c7580; }

.btn {
  height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px;
  font: inherit; font-weight: 600; color: #fff; cursor: pointer; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--azul); }
.btn-primary:hover { background: #2980b9; }
.btn-ok { background: var(--verde); }
.btn-ok:hover { background: #1e8449; }
.btn-danger { background: var(--rojo); }
.btn-danger:hover { background: #a93226; }
.btn-ghost { background: transparent; border-color: var(--linea); color: var(--texto); }
.btn-ghost:hover { background: var(--hover-ghost); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-alto { height: 48px; font-size: 15px; }
.btn-block { display: block; width: 100%; margin-top: 10px; }

.campo { margin-top: 14px; }

/* Formularios en linea */
.grid-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: 10px; align-items: center; }
.grid-stock { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; align-items: end; margin-top: 14px; }
.ayuda { margin: 10px 0 0; font-size: 13px; color: var(--suave); }
.barra { margin: 14px 0; max-width: 380px; }
.barra-productos { max-width: none; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.barra-productos input { flex: 1; min-width: 220px; }
.barra-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   6. OPERACIONES (VENTA)
   ============================================================ */
.ops { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; align-items: start; }

.busqueda { position: relative; }
.sug {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 230px; overflow-y: auto;
  background: var(--bg); border: 2px solid var(--azul-claro); border-radius: 0 0 6px 6px;
}
.sug button {
  display: block; width: 100%; padding: 8px 12px; text-align: left; font: inherit; color: var(--texto);
  background: transparent; border: 0; cursor: pointer;
}
.sug button:hover, .sug button.sel { background: var(--azul); }
.sug .sug-precio { float: right; color: var(--suave); font-size: 13px; }

.precio-info { margin: 8px 0 0; padding-left: 10px; border-left: 3px solid var(--azul-claro); font-weight: 600; color: var(--texto); }
.stock-info { margin: 4px 0 0; min-height: 1.4em; font-size: 13px; color: var(--suave); }
.stock-info:not(:empty) { padding-left: 10px; border-left: 3px solid var(--linea); }
.stock-info.bajo, .stock-info.agotado { border-left-color: currentColor; }
.stock-info.bajo { color: var(--naranja); font-weight: 700; }
.stock-info.agotado { color: var(--rojo-claro); font-weight: 700; }

.input-grande { height: 64px; font-size: 32px; font-weight: 700; text-align: center; color: var(--texto); background: var(--input-fondo); }

.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; }
.stepper .btn { width: 56px; height: 56px; font-size: 24px; padding: 0; }
.u-cant { min-width: 60px; text-align: center; font-size: 32px; font-weight: 700; }

.subtotal { margin: 20px 0 6px; font-size: 22px; font-weight: 700; color: var(--verde-txt); text-align: center; }

.ticket {
  min-height: 240px; max-height: 46vh; overflow-y: auto; background: var(--bg);
  border: 1px solid var(--linea); border-radius: 6px;
}
.ticket-vacio { padding: 40px 20px; text-align: center; color: var(--suave); }
.ticket-fila { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 14px; padding: 10px 14px; }
.ticket-fila:nth-child(odd) { background: var(--card); }
.ticket-fila:nth-child(even) { background: var(--fila); }
.t-nombre { font-weight: 700; }
.t-cant { color: var(--suave); text-align: right; min-width: 80px; }
.t-sub { color: var(--verde-txt); font-weight: 700; text-align: right; min-width: 110px; }

.pago { margin-top: 16px; }
.segmentado { display: flex; }
.seg {
  flex: 1; height: 46px; font: inherit; font-weight: 700; color: var(--texto); background: var(--bg);
  border: 1px solid var(--linea); cursor: pointer;
}
.seg:first-child { border-radius: 6px 0 0 6px; }
.seg:last-child { border-radius: 0 6px 6px 0; }
.seg + .seg { border-left: 0; }
.seg[aria-pressed="true"] { background: var(--azul); border-color: var(--azul-claro); }

.total { margin: 16px 0 10px; text-align: center; font-size: clamp(30px, 5vw, 48px); font-weight: 800; color: var(--verde-txt); font-variant-numeric: tabular-nums; }
.fila-botones { display: flex; gap: 10px; }
.fila-botones .btn { flex: 1; }

/* Ultima venta */
.ultima-venta { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(128,128,128,.35); border-radius: 8px; }
.uv-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.uv-meta { opacity: .7; font-size: 13px; margin-bottom: 6px; }
.uv-fila { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.uv-total { border-top: 1px dashed rgba(128,128,128,.5); margin-top: 4px; padding-top: 6px; font-weight: bold; }

/* ============================================================
   7. CAJA DIARIA
   ============================================================ */
.fila-caja { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila-caja input { flex: 1; min-width: 220px; }
.grid-mov { display: grid; grid-template-columns: 190px 160px 1fr auto; gap: 10px; align-items: center; }
#caja-abierta-card > * + * { margin-top: 14px; }
.titulo-hist-caja { margin: 24px 0 0; font-size: 18px; }
.caja-titulo-abierta { color: var(--verde-txt); }
.caja-titulo-cierre { color: var(--rojo-claro); }
#caja-info { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; font-weight: 400; color: var(--suave); }
#caja-info strong { color: var(--texto); font-weight: 700; }
#caja-esperado { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; padding: 10px 14px; background: rgba(39, 174, 96, .12); border: 0; border-left: 4px solid var(--verde); border-radius: 0 6px 6px 0; font-weight: 600; color: var(--texto); }
#caja-esperado .ce-monto { font-size: 22px; font-weight: 800; color: var(--verde-txt); font-variant-numeric: tabular-nums; }
#caja-esperado-detalle { margin: 0 0 14px; font-variant-numeric: tabular-nums; }

/* ============================================================
   8. ESTADISTICAS Y INDICADORES (tambien usados en Caja diaria)
   ============================================================ */
.kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.kpis.kpis-caja { margin-top: 0; margin-bottom: 12px; }
.kpi { min-width: 170px; padding: 10px 18px; text-align: center; color: var(--texto); background: var(--superficie-2); border: 2px solid var(--linea); border-radius: 8px; }
.kpi.kpi-total { border-color: var(--amarillo); }
.kpi .lbl { font-size: 13px; color: var(--suave); margin-bottom: 2px; }
.kpi .monto { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.centro { display: flex; justify-content: center; margin-top: 18px; }
.resumen-linea { margin: 14px 2px; font-weight: 700; }

/* Graficos de torta */
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; }
.grafico-card h3 { margin: 0 0 14px; font-size: 16px; }
.pie-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-height: 200px; }
.pie-svg { width: 200px; height: 200px; flex: none; }
.pie-svg path, .pie-svg circle { stroke: var(--card); stroke-width: 2; }
.pie-vacio { margin: 0; color: var(--suave); }
.leyenda { flex: 1; min-width: 190px; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.leyenda li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; }
.leyenda .pto { width: 12px; height: 12px; border-radius: 3px; }
.leyenda .ley-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leyenda .ley-val { text-align: right; font-variant-numeric: tabular-nums; }
.leyenda .ley-val small { display: block; color: var(--suave); }

/* ============================================================
   9. TABLAS Y ETIQUETAS
   ============================================================ */
.tabla-wrap { margin-top: 14px; overflow-x: auto; border-radius: 6px; }
.tabla { width: 100%; border-collapse: collapse; background: var(--bg); }
.tabla th { padding: 11px 14px; text-align: left; font-size: 13px; background: var(--azul); }
.tabla td { padding: 10px 14px; }
.tabla tbody tr:nth-child(odd) { background: var(--card); }
.tabla tbody tr:nth-child(even) { background: var(--fila); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .acc { text-align: right; white-space: nowrap; }
.tabla .acc .btn + .btn { margin-left: 6px; }
.tabla .vacio { padding: 36px 14px; text-align: center; color: var(--suave); }
.tabla tr.anulada td:not(.acc) { text-decoration: line-through; opacity: .5; }
.suave { color: var(--suave); }
.naranja { color: var(--naranja); font-weight: 700; }
.verde { color: var(--verde-txt); font-weight: 700; }
.rojo { color: var(--rojo-claro); font-weight: 700; }
.tag { margin-left: 8px; padding: 2px 8px; font-size: 12px; color: var(--suave); border: 1px solid var(--linea); border-radius: 10px; }
.tag-rojo { color: var(--rojo-claro); border-color: var(--rojo); }
.tag-naranja { color: var(--naranja); border-color: var(--naranja); }
.medio { color: var(--azul-claro); font-style: italic; }

/* ============================================================
   10. HISTORIAL
   ============================================================ */
.hist-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.periodo { min-width: 220px; }
.resumen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.res-btn {
  --c: var(--verde);
  display: grid; gap: 2px; min-width: 170px; padding: 10px 18px; text-align: center;
  font: inherit; font-weight: 700; color: var(--texto); background: var(--superficie-2); border: 2px solid var(--c);
  border-radius: 8px; cursor: pointer;
}
.res-btn .monto { font-size: 18px; font-variant-numeric: tabular-nums; }
.res-btn[data-filtro="EFECTIVO"] { --c: var(--verde); }
.res-btn[data-filtro="TARJETA"] { --c: var(--naranja); }
.res-btn[data-filtro="TRANSFERENCIA"] { --c: var(--azul-claro); }
.res-btn[data-filtro="TOTAL"] { --c: var(--amarillo); }
.res-btn.activa { background: var(--c); }
.res-btn[data-filtro="TOTAL"].activa { color: #000; }
.nota { color: var(--suave); font-size: 13px; }

/* ============================================================
   11. ANUNCIOS
   ============================================================ */
.ad-slot { max-width: 970px; min-height: 90px; margin: 10px auto 30px; }

/* ============================================================
   12. DIALOGOS
   ============================================================ */
dialog {
  max-width: 440px; padding: 24px; color: var(--texto); background: var(--card);
  border: 1px solid var(--linea); border-radius: 10px;
}
dialog::backdrop { background: rgba(0, 0, 0, .65); }
dialog p { margin: 0 0 20px; font-size: 16px; }
.dlg-botones { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.dlg-sep { margin-top: 18px; }
#dlg-msg { white-space: pre-line; }

/* Cerrar caja (resumen) */
.cc { min-width: 300px; }
.cc-tit { font-size: 18px; font-weight: bold; margin-bottom: 4px; }
.cc-sec { margin-top: 12px; padding-bottom: 3px; border-bottom: 1px solid rgba(128,128,128,.35); font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: .5px; opacity: .7; }
.cc-fila { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.cc-total { border-top: 1px dashed rgba(128,128,128,.5); margin-top: 3px; padding-top: 6px; font-weight: bold; }

/* Abrir caja / aviso al vender */
#dlg-abrir-caja, #dlg-caja-venta { width: 100%; max-width: 420px; }
#dlg-abrir-caja h2 { margin-bottom: 10px; }
#dlg-abrir-caja .nota { margin: 0 0 14px; }

/* Membresia */
#dlg-membresia { width: 100%; max-width: 420px; }
#dlg-membresia h2 { margin-bottom: 10px; }

/* Copias de seguridad */
#dlg-copias { width: 100%; max-width: 520px; }
#dlg-copias h2 { margin-bottom: 10px; }
#dlg-copias .nota { margin: 0 0 14px; }
.copias-lista { max-height: 50vh; overflow-y: auto; margin-bottom: 18px; border: 1px solid var(--linea); border-radius: 6px; }
.copias-lista .nota { margin: 0; padding: 20px; text-align: center; }
.copia-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font-variant-numeric: tabular-nums; }
.copia-fila:nth-child(odd) { background: var(--bg); }
.copia-fila:nth-child(even) { background: var(--fila); }

/* Importar productos */
#dlg-importar { width: 100%; max-width: 520px; }
#dlg-importar h2 { margin-bottom: 10px; }
#dlg-importar .nota { margin: 0 0 14px; }
#dlg-importar .copias-lista { max-height: 40vh; }

/* Cambiar precios */
#dlg-aumento { width: 100%; max-width: 560px; }
#dlg-aumento h2 { margin-bottom: 10px; }
#dlg-aumento .nota { margin: 0 0 12px; }
#dlg-aumento #aum-contador { margin: 8px 0 14px; }
.aum-fila { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.aum-fila input { flex: 1; min-width: 0; }
.aum-lista { max-height: 36vh; overflow-y: auto; border: 1px solid var(--linea); border-radius: 6px; }
.aum-lista .nota { margin: 0; padding: 20px; text-align: center; }
.aum-item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  margin: 0; padding: 9px 12px; font-size: 14px; color: var(--texto); cursor: pointer;
}
.aum-item:nth-child(odd) { background: var(--bg); }
.aum-item:nth-child(even) { background: var(--fila); }
.aum-item input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--azul-claro); }
.aum-precio { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--suave); }
.aum-nuevo { color: var(--verde-txt); font-weight: 700; }
.aum-nuevo.baja { color: var(--naranja); }
.aum-pct { margin-top: 4px; }
#dlg-aumento .dlg-botones { margin-top: 20px; }

/* ============================================================
   13. AVISOS (TOAST) Y BLOQUEO
   ============================================================ */
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; justify-items: center; }
.toast {
  padding: 12px 22px; font-weight: 700; color: #fff; background: var(--verde);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); transition: opacity .3s;
}
.toast.warn { background: var(--naranja); }
/* Aviso mostrado dentro de un dialogo modal (fuera del dialogo quedaria tapado) */
dialog > .toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 400; }
.toast.err { background: var(--rojo); }
.toast.saliendo { opacity: 0; }

.bloqueo { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .6); }
.bloqueo-caja { max-width: 460px; text-align: center; background: var(--card); border-radius: 10px; padding: 30px; color: var(--texto); }
.bloqueo-caja p { color: var(--suave); }

/* ============================================================
   14. PIE DE PAGINA (footer del sitio, distinto de .pie-wrap/.pie-svg del grafico de torta)
   ============================================================ */
.pie-footer {
  max-width: 1400px; margin: 30px auto 0; padding: 18px 20px; text-align: center;
  border-top: 1px solid var(--linea); font-size: 13px; color: var(--suave);
}
.pie-footer a { color: var(--suave); text-decoration: none; }
.pie-footer a:hover { color: var(--texto); text-decoration: underline; }
.pie-footer-sep { margin: 0 8px; }

/* ============================================================
   15. MOVIL Y ACCESIBILIDAD
   ============================================================ */
@media (max-width: 900px) {
  .marca, .acciones { flex-wrap: wrap; }
  .acciones { width: 100%; justify-content: flex-start; }
  .ops { grid-template-columns: 1fr; }
  .grid-form, .grid-stock, .grid-mov { grid-template-columns: 1fr; }
  .aum-fila { flex-wrap: wrap; }
  .pie-wrap { justify-content: center; }
  main { padding: 12px; }
  .ticket-fila { grid-template-columns: 1fr auto; }
  .t-cant, .t-sub { text-align: left; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ============================================================
   16. IMPRESION DE TICKET
   ============================================================ */
@media print {
  @page { size: 80mm auto; margin: 0; }
  body > *:not(#ticket-print) { display: none !important; }
  html, body { background: #fff !important; margin: 0; padding: 0; }
  #ticket-print { display: block !important; width: 72mm; margin: 0 auto; padding: 2mm 0; color: #000; background: #fff; font: 12px/1.3 monospace; }
  #ticket-print hr { border: 0; border-top: 1px dashed #000; margin: 4px 0; }
  .tk-centro { text-align: center; }
  .tk-grande { font-size: 15px; font-weight: bold; }
  .tk-fila { display: flex; justify-content: space-between; gap: 6px; }
  .tk-item { margin-bottom: 3px; }
}