/* ============================================================
   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; }

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 */
}

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); }
.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; }

/* Label + checkbox genérico para cualquier formulario (ej. "¿lo
   pagaste con dinero de caja?", "marcar como gasto fijo"). */
.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin: 4px 0 16px;
}
.campo-checkbox 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;
}
.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; }

/* 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;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: white;
  color: var(--texto);
}
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; }

.aviso-duplicados { background: #fff8e8; border: 1px solid #e8b84b; }
.aviso-duplicados h3 { margin-bottom: 10px; }
.aviso-duplicados p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }

.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 {
  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; }
.botones { display: flex; 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;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}
.renglones li:last-child { border-bottom: none; }
.renglones li > span:first-child { flex: 1; min-width: 0; 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; }
.renglon-producto { display: flex; align-items: center; gap: 10px; }
.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; }
}

/* ---------- 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;
  }
  .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; }
}