/* ============================================================
   estilos.css — Cómo se ve la app.
   Está pensado primero para celular; al final hay un bloque
   que ajusta el diseño en pantallas más anchas.

   Para cambiar los colores de toda la app basta con cambiar
   los valores de :root aquí abajo.
   ============================================================ */

:root {
  --fondo: #f6f2f5;
  --tarjeta: #ffffff;
  --texto: #1f1b2e;
  --texto-suave: #6e6a80;
  --borde: #ecdfe8;
  --principal: #8c3a93;
  --principal-oscuro: #6a2b74;
  --principal-claro: #f3e3f1;
  --acento: #e7a97c;
  --peligro: #c0362c;
  --sombra: 0 1px 2px rgba(31, 15, 28, 0.06), 0 6px 20px rgba(31, 15, 28, 0.08);
  --radio: 16px;
  /* El morado casi negro del logo oficial: para el encabezado y, en
     compu, la barra de menú lateral. */
  --marca-oscuro: #1f0f1c;
  --marca-oscuro-borde: #3a2535;
}

* { box-sizing: border-box; }

/* Lo que tiene el atributo "hidden" nunca se muestra */
[hidden] { display: none !important; }

html {
  /* Sin esto, Safari en iPhone a veces agranda el texto solo (por
     ejemplo al girar la pantalla), y se siente como si la página
     "brincara" de tamaño sin que tú tocaras nada. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--texto);
  background: var(--fondo);
  padding-bottom: 84px; /* espacio para el menú fijo de abajo */
}
/* Evita el doble-toque-para-hacer-zoom de Safari: sin esto, un toque
   un poco rápido en un botón puede confundirse con un doble toque y
   la pantalla se agranda sola (lo que se sentía al "seleccionar
   cualquier opción" en iPhone). */
button, a, .boton, input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}

h2, h3, p { margin: 0; }

/* ---------- Marca (arriba) ---------- */

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--marca-oscuro);
}
.marca-imagen { height: 40px; width: auto; border-radius: 8px; display: block; }
.marca-icono { height: 38px; width: 38px; border-radius: 9px; display: block; flex: none; }
.marca-texto {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: white;
}
.marca-texto small {
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: normal;
  color: var(--acento);
  margin-left: 2px;
}
.marca #cerrar-sesion {
  color: #ead9e6;
}
.marca #cerrar-sesion:hover { background: rgba(255, 255, 255, 0.12); }

.marca .campanita {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  color: #ead9e6;
  padding: 8px;
}
.marca .campanita svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marca .campanita:hover { background: rgba(255, 255, 255, 0.12); }

.marca .boton-engrane {
  display: flex;
  align-items: center;
  color: #ead9e6;
  padding: 8px;
}
.marca .boton-engrane svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marca .boton-engrane:hover { background: rgba(255, 255, 255, 0.12); }
.campanita-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--peligro);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ---------- Pantalla de acceso (iniciar sesión / crear cuenta) ---------- */

.pantalla-acceso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.acceso-tarjeta {
  width: 100%;
  max-width: 380px;
  background: var(--tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 28px 24px;
  text-align: center;
}
.acceso-imagen { height: 76px; width: auto; margin: 0 auto 16px; border-radius: 14px; display: block; }
.acceso-tarjeta h2 { font-size: 1rem; font-weight: 500; color: var(--texto-suave); margin-bottom: 18px; }
.acceso-tarjeta form { text-align: left; }
.acceso-tarjeta button[type="submit"] { width: 100%; margin-top: 4px; }
.acceso-tarjeta #cambiar-modo { margin-top: 14px; }
.acceso-mostrar {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 400 !important;
  color: var(--texto-suave) !important;
  margin: 8px 0 16px;
}
.acceso-mostrar input { width: auto; min-height: auto; }

/* El navegador (Edge, sobre todo) a veces pone su propio "ojito" para
   mostrar la contraseña dentro del campo. Ya tenemos el nuestro
   (la casilla "Mostrar contraseña"), así que se quita el del navegador
   para no tener dos controles haciendo lo mismo. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
.acceso-tarjeta #olvide-contrasena { display: block; margin: 0 0 14px; padding: 0; }
.acceso-tarjeta #volver-a-entrar { margin-top: 14px; }

/* ---------- Menú (abajo en celular) ---------- */

.menu {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--tarjeta);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
  overflow-x: auto; /* son muchas pestañas: en celular se deslizan con el dedo */
  scrollbar-width: none;
}
/* Franjas que se desvanecen a cada lado del menú, con una flechita,
   para que se note que hay más pestañas si deslizas -- se muestran y
   esconden solas según hacia dónde todavía puedas deslizar (ver
   app.js). En compu el menú ya no se desliza (es una barra lateral
   completa), así que aquí no aparecen. */
.menu-desvanecido {
  position: absolute;
  top: 0;
  bottom: env(safe-area-inset-bottom);
  width: 30px;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 1;
}
.menu-desvanecido.visible { opacity: 1; }
.menu-desvanecido-izq {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(to right, var(--tarjeta) 45%, transparent);
}
.menu-desvanecido-der {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(to left, var(--tarjeta) 45%, transparent);
}
.menu-desvanecido svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--texto-suave);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu button {
  flex: 1 0 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px;
  min-height: 60px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--texto-suave);
  font-size: 0.72rem;
  font-weight: 600;
}
.menu svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu button.activo { color: var(--principal); }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 16px 16px;
}

.titulo-pantalla {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.titulo-pantalla h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
.fecha-venta { color: var(--texto-suave); font-size: 0.9rem; white-space: nowrap; }

/* Encabezado de Inicio: el nombre del negocio con su lápiz de editar
   junto al título, y el correo de quien entró abajo, para que no se
   amontone en pantallas angostas. */
.cabecera-negocio { margin-bottom: 16px; }
.cabecera-negocio-titulo { display: flex; align-items: center; gap: 8px; }
.cabecera-negocio-titulo h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
.cabecera-negocio .detalle { display: block; margin-top: 4px; }

button.icono {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  flex: none;
  border-radius: 50%;
  background: var(--principal-claro);
  color: var(--principal-oscuro);
  border: none;
  font-size: 1rem;
}
button.icono:hover { background: var(--principal); color: white; }

/* ---------- Botones y campos ---------- */

button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 9px 16px;
  min-height: 44px; /* tamaño cómodo para tocar con el dedo */
  border: 1px solid var(--principal);
  border-radius: 12px;
  background: var(--principal);
  color: white;
  cursor: pointer;
  white-space: nowrap;
}
button:hover, .boton:hover { background: var(--principal-oscuro); }
button.secundario, .boton.secundario { background: white; color: var(--principal); border-color: var(--borde); }
button.secundario:hover, .boton.secundario:hover { background: var(--principal-claro); }
button.peligro { background: white; color: var(--peligro); border-color: var(--borde); }
button.peligro:hover { background: #fdeeed; }
button.texto { background: none; border-color: transparent; color: var(--principal); padding: 9px 8px; }
button.texto:hover { background: var(--principal-claro); }
button.texto.peligro { color: var(--peligro); }
button:disabled { opacity: 0.4; cursor: default; }
.menu button:hover { background: none; }

input, select {
  font: inherit;
  /* 16px a propósito: si queda más chico, Safari en iPhone hace zoom
     solo al tocar el campo (y luego regresa de golpe al salir) -- eso
     es el "se hace más grande y luego más chico" al seleccionar algo. */
  font-size: 16px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: white;
  color: var(--texto);
  touch-action: manipulation;
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--principal);
  outline-offset: 1px;
}
input[readonly] { background: var(--fondo); }

.barra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* ---------- Tarjetas ---------- */

.tarjeta, .panel, .cifra {
  background: var(--tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tarjeta {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}
.rejilla { display: grid; gap: 12px; }
.rejilla .tarjeta { margin-bottom: 0; }

.tarjeta-info { display: flex; flex-direction: column; gap: 3px; }
.tarjeta-acciones { display: flex; gap: 8px; margin-top: auto; }
.tarjeta-acciones button { flex: 1; padding-left: 8px; padding-right: 8px; }

.detalle, .conteo, .ayuda { color: var(--texto-suave); font-size: 0.88rem; }
.conteo { margin: 12px 0 8px; }
.ayuda { margin-top: 8px; }
.vacio { color: var(--texto-suave); text-align: center; padding: 28px 16px; }
.error { color: var(--peligro); font-size: 0.9rem; min-height: 1.3em; margin: 4px 0; }
.error.aviso { color: #1a7a3c; }

/* ---------- Producto ---------- */

.producto-cabeza { display: flex; gap: 12px; align-items: center; }
.producto-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.producto-datos strong { overflow-wrap: anywhere; }
.existencia { font-weight: 700; color: var(--principal); font-size: 0.92rem; }

.foto {
  flex: none;
  width: 68px; height: 68px;
  border-radius: 14px;
  background: var(--principal-claro);
  color: var(--principal);
  font-size: 1.5rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-grande { width: 96px; height: 96px; font-size: 0.8rem; font-weight: 500; color: var(--texto-suave); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--principal-claro);
  color: var(--principal-oscuro);
  font-size: 0.82rem;
  font-weight: 600;
}
.etiqueta.gris { background: var(--fondo); color: var(--texto-suave); }

.precios {
  display: flex;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}
.precios div { flex: 1; }
.precios dt { color: var(--texto-suave); font-size: 0.75rem; }
.precios dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Inicio: cifras y gráficas ---------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.cifra { padding: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cifra span { color: var(--texto-suave); font-size: 0.82rem; }
.cifra strong { font-size: 1.3rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.panel { padding: 16px; margin-bottom: 14px; }
.panel h3 { font-size: 1rem; margin-bottom: 14px; }
.panel h3 small { font-weight: 400; color: var(--texto-suave); font-size: 0.85rem; margin-left: 4px; }

.barras { display: flex; flex-direction: column; gap: 12px; }
.barra-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nombre valor" "pista pista";
  gap: 5px 12px;
  align-items: baseline;
  font-size: 0.9rem;
}
.barra-nombre { grid-area: nombre; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-valor { grid-area: valor; font-weight: 600; font-variant-numeric: tabular-nums; }
.barra-pista { grid-area: pista; height: 10px; border-radius: 4px; background: var(--fondo); }
.barra-relleno {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--principal);
}
.barra-fila:hover .barra-relleno { background: var(--principal-oscuro); }

/* ---------- Gráficas verticales (Inicio) ---------- */

.barras-v {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.barra-col { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 60px; }
.barra-col-valor {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  margin-bottom: 6px;
  white-space: nowrap;
}
.barra-col-pista {
  width: 30px;
  height: 140px;
  border-radius: 6px 6px 3px 3px;
  background: var(--fondo);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.barra-col-relleno {
  display: block;
  width: 100%;
  min-height: 3px;
  border-radius: 6px 6px 0 0;
  background: var(--principal);
}
.barra-col:hover .barra-col-relleno { background: var(--principal-oscuro); }
.barra-col-nombre {
  margin-top: 6px;
  font-size: 0.78rem;
  text-align: center;
  line-height: 1.2;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 76px;
}

/* ---------- Tabla (historial) ---------- */

.tabla-contenedor { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 10px 8px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--borde); }
th { color: var(--texto-suave); font-weight: 600; font-size: 0.8rem; }
tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.num.negativo { color: var(--peligro); font-weight: 700; }
.num.positivo { color: #1a7a3c; font-weight: 700; }

/* ---------- Ventanas ---------- */

dialog {
  width: min(94vw, 480px);
  max-height: 92vh;
  overflow-y: auto;
  border: none;
  border-radius: 20px;
  padding: 22px;
  color: var(--texto);
  box-shadow: 0 20px 60px rgba(31, 27, 46, 0.3);
}
dialog::backdrop { background: rgba(31, 27, 46, 0.5); }
dialog h2 { margin-bottom: 16px; font-size: 1.2rem; }
dialog form > label, #campos-colectivo label, .formulario > label, .dos-columnas label, .acceso-tarjeta form > label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-suave);
}
label input, label select { margin-top: 4px; font-weight: 400; }
.ganancia { font-weight: 700; color: var(--principal); font-size: 0.95rem; margin-bottom: 4px; }
.ganancia.error { color: var(--peligro); }
.ganancia:empty { display: none; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* flex-wrap: en celular angosto, 3 botones con nombres largos (como
   "Retirar dinero" + "Hacer corte de caja" + "Eliminar caja") no caben
   en una sola línea -- sin esto, el último se salía de la tarjeta en
   vez de pasarse a una segunda línea. */
.botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
#ventana-pregunta h2 { font-size: 1.05rem; line-height: 1.4; }
#ventana-pregunta input { margin-bottom: 12px; }

.campo-foto { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.campo-foto-botones { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

fieldset {
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 10px 12px 12px;
  margin: 4px 0 14px;
}
legend { font-size: 0.85rem; font-weight: 600; color: var(--texto-suave); padding: 0 6px; }
fieldset .ayuda { margin: 0 0 8px; }
.fila-variante { display: flex; gap: 6px; margin-bottom: 6px; }
.fila-variante .v-cantidad { width: 90px; flex: none; }

/* ---------- Venta, traspasos, corte, reportes ---------- */

/* Los dos botones para elegir "Venta de colectivo" o "Entrega personal" */
.selector {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--fondo);
}
.selector button {
  flex: 1;
  background: none;
  border-color: transparent;
  color: var(--texto-suave);
  white-space: normal;
}
.selector button.activo { background: white; color: var(--principal); box-shadow: var(--sombra); }

/* Renglón de producto: el producto arriba, luego cantidad, precio
   y/o código (los que apliquen), y la ✕ al final. */
.linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--borde);
}
.linea .l-producto, .linea .l-codigo { flex: 1 1 100%; }
.linea .l-cantidad, .linea .l-precio { flex: 1 1 110px; }
.linea .l-quitar { flex: 0 0 auto; margin-left: auto; }

.total { text-align: right; font-size: 1.05rem; }
.total strong { font-size: 1.3rem; }

/* ---------- Venta: buscador de productos y carrito ---------- */

.buscador-productos { position: relative; margin-bottom: 4px; }

.resultados-producto {
  position: absolute;
  z-index: 5;
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.resultados-producto .vacio { padding: 10px; margin: 0; text-align: left; }
.resultado-producto {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--texto);
  text-align: left;
  padding: 6px;
  border-radius: 10px;
  min-height: 0;
  font-weight: 400;
}
.resultado-producto:hover { background: var(--principal-claro); }
.resultado-producto .foto { width: 40px; height: 40px; border-radius: 9px; font-size: 1rem; }
.resultado-info { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.resultado-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#carrito-venta { margin: 14px 0; }
.linea-carrito {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--borde);
}
.linea-carrito .foto { width: 52px; height: 52px; border-radius: 11px; font-size: 1rem; }
.linea-carrito-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.linea-carrito-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linea-carrito-controles { display: flex; gap: 6px; }
.linea-carrito-controles input { min-height: 38px; padding: 6px 10px; }
.lc-cantidad { width: 64px; flex: none; }
.lc-precio { width: 90px; flex: none; }
.linea-carrito-total {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.linea-carrito-total span { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linea-carrito-total button { padding: 4px; min-height: 0; }

.renglones { list-style: none; margin: 0; padding: 0; }
.renglones li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}
.renglones li:last-child { border-bottom: none; }
.renglones li > span:first-child { flex: 1 1 140px; min-width: 140px; overflow-wrap: anywhere; }
.renglones .detalle { display: block; }
.renglones li.total { font-weight: 700; text-align: left; }
.renglones li.mejor { color: #1a7a3c; font-weight: 600; }
.renglon-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.renglon-acciones { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-left: auto; }
.renglon-producto { display: flex; align-items: center; gap: 10px; }

.fila-usuario {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--borde);
}
.fila-usuario:last-child { border-bottom: none; }
.fila-usuario-datos { min-width: 0; overflow-wrap: anywhere; }
.fila-usuario-datos strong { display: block; }
.fila-usuario-acciones { display: flex; flex-wrap: wrap; gap: 4px 10px; flex-shrink: 0; }
.renglon-producto .foto { width: 44px; height: 44px; border-radius: 10px; font-size: 1.1rem; }

.filtros { display: grid; gap: 8px; margin-bottom: 14px; }

.navegador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  text-align: center;
}
.navegador .detalle { display: block; }

.cifra.destacada {
  background: linear-gradient(135deg, var(--principal), var(--principal-oscuro));
  color: white;
  padding: 20px;
  margin-bottom: 14px;
}
.cifra.destacada span { color: rgba(255, 255, 255, 0.85); }
.cifra.destacada strong { font-size: 2rem; }

.info-colectivo { margin: -6px 0 14px; }

/* Inventario físico: una fila por producto a contar */
.conteo-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}
.conteo-fila:last-child { border-bottom: none; }
.conteo-fila .renglon-producto { flex: 1 1 100%; }
.conteo-fila .detalle { flex: 1 1 auto; }
.conteo-fila .conteo-cantidad { flex: 0 1 120px; }
.conteo-sorpresa .l-producto { flex: 1 1 100%; }

/* ---------- Marketing: ideas de texto generadas ---------- */
.recomendacion-marketing { align-items: flex-start; }
.recomendacion-marketing > button { align-self: stretch; }
.resultado-recomendacion:empty, #resultado-marketing:empty { display: none; }
.opcion-marketing { margin-bottom: 14px; }
.opcion-marketing:last-child { margin-bottom: 0; }
.texto-generado { white-space: pre-wrap; margin-bottom: 12px; line-height: 1.5; }

/* Código de invitación (ventana de Usuarios) */
.codigo-invitacion {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: center;
  background: var(--principal-claro);
  color: var(--principal-oscuro);
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0;
}

/* Aviso de "hoy toca pagar renta" en Inicio */
.recordatorio {
  background: #fff6e0;
  border: 1px solid #f1d58a;
}
.recordatorio h3 { color: #8a6500; }

/* Comparación de precios: un bloque por producto, con su lista de
   proveedores (reporte de Proveedores). */
.comparacion-producto { margin-bottom: 18px; }
.comparacion-producto:last-child { margin-bottom: 0; }
.comparacion-producto .renglones { margin-top: 6px; }

/* ---------- Comprobante de ingreso ---------- */

.comprobante h2 { font-size: 1.2rem; }
.comprobante .detalle { margin-bottom: 12px; }
tfoot td { font-weight: 700; border-top: 2px solid var(--borde); border-bottom: none; }
.acciones-comprobante { flex-wrap: wrap; }
.acciones-comprobante > * { flex: 1 1 160px; text-decoration: none; }
#ayuda-movimiento { margin: 0 0 12px; }

/* Al imprimir (o guardar como PDF) solo sale el comprobante */
@media print {
  .marca, .menu, .sin-imprimir { display: none !important; }
  body { display: block; background: white; padding: 0; }
  main { padding: 0; }
  .panel { box-shadow: none; }
}

/* Etiqueta de producto (código de barras para pegarle a la mercancía) */
.etiqueta-producto {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  max-width: 260px; margin: 24px auto; padding: 16px;
  border: 1px dashed var(--borde); border-radius: 8px; text-align: center;
}
.etiqueta-producto strong { font-size: 0.95rem; }
.etiqueta-producto span { font-size: 0.85rem; color: var(--texto-suave); }
.etiqueta-precio { font-weight: 700; color: var(--principal); font-size: 1rem; }

/* ---------- Tablet ---------- */

@media (min-width: 640px) {
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .cifras { grid-template-columns: repeat(4, 1fr); }
  .tarjeta.fila { flex-direction: row; align-items: center; justify-content: space-between; }
  .tarjeta.fila .tarjeta-acciones { margin-top: 0; }
  .tarjeta.fila .tarjeta-acciones button { flex: none; padding: 9px 16px; }

  /* Con más espacio, nombre, barra y valor caben en un solo renglón */
  .barra-fila {
    grid-template-columns: 170px 1fr 110px;
    grid-template-areas: "nombre pista valor";
    align-items: center;
  }
  .barra-valor { text-align: right; }

  .filtros { grid-template-columns: 1fr 1fr; }

  /* Con más espacio, el producto y cada campo caben en una sola línea */
  .linea { border-bottom: none; padding-bottom: 0; margin-bottom: 6px; flex-wrap: nowrap; }
  .linea .l-producto { flex: 2 1 200px; }
  .linea .l-cantidad { flex: 0 1 90px; }
  .linea .l-precio, .linea .l-codigo { flex: 1 1 140px; }
}

/* ---------- Computadora: el menú pasa a la izquierda ---------- */

@media (min-width: 960px) {
  /* El acomodo de "menú a la izquierda" es solo para #app-principal:
     la pantalla de acceso (login) no debe acomodarse como rejilla,
     por eso esto ya no vive en "body" sino en #app-principal. */
  #app-principal {
    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }
  .marca { grid-column: 1; padding: 22px 20px 14px; border-right: 1px solid var(--marca-oscuro-borde); flex-wrap: wrap; }
  .marca-imagen { height: 48px; }
  .marca-icono { height: 44px; width: 44px; }
  .marca #cerrar-sesion { flex: 0 0 100%; margin-left: 0; margin-top: 8px; padding-left: 0; }
  .menu {
    grid-column: 1;
    position: static;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 12px;
    background: var(--marca-oscuro);
    border-top: none;
    border-right: 1px solid var(--marca-oscuro-borde);
    color: #cdb9c8;
  }
  /* En compu el menú ya es una barra lateral completa, sin nada
     escondido que deslizar. */
  .menu-desvanecido { display: none; }
  .menu button {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #cdb9c8;
  }
  .menu button:hover { background: rgba(255, 255, 255, 0.08); }
  .menu button.activo, .menu button.activo:hover { background: rgba(255, 255, 255, 0.12); color: var(--acento); }
  main { grid-column: 2; grid-row: 1 / 3; width: 100%; max-width: 1320px; padding: 32px 40px 40px; }

  /* En celular todo va compacto porque sobra poco espacio; aquí, en
     cambio, sí hay lugar de sobra, así que textos, tarjetas y
     botones crecen un poco para que no se vea apretado. */
  .titulo-pantalla h2, .cabecera-negocio-titulo h2 { font-size: 1.85rem; }
  .panel { padding: 24px; margin-bottom: 18px; }
  .panel h3 { font-size: 1.1rem; margin-bottom: 16px; }
  .cifras { gap: 16px; margin-bottom: 18px; }
  .cifra { padding: 20px; }
  .cifra strong { font-size: 1.6rem; }
  .cifra span { font-size: 0.88rem; }
  .tarjeta { padding: 20px; }
  button, .boton { padding: 11px 20px; min-height: 46px; font-size: 0.96rem; }
  input, select { min-height: 46px; padding: 10px 14px; font-size: 1rem; }
  .ayuda, .detalle, .conteo { font-size: 0.92rem; }

  /* Las gráficas de barras verticales tenían poco aire entre
     columnas, y las barras mismas se veían delgadas; aquí sí hay
     ancho de sobra para repartirlas bien y engordarlas. */
  .barras-v { justify-content: space-evenly; gap: 24px; }
  .barra-col { width: 90px; }
  .barra-col-pista { width: 56px; height: 180px; }
}

/* Label + checkbox genérico (ej. "Catálogo prendido"). */
.campo-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 4px 0 16px; }
.campo-checkbox input { width: auto; min-height: auto; }

/* Mientras se confirma una sesión guardada (ver <head> de index.html),
   no se muestra la pantalla de acceso, solo el logo al centro. */
html.revisando-sesion #pantalla-acceso { display: none; }
html.revisando-sesion body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('../img/logo-nedalo.png') center / 96px auto no-repeat;
  opacity: .5;
  animation: latido-sesion 1.2s ease-in-out infinite alternate;
}
@keyframes latido-sesion { from { opacity: .25; } to { opacity: .6; } }

/* ---------- Marcas: tarjetas con logo grande (igual que Productos en Uno) ---------- */

.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) {
  .rejilla-productos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
.tarjeta-producto {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  min-height: 0;
  white-space: normal;
  font-weight: 400;
  padding: 8px 8px 12px;
  background: var(--tarjeta);
  color: var(--texto);
  border: 1px solid transparent;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.tarjeta-producto:hover { background: var(--tarjeta); border-color: var(--principal-claro); transform: translateY(-2px); }
.tarjeta-producto:active { transform: scale(.98); }
.tarjeta-producto:focus-visible { outline: 3px solid var(--principal); outline-offset: 2px; }
.tarjeta-producto-foto .foto {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  font-size: 2.4rem;
}
.tarjeta-producto-nombre {
  padding: 0 4px;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tarjeta-producto-pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 0 4px;
  margin-top: auto;
}
.tarjeta-producto-pie .existencia { font-size: .85rem; }
.tarjeta-producto-precio { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Ventana de un producto o marca: foto grande arriba y botones abajo */
.ventana-ficha h2 { margin: 12px 0 4px; }
.ventana-ficha .existencia, .ventana-ficha .detalle { margin-bottom: 8px; }
.ventana-ficha .etiquetas { margin-bottom: 12px; }
.acciones-producto-foto .foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 46vh;
  border-radius: 14px;
  font-size: 3.5rem;
}
.acciones-producto-foto .foto img { object-fit: contain; background: var(--fondo); }
.acciones-producto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0 4px;
}
.acciones-producto button { width: 100%; min-width: 0; white-space: normal; padding-left: 8px; padding-right: 8px; }
.acciones-producto .acciones-producto-principal { grid-column: 1 / -1; }
.etiqueta-aviso { background: #fbe8d2; color: #8a5a1e; align-self: flex-start; margin: 0 4px; }

/* Pantalla de una marca: logo, datos y todas sus opciones arriba */
.cabeza-marca { display: flex; gap: 16px; align-items: center; margin: 8px 0 14px; }
.cabeza-marca-logo .foto { width: 96px; height: 96px; border-radius: 18px; font-size: 2.4rem; }
.cabeza-marca-datos { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cabeza-marca-datos h2 { margin: 0; overflow-wrap: anywhere; }
.cabeza-marca-datos .ayuda { margin: 0; }
.barra-marca label.boton { cursor: pointer; }
@media (max-width: 639px) {
  .barra-marca { display: grid; grid-template-columns: 1fr 1fr; }
  .barra-marca > :first-child { grid-column: 1 / -1; }
  .barra-marca > * { width: 100%; min-width: 0; white-space: normal; }
}

/* ---------- Super administradora: vista por colectivo ---------- */
.sa-cifras { margin-bottom: 14px; }
@media (min-width: 640px) { .sa-cifras { grid-template-columns: repeat(4, 1fr); } }
#buscar-super-admin { margin-bottom: 12px; }
.sa-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.sa-cabeza h3 { margin: 0 0 2px; font-size: 1.1rem; }
.sa-plan { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sa-plan button.texto { min-height: 36px; padding: 6px 8px; font-size: .85rem; }
.etiqueta-pagado { background: #dff3e6; color: #1a6b38; }
.sa-colectivo h4 {
  margin: 16px 0 6px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}
.sa-usuarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sa-usuarios li { display: flex; flex-direction: column; gap: 1px; padding-left: 10px; border-left: 3px solid var(--principal-claro); }
.sa-correo { font-weight: 600; overflow-wrap: anywhere; }
.sa-emprendedora { padding: 12px; border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 8px; }
.sa-emprendedora .sa-usuarios { margin-top: 8px; }
.sa-codigos summary { cursor: pointer; padding: 2px 0; }
.sa-codigos[open] summary { margin-bottom: 12px; }

/* Logs en el panel de super administradora */
.sa-logs-tipos { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.sa-logs-tipos button.activo { font-weight: 700; text-decoration: underline; }
.sa-logs .detalle small { opacity: .75; overflow-wrap: anywhere; }

/* Casilla de aceptación de Términos y Aviso de privacidad */
.acceso-acepto { align-items: flex-start; }
.acceso-acepto span { font-size: .9rem; line-height: 1.4; }
.ventana-legal { max-width: 440px; }
.ventana-legal .botones { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acceso-acepto a, .legales-acceso a, .ventana-legal a, #panel-cuenta a { color: var(--principal); }
.legales-acceso { text-align: center; font-size: .82rem; margin-top: 10px; }