/* ==========================================================================
   Don Esquite POS — BASE: reset, tipografía, controles reutilizables
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* la app no hace scroll; hacen scroll los paneles */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

/* Los precios SIEMPRE con cifras de ancho fijo: las columnas no bailan */
.num, .precio, .total {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   SCROLLBARS — estilo iOS: invisibles en reposo, aparecen al usarlas
   --------------------------------------------------------------------------
   Las reglas van sobre `*` a propósito. Si se limitan a una clase, cualquier
   contenedor que se nos escape (un textarea, un <select>, un modal nuevo)
   muestra la barra nativa de Windows, con flechas y carril gris.
   ========================================================================== */

/* --- Firefox --- */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover, .esta-scrolleando { scrollbar-color: var(--scroll-thumb) transparent; }

/* --- Chrome / Edge / WebKit --- */
*::-webkit-scrollbar { width: var(--scroll-size); height: var(--scroll-size); }
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner { background: transparent; }

/* Mata las flechitas ▲▼ de Windows */
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

*::-webkit-scrollbar-thumb {
  background-color: transparent;                    /* en reposo: no se ve */
  border: var(--scroll-inset) solid transparent;    /* deja aire a los lados */
  border-radius: var(--r-full);
  background-clip: content-box;
  transition: background-color var(--t-normal) var(--ease-out);
}

/* Aparece al entrar el mouse al contenedor o mientras se está scrolleando
   (esto último es lo que la hace visible en pantalla táctil) */
*:hover::-webkit-scrollbar-thumb,
.esta-scrolleando::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); }
*::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }

/* --- Contenedores con scroll --- */
.scroll-y {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;      /* el contenido no salta cuando aparece la barra */
}

/* Degradado en los bordes: el contenido se desvanece en vez de cortarse en
   seco, y de paso avisa que hay más para ver. `data-borde` lo pone vigilarScroll(). */
.scroll-y[data-borde="abajo"] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--scroll-fade)), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--scroll-fade)), transparent 100%);
}
.scroll-y[data-borde="arriba"] {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade));
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade));
}
.scroll-y[data-borde="ambos"] {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade),
                                      #000 calc(100% - var(--scroll-fade)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade),
                                      #000 calc(100% - var(--scroll-fade)), transparent 100%);
}

/* ---------- Accesibilidad ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px;                       /* touch target Apple HIG */
  padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--lg svg { width: 21px; height: 21px; }
.btn--sm svg { width: 15px; height: 15px; }

.btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-brand); }
.btn--primary:hover:not(:disabled) { background: var(--brand-hover); }
.btn--primary:active:not(:disabled) { background: var(--brand-press); }

.btn--soft { background: var(--surface-2); color: var(--text-primary); }
.btn--soft:hover:not(:disabled) { background: var(--surface-3); }

.btn--brandsoft { background: var(--brand-soft); color: var(--brand-text); }
.btn--brandsoft:hover:not(:disabled) { filter: brightness(0.97); }

.btn--danger { background: var(--error-soft); color: var(--error); }
.btn--danger:hover:not(:disabled) { background: var(--error); color: #fff; }

/* Acción destructiva confirmada: rojo sólido, mismo peso visual que el primario */
.btn--peligro { background: var(--error); color: #fff; box-shadow: 0 8px 22px rgba(235, 77, 61, 0.34); }
.btn--peligro:hover:not(:disabled) { filter: brightness(0.93); }
.btn--peligro:active:not(:disabled) { filter: brightness(0.86); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text-primary); }

.btn--block { width: 100%; }
.btn--lg { min-height: 54px; font-size: var(--text-lg); border-radius: var(--r-md); }
.btn--sm { min-height: 34px; padding: 0 var(--s-3); font-size: var(--text-sm); border-radius: var(--r-xs); }

/* Botón circular de icono */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-full);
  color: var(--text-secondary);
  background: transparent;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn--danger { background: var(--error-soft); color: var(--error); }
.icon-btn--danger:hover { background: var(--error); color: #fff; }
.icon-btn svg { width: 19px; height: 19px; }

/* ==========================================================================
   CAMPOS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.input {
  width: 100%;
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-primary);
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  background: var(--surface-1);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px hsl(var(--hue-brand) var(--sat-brand) 67% / 0.16);
}
textarea.input { min-height: 96px; resize: none; line-height: var(--leading-normal); }

/* Sin flechitas nativas en ningún input numérico: en todo el sistema ya hay
   botones propios de +/- al lado (stepper, numpad, contar y recibir), así
   que el control del navegador queda duplicado y desentona con el diseño. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Buscador con lupa */
.search { position: relative; display: flex; align-items: center; }
.search svg {
  position: absolute; left: var(--s-3);
  width: 17px; height: 17px;
  color: var(--text-faint);
  pointer-events: none;
}
.search .input { padding-left: 38px; min-height: 40px; border-radius: var(--r-full); }

/* ==========================================================================
   SEGMENTED CONTROL (iOS)
   ========================================================================== */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--r-full);
}
.segmented button {
  flex: 1;
  min-height: 34px;
  padding: 0 var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--t-fast) var(--ease-out);
}
.segmented button:hover { color: var(--text-primary); }
.segmented button[aria-selected="true"] {
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--sh-sm);
}

/* ==========================================================================
   PÍLDORAS / BADGES
   ========================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pill--brand   { background: var(--brand-soft); color: var(--brand-text); }
.pill--success { background: var(--success-soft); color: var(--success); }
.pill--warning { background: var(--warning-soft); color: var(--warning); }
.pill--error   { background: var(--error-soft); color: var(--error); }
.pill--muted   { background: var(--surface-2); color: var(--text-muted); }
.pill .dot { width: 7px; height: 7px; border-radius: var(--r-full); background: currentColor; }

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp  { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
/* Entrada para filas dentro de un contenedor con scroll: solo achica y
   desvanece. Nada de translate hacia la derecha, porque el navegador cuenta
   ese desplazamiento como área desbordada y deja el contenedor scrolleable
   de costado para siempre. */
@keyframes entraFila { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulseSoft{ 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}

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

/* ==========================================================================
   CAMPANA DE AVISOS
   ========================================================================== */
.campana { position: relative; display: inline-flex; }

/* El contador es lo único que hace que alguien abra el panel: va encima del
   icono, no al lado, para que se vea de reojo sin buscarlo. */
.campana__cuenta {
  position: absolute; top: -2px; right: -2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-full, 999px);
  background: var(--error); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  pointer-events: none;
}

.campana__panel {
  position: absolute; top: calc(100% + var(--s-2)); right: 0;
  width: min(360px, calc(100vw - var(--s-4) * 2));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta, 0 12px 40px rgba(0,0,0,.18));
  z-index: 950;
}

.campana__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0;
  background: var(--surface-1);
}
.campana__head b { font-size: var(--text-sm); }

.aviso {
  display: flex; gap: var(--s-3);
  padding: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  color: inherit;
}
.aviso:last-child { border-bottom: 0; }
.aviso:hover { background: var(--surface-2); }

/* Leído = apagado, no escondido: sigue estando por si hay que volver a verlo. */
.aviso--leida { opacity: .5; }

.aviso__ico { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.aviso__ico svg { width: 20px; height: 20px; }
.aviso--error   .aviso__ico { color: var(--error); }
.aviso--warning .aviso__ico { color: var(--warning); }

.aviso__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aviso__titulo  { font-size: var(--text-sm); font-weight: 700; }
.aviso__mensaje { font-size: var(--text-xs); color: var(--text-muted); }

/* La foto del comprobante: entra completa, sin recortar y sin desbordar. */
.comprobante__foto {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

/* Historial: una venta anterior a que existieran los puntos de venta. */
.fila--sinpunto td { opacity: .75; }

/* Dos aparatos generaron el mismo folio el mismo día (correlativo local).
   Se marca para que nadie use ese número como referencia única. */
.marca-repetido {
  margin-left: 6px; padding: 1px 6px;
  border-radius: var(--r-full, 999px);
  background: var(--warning-soft); color: var(--warning);
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; cursor: help;
}

/* ==========================================================================
   HISTORIAL — selector de punto y maquetación
   ========================================================================== */

/* Se ve como un campo, pero es un botón: abre una lista propia. El <select>
   nativo abre el menú gris de Android, que no se puede agrupar ni estilar ni
   llevar un segundo renglón debajo del nombre —la fecha de la feria, para
   distinguir tres "Atento Zona 10"—. Lo usan el filtro de punto del Historial
   y la lista de personas del acceso con PIN. */
.input--selector {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  text-align: left;
  cursor: pointer;
}
.input--selector svg { width: 16px; height: 16px; flex: none; opacity: .6; }
.input--selector span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lista-opciones { display: flex; flex-direction: column; }

/* La línea divisoria que separa bodega, kioscos y eventos. */
.lista-opciones__titulo {
  padding: var(--s-3) 0 var(--s-2);
  margin-top: var(--s-2);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lista-opciones__titulo:first-child { border-top: 0; margin-top: 0; }

.opcion-lista {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: 0; border-radius: var(--r-md);
  background: none; color: inherit;
  text-align: left; cursor: pointer;
  min-height: 48px;              /* se toca con el dedo, no con el mouse */
}
.opcion-lista:hover { background: var(--surface-2); }
.opcion-lista--activa { background: var(--brand-soft); color: var(--brand); }

.opcion-lista__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion-lista__nombre { font-size: var(--text-sm); font-weight: 600; }
/* Tres ferias que se llaman igual solo se distinguen por la fecha. */
.opcion-lista__fecha { font-size: var(--text-xs); color: var(--text-muted); }
.opcion-lista--activa .opcion-lista__fecha { color: inherit; opacity: .75; }

.opcion-lista__marca { opacity: 0; flex: none; }
.opcion-lista__marca svg { width: 18px; height: 18px; }
.opcion-lista--activa .opcion-lista__marca { opacity: 1; }

/* Aire entre los filtros y las cifras: iban pegadas al borde de arriba. */
#resumenHistorial { padding-top: var(--s-3) !important; }

@media (max-width: 900px) {
  /* EL PANEL ENTERO ES EL QUE SE DESPLAZA, no solo la tabla.
     `.panel` tiene overflow:hidden y en el celular la cabecera con los cuatro
     filtros se comía todo el alto, así que a la tabla le quedaban cero
     píxeles: las ventas estaban ahí y no había forma de bajar hasta ellas. */
  #vistaHistorial .panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #vistaHistorial #tablaHistorial {
    overflow: visible;
    -webkit-mask-image: none;      /* el degradado del scroll acá sobra */
  }
  /* Los filtros se apilan y dejan de pelear por el ancho. */
  #filtrosHistorial { flex-direction: column; align-items: stretch; }
  #filtrosHistorial .metodos { flex-direction: row; }
}

/* ==========================================================================
   HISTORIAL EN EL CELULAR — cada venta como tarjeta
   --------------------------------------------------------------------------
   Seis columnas en 390px dejaban cada celda partida en tres renglones: el
   nombre del cajero ocupaba más alto que el resto de la fila junta y no se
   entendía nada. Acá la fila deja de ser fila y se arma como tarjeta:

       BP-270926-1                Q 25.00
       27/09/2026, 02:24 a. m. · efectivo
       Bodega Principal · Emilio Agustín
   ========================================================================== */
@media (max-width: 720px) {
  #tablaHistorial table { display: block; }
  #tablaHistorial thead { display: none; }   /* los encabezados sobran acá */
  #tablaHistorial tbody { display: flex; flex-direction: column; gap: var(--s-2); }

  #tablaHistorial tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--s-2);
    padding: var(--s-3);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
  }

  #tablaHistorial td {
    border: 0; padding: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  /* Primera línea: el ticket manda, el total a la derecha. */
  #tablaHistorial td[data-col="ticket"] {
    grid-column: 1; grid-row: 1;
    font-size: var(--text-sm); font-weight: 700;
    color: var(--text-primary);
  }
  #tablaHistorial td[data-col="total"] {
    grid-column: 2; grid-row: 1 / span 3;
    align-self: center;
    font-size: var(--text-md); font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
  }

  /* Segunda: cuándo y cómo se pagó. Tercera: dónde y quién. */
  #tablaHistorial td[data-col="fecha"]  { grid-column: 1; grid-row: 2; }
  #tablaHistorial td[data-col="metodo"] { grid-column: 1; grid-row: 2; justify-self: end; }
  #tablaHistorial td[data-col="punto"]  { grid-column: 1; grid-row: 3; }
  #tablaHistorial td[data-col="cajero"] { grid-column: 1; grid-row: 4; }

  /* El separador entre fecha y método, sin meter un elemento de más. */
  #tablaHistorial td[data-col="metodo"]::before { content: "· "; }
  #tablaHistorial td[data-col="cajero"]::before { content: ""; }
}

/* En el celular el título "Historial" quedaba a la izquierda de los filtros,
   centrado en vertical y encimado con las etiquetas. Que ocupe su renglón. */
@media (max-width: 720px) {
  #vistaHistorial .productos__head { flex-direction: column; align-items: stretch; }
  #vistaHistorial .productos__titulo { margin-bottom: var(--s-2); }
}