/* Sistema de diseño compartido por el POS, el panel y la tienda.
   Pensado para un mostrador: pantalla táctil, luz de local, manos ocupadas.
   Números en tabular-nums para que las columnas de precios no bailen. */

/* El [hidden] del navegador vive en la hoja del user-agent, y esa hoja pierde
   siempre contra cualquier regla de autor que fije "display" en el mismo
   elemento — no importa el orden ni la especificidad normal, es así como
   funciona el origen de las hojas de estilo en CSS. Acá hay bastantes clases
   con "display" propio (.app, .capa, .marca-via, .barra-carrito, .fila...), y
   cada una de ellas podía dejar un elemento visible aunque el JS pusiera
   `hidden = true` de forma perfecta. Pasó con el panel entero de "app" —
   quedaba armado detrás del modal de login antes de iniciar sesión— y con el
   cartel de "sin conexión" en el ticket. La única forma de que [hidden] gane
   siempre, sea cual sea la regla que compita, es esta: una regla de autor
   propia, con `!important` porque acá el objetivo es exactamente pisar
   cualquier otra cosa que el elemento tenga puesta.
   Si mañana se agrega una clase nueva con "display" sobre un elemento que
   también usa [hidden], esta regla ya lo cubre — no hace falta acordarse de
   repetir el parche cada vez. */
[hidden] { display: none !important; }

:root {
  --grafito: #1c1b19;
  --grafito-2: #2a2825;
  --grafito-3: #38352f;
  --hueso: #f7f3ec;
  --hueso-2: #ede7da;
  --sangre: #8b2e23;
  --sangre-2: #a7382b;
  --monte: #3f6b4c;
  --monte-2: #4f8460;
  --mostaza: #c9a227;
  --piedra: #6b6560;
  --piedra-2: #9a938c;
  --borde: #dcd3c2;

  --radio: 10px;
  --radio-lg: 14px;
  --sombra: 0 6px 18px rgba(28, 27, 25, 0.09);
  --sombra-alta: 0 18px 44px rgba(28, 27, 25, 0.26);

  --titulo: 'Oswald', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
  --texto: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--texto);
  background: var(--hueso);
  color: var(--grafito);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .titulo {
  font-family: var(--titulo);
  font-weight: 600;
  letter-spacing: 0.4px;
  margin: 0;
}

.num { font-variant-numeric: tabular-nums; }

/* --- Franja de estado: se ve sin buscarla ------------------------------- */

.franja-estado {
  height: 6px;
  width: 100%;
  background: var(--monte);
  transition: background 0.3s;
  flex: 0 0 auto;
}
.franja-estado.offline { background: var(--mostaza); }
.franja-estado.sincronizando {
  background: linear-gradient(90deg, var(--mostaza), var(--monte), var(--mostaza));
  background-size: 200% 100%;
  animation: correr 1.2s linear infinite;
}
@keyframes correr { to { background-position: -200% 0; } }

/* --- Chrome ------------------------------------------------------------- */

.barra {
  background: var(--grafito);
  color: var(--hueso);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
}
.marca {
  font-family: var(--titulo);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.marca span { color: var(--sangre-2); }

/* El isologo ya dice "Tienda Rural": al lado va solo el nombre de la pantalla.
   El archivo es un PNG cuadrado de fondo negro; el recorte circular lo deja
   prolijo también sobre el fondo hueso de la portada. */
.logo { display: block; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.logo-chico { width: 38px; height: 38px; }
.logo-medio { width: 84px; height: 84px; }
.logo-grande { width: 128px; height: 128px; }

a.marca { text-decoration: none; color: inherit; }
a.marca:hover .logo { transform: rotate(-6deg); }
.logo { transition: transform 0.2s ease; }

.barra-info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--piedra-2);
}
.punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--monte); display: inline-block; margin-right: 6px;
}
.punto.offline { background: var(--mostaza); }

/* --- Botones ------------------------------------------------------------ */

button, .btn {
  font-family: var(--texto);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--radio);
  padding: 11px 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primario { background: var(--sangre); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--sangre-2); }

.btn-secundario { background: var(--hueso-2); color: var(--grafito); }
.btn-secundario:hover:not(:disabled) { background: #e2d9c8; }

.btn-fantasma {
  background: transparent;
  color: inherit;
  border: 1px solid var(--borde);
}
.btn-oscuro {
  background: transparent;
  color: var(--hueso);
  border: 1px solid var(--grafito-3);
}
.btn-oscuro:hover:not(:disabled) { border-color: var(--sangre-2); }
.btn-oscuro.activo { background: var(--sangre); border-color: var(--sangre); }

.btn-grande {
  width: 100%;
  padding: 15px;
  font-family: var(--titulo);
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- Campos ------------------------------------------------------------- */

input, select, textarea {
  font-family: var(--texto);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  color: var(--grafito);
  width: 100%;
}
/* El "width: 100%" de arriba es para inputs de texto, no para checkboxes: un
   checkbox dentro de un <label> flex terminaba con una caja de casi el ancho
   entero del label (invisible, pero real para el layout), empujando el texto
   bien lejos del cuadradito. Pasó en varios lugares sueltos, cada uno con su
   propio "width:auto;" a mano — acá queda arreglado una sola vez para todos,
   los de hoy y los que se agreguen. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  flex: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sangre);
}
label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--piedra);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}
.campo { margin-bottom: 14px; }

/* Selector buscable compartido. El <select> original queda dentro y conserva
   el valor que leen los modulos; esta capa solo mejora la interaccion. */
.selector-busqueda { position: relative; width: 100%; min-width: 180px; }
.selector-busqueda-entrada { padding-right: 34px; }
.selector-busqueda-entrada::-webkit-search-cancel-button { cursor: pointer; }
.selector-busqueda-original {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.selector-busqueda-lista {
  position: absolute;
  z-index: 65;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  min-width: min(360px, calc(100vw - 32px));
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.selector-busqueda-opcion {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 7px;
  background: transparent;
  color: var(--grafito);
  text-align: left;
  font-weight: 500;
}
.selector-busqueda-opcion:hover,
.selector-busqueda-opcion.activo { background: var(--hueso-2); }
.selector-busqueda-opcion.elegido { color: var(--sangre); font-weight: 700; }
.selector-busqueda-opcion small {
  color: var(--piedra);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.selector-busqueda-marca { color: var(--sangre); text-align: center; }
.selector-busqueda-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-busqueda-vacio { padding: 18px 12px; color: var(--piedra); font-size: 13px; text-align: center; }
.selector-busqueda-resumen {
  margin-top: 5px;
  color: var(--piedra);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .selector-busqueda-lista { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; max-height: 46vh; }
  .selector-busqueda-opcion small { display: none; }
}

/* Fecha mal escrita: se marca al salir del campo, no mientras se tipea. */
input.campo-mal { border-color: var(--sangre); background: #fdf4f2; }

/* --- Campo de fecha con calendario propio ------------------------------- */

.campo-fecha { position: relative; }
.campo-fecha input { padding-right: 38px; width: 100%; }

.abre-calendario {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px;
  color: var(--piedra);
  display: flex;
  border-radius: 6px;
}
.abre-calendario:hover { color: var(--sangre); background: var(--hueso-2); }

.calendario {
  position: fixed;
  z-index: 3000;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
  padding: 12px;
  width: 268px;
}

.cal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--titulo);
  font-size: 15px;
}
.cal-mover {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
  color: var(--piedra);
}
.cal-mover:hover { background: var(--hueso-2); color: var(--grafito); }

.cal-semana, .cal-grilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-semana span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--piedra-2);
  padding: 4px 0;
}
.cal-dia {
  padding: 7px 0;
  border-radius: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.cal-dia:hover { background: var(--hueso-2); }
/* El día de hoy se marca con el borde; el elegido, con relleno. */
.cal-dia.hoy { box-shadow: inset 0 0 0 1px var(--piedra-2); }
.cal-dia.elegido { background: var(--sangre); color: #fff; font-weight: 700; }

.cal-pie {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
}
.cal-pie button { font-size: 12px; font-weight: 600; color: var(--sangre); }
.cal-pie .cal-limpiar { color: var(--piedra); }

/* --- Tarjetas y tablas -------------------------------------------------- */

.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 18px;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--piedra);
  padding: 8px 10px;
  border-bottom: 2px solid var(--borde);
  white-space: nowrap;
}
td { padding: 10px; border-bottom: 1px solid var(--hueso-2); }
tbody tr:hover { background: #fbf9f5; }
.der { text-align: right; }

/* --- Etiquetas de estado ------------------------------------------------ */

.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--hueso-2);
  color: var(--grafito);
  white-space: nowrap;
}
.chip.ok { background: #dcebe1; color: #2c5138; }
.chip.alerta { background: #f6ecc8; color: #6c5510; }
.chip.peligro { background: #f3dbd8; color: #7a2419; }
.chip.info { background: #dde5ee; color: #2c4664; }

/* --- Bloque de advertencia dentro de un panel --------------------------- */

.aviso-alerta {
  background: #fff6dd;
  border-left: 4px solid var(--mostaza);
  padding: 12px 14px;
  border-radius: var(--radio);
  font-size: 13px;
  line-height: 1.55;
}

/* --- Ayuda contextual --------------------------------------------------- */

/* Botón flotante: chico y discreto, pero siempre en el mismo lugar. Que esté
   siempre ahí es la mitad del valor — nadie busca ayuda si tiene que buscarla. */
.ayuda-boton {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--grafito);
  color: var(--hueso);
  font-family: var(--titulo);
  font-size: 21px;
  font-weight: 700;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 4px 14px rgba(28, 27, 25, 0.28);
  transition: transform 0.15s, background 0.15s;
}
.ayuda-boton:hover { background: var(--sangre); transform: scale(1.06); }

.ayuda-fondo {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 25, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 70;
}
.ayuda-fondo.visible { opacity: 1; pointer-events: auto; }

.ayuda-cajon {
  position: fixed;
  top: 0;
  right: 0;
  width: min(430px, 100vw);
  height: 100vh;
  background: var(--hueso);
  display: flex;
  flex-direction: column;
  z-index: 80;
  /* Fuera de pantalla hasta que se pide: entra deslizando desde el costado
     para que se entienda que es un panel lateral y no otra pantalla. */
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
  box-shadow: -8px 0 30px rgba(28, 27, 25, 0.22);
}
.ayuda-cajon.visible { transform: translateX(0); }

.ayuda-cab {
  background: var(--grafito);
  color: var(--hueso);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex: 0 0 auto;
}
.ayuda-cab h2 { font-size: 20px; margin: 0; }
.ayuda-cab p { margin: 4px 0 0; font-size: 13px; color: var(--piedra-2); }
.ayuda-cerrar {
  background: none;
  border: none;
  color: var(--piedra-2);
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 6px;
}
.ayuda-cerrar:hover { color: var(--hueso); }

.ayuda-cuerpo { flex: 1; overflow-y: auto; padding: 18px 20px 24px; }

.ayuda-h3 {
  font-family: var(--titulo);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--piedra);
  margin: 20px 0 8px;
}
.ayuda-cuerpo > .ayuda-h3:first-child { margin-top: 0; }
.ayuda-h3.ojo { color: var(--sangre); }

.ayuda-lista { margin: 0; padding-left: 20px; }
.ayuda-lista li { font-size: 13.5px; line-height: 1.6; margin-bottom: 9px; }
.ayuda-lista code {
  background: var(--hueso-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

.ayuda-atajos { width: 100%; border-collapse: collapse; }
.ayuda-atajos td { padding: 5px 0; font-size: 13.5px; vertical-align: top; }
.ayuda-atajos td:first-child { width: 74px; }

kbd {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 8px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
}

.ayuda-pie {
  flex: 0 0 auto;
  padding: 12px 20px;
  border-top: 1px solid var(--borde);
  font-size: 12px;
  color: var(--piedra);
  background: var(--hueso-2);
}

@media (max-width: 560px) {
  .ayuda-boton { right: 12px; bottom: 76px; }
}

/* --- Sello de peso: feedback físico de una acción física ---------------- */

.sello { display: inline-block; animation: sellar 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes sellar {
  0%   { transform: scale(2.2) rotate(-6deg); opacity: 0; filter: blur(2px); }
  60%  { transform: scale(0.95) rotate(1deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0); }
}

/* --- Modal -------------------------------------------------------------- */

.fondo-modal {
  position: fixed; inset: 0;
  background: rgba(28, 27, 25, 0.58);
  display: none; align-items: center; justify-content: center;
  z-index: 60; padding: 16px;
}
.fondo-modal.visible { display: flex; }
.modal {
  background: var(--hueso);
  border-radius: var(--radio-lg);
  padding: 24px;
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--sombra-alta);
}
.modal-ancho { width: min(860px, 100%); }

/* --- Estado de la cuenta (cobranza) --------------------------------------- */

/* Vacío y sin clase por default: no ocupa lugar mientras la cuenta está al
   día. En flujo normal, no position:fixed — a propósito, para no taparle
   nada a nadie: cuando aparece, empuja el resto de la página hacia abajo. */
#avisoCuenta {
  display: none;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: var(--mostaza);
  color: var(--grafito);
}
#avisoCuenta.visible { display: block; }
/* Solo lectura o suspendido: más urgente que "en gracia", mismo lenguaje de
   color que ya usan los avisos (rojo = requiere atención ya). */
#avisoCuenta.critico { background: var(--sangre-2); color: var(--hueso); }

/* --- Avisos ------------------------------------------------------------- */

#avisos {
  position: fixed; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 90; max-width: min(400px, calc(100vw - 32px));
}
/* El tipo del aviso (avisar(msg, tipo)) es la única pista de si algo salió
   bien o mal, y un borde de 4px contra un fondo oscuro casi no se distingue
   a la distancia de un mostrador. Todo el cartelito lleva el color: verde
   éxito, rojo error, mostaza alerta — de un vistazo, sin tener que leer el
   texto primero. Es un solo componente compartido por las tres apps, así
   que el cambio vale para cualquier flujo que use avisar(), no solo este. */
.aviso {
  background: var(--monte);
  color: var(--hueso);
  padding: 12px 16px;
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  font-size: 14px;
  font-weight: 600;
  animation: entrar 0.2s ease-out;
}
.aviso.error { background: var(--sangre-2); }
.aviso.alerta { background: var(--mostaza); color: var(--grafito); }
@keyframes entrar { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.vacio {
  padding: 40px 20px;
  text-align: center;
  color: var(--piedra);
  font-size: 14px;
}

.cargando::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--borde);
  border-top-color: var(--sangre);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes girar { to { transform: rotate(360deg); } }