* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f4f5f7;
  color: #1c1e21;
}
.barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #1c1e21;
  color: #fff;
}
.barra .marca { font-weight: 600; }
.barra .usuario { margin-left: auto; opacity: 0.8; font-size: 0.9rem; }
.barra a { color: #fff; }

/* Banner de impersonación (Fase 3 del sistema de permisos, 2026-09-23) --
   visible en TODA la app mientras un super-admin actúa como otro usuario,
   a propósito llamativo (naranja, arriba de todo) para que nunca se le
   olvide a quien lo usa que no está en su propia cuenta. */
.banner-impersonacion {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.6rem 1rem; background: #b3651e; color: #fff; font-size: 0.9rem;
}
.banner-impersonacion button {
  padding: 0.3rem 0.7rem; background: #fff; color: #b3651e; border: none;
  border-radius: 4px; font-weight: 600; cursor: pointer;
}

main { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem; }

.caja-login {
  max-width: 320px;
  margin: 3rem auto;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.caja-login form { display: flex; flex-direction: column; gap: 0.75rem; }
.caja-login label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.caja-login input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
.caja-login button, .buscador button {
  padding: 0.6rem;
  background: #1c1e21;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.error { color: #c0392b; }

.buscador { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.buscador input {
  flex: 1;
  min-width: 160px;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.buscador select {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
.categoria { color: #666; font-size: 0.9rem; }

.conteo { color: #666; font-size: 0.9rem; margin: 0 0 0.5rem; }

.tabla-stock {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.tabla-stock th, .tabla-stock td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.tabla-stock .cantidad { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-stock .vacio { text-align: center; color: #888; }

.form-inline { margin: 0; }
.boton-secundario {
  padding: 0.4rem 0.7rem;
  background: #fff;
  color: #1c1e21;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.boton-secundario:disabled { opacity: 0.4; cursor: not-allowed; }

.form-usuario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  align-items: flex-end;
}
.form-usuario label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.form-usuario input, .form-usuario select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.form-usuario button {
  padding: 0.6rem 1rem;
  background: #1c1e21;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.form-usuario small { color: #888; }

.acciones-usuario { display: flex; gap: 0.4rem; align-items: center; }
.acciones-usuario a.boton-secundario { text-decoration: none; }

/* Compras > Nuevos ingresos (agregado 2026-09-17): columna vertical para
   separar la acción principal (notificar) de "Es ruido", que se ve como
   un enlace discreto -- feedback de Efraín, estar al lado del botón de
   notificar prestaba a marcarlo por error. Corregido el mismo día
   (segunda ronda de feedback): seguía sintiéndose muy cerca -- se mueve
   al lado izquierdo (opuesto al botón, que queda a la derecha del
   contenedor) y se le agrega una separación/línea propia en vez de solo
   el gap normal de la columna. */
.acciones-ingreso { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; min-width: 10rem; }
.acciones-ingreso .form-inline:last-child {
  align-self: stretch;
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #e2e2e2;
}
.enlace-archivar {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: #999;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}
.enlace-archivar:hover { color: #555; }

/* Compras > Nuevos ingresos: barra de selección múltiple (agregado
   2026-09-17, segunda ronda del mismo día) -- combinar varias recepciones
   en una sola notificación cuando el mismo pedido/proveedor llega
   facturado en varias órdenes de entrada separadas.

   Corregido 2026-09-18 (feedback de Efraín): con una tabla larga, el
   botón quedaba fuera de vista al bajar -- se vuelve "sticky" (se queda
   pegada arriba del viewport al hacer scroll, el header de arriba
   `.barra` no es sticky así que se va con el scroll normal) y oculta por
   default -- solo aparece cuando hay 2+ seleccionadas (con 0 o 1 ya está
   el botón normal de cada fila, mostrarla siempre sería molesto sin
   aportar nada). Ver `actualizarBarraSeleccionIngresos` en
   templates/ingresos.html, que agrega/quita la clase `.visible`. */
.barra-seleccion {
  display: none;
  align-items: center;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f4f5f7;
  padding: 0.6rem 0;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.barra-seleccion.visible { display: flex; }

.tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.tabs a {
  padding: 0.5rem 0.9rem;
  border-radius: 6px 6px 0 0;
  text-decoration: none;
  color: #1c1e21;
  background: #e7e8ea;
  font-size: 0.9rem;
}
.tabs a.activo { background: #fff; font-weight: 600; }
.aviso {
  background: #fff8e1;
  border: 1px solid #f0d98c;
  color: #6b5300;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* Etiqueta pequeña junto a un valor -- agregada 2026-09-16 (Compras >
   Recomendaciones) para marcar "cantidad mínima default" sin invadir la
   tabla. Reusa la misma paleta cálida de .aviso (mismo significado: "esto
   es un valor de relleno/pendiente de definición, no un hecho medido") en
   vez de inventar un color/estado nuevo. */
.etiqueta-minimo {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b5300;
  background: #fff8e1;
  border: 1px solid #f0d98c;
  border-radius: 999px;
  vertical-align: middle;
  cursor: help;
}

/* Popup de "Enviar notificación" en Compras > Nuevos ingresos (agregado
   2026-09-17) -- <dialog> nativo del navegador (sin librería de modales):
   solo se le da estilo a la caja y al fondo, el show/hide lo maneja
   showModal()/close() en el propio HTML. */
dialog {
  border: none;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  max-width: 320px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
dialog::backdrop { background: rgba(0,0,0,0.4); }
dialog button[type="submit"] {
  padding: 0.5rem 0.9rem;
  background: #1c1e21;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Contabilidad > Auxiliar contable (agregado 2026-09-18) -- documento con
   varias tablas anchas (folio fiscal, montos, cliente...) que no caben
   cómodas en el `main` de 720px del resto de la plataforma. `main.ancho`
   lo ensancha SOLO en esta pantalla (ver templates/base.html:
   `{% block main_class %}`), sin tocar el layout angosto ya establecido
   para el resto de pantallas. */
main.ancho { max-width: 1100px; }

.tarjeta {
  background: #fff;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.tarjeta h2, .tarjeta h3 { margin-top: 0; }

.tabla-aux {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.tabla-aux th, .tabla-aux td {
  padding: 0.45rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.tabla-aux th { background: #1f3a5f; color: #fff; font-weight: 600; }
.tabla-aux tr:nth-child(even) td { background: #f7f8fa; }
.tabla-aux .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-aux tfoot td { font-weight: 700; background: #dfe6ef; }
.tabla-aux .sin-timbre { color: #b3261e; font-weight: 600; }
.tabla-aux .pagada-anomalia { color: #b3261e; font-weight: 600; }
/* Sin el ancestro .tabla-aux (2026-10-02): Finanzas la usa también en
   tablas .tabla-stock (listado principal, Presupuesto) y fuera de
   cualquier tabla (resumen del dashboard) -- la regla de arriba nunca
   aplicaba ahí, se vuelve a declarar sin el calificador para que sí
   pinte rojo donde corresponda. */
.pagada-anomalia { color: #b3261e; font-weight: 600; }
.tabla-aux .folio-fiscal { font-size: 0.72rem; color: #666; word-break: break-all; }

.sin-datos { color: #888; font-style: italic; padding: 0.5rem 0; }

.resumen-lista { list-style: none; padding: 0; margin: 0; }
.resumen-lista li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0; border-bottom: 1px dashed #e2e2e2;
}
.resumen-lista li.subtotal { font-size: 0.9rem; color: #555; }
.resumen-lista li.destacado { font-weight: 700; border-bottom: 2px solid #1f3a5f; font-size: 1.05rem; }

.badge-folio {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px;
  background: #1f3a5f; color: #fff; font-size: 0.78rem; font-weight: 600;
}
.avisos-aux { margin-bottom: 1rem; }
.avisos-aux .aviso { color: #8a3a00; }

/* Popup "Agregar ingreso" (2026-09-21): el <dialog> base mide 320px, angosto
   para un formulario con selector, montos y archivo. */
dialog.modal-ancho { max-width: 460px; width: 92vw; }
.form-modal { display: flex; flex-direction: column; gap: 0.6rem; }
.form-modal label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.form-modal input, .form-modal select { padding: 0.45rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; }
.form-modal small { color: #888; }
.form-modal button[type="submit"] { padding: 0.5rem 0.9rem; background: #1f3a5f; color: #fff; border: none; border-radius: 4px; cursor: pointer; }

/* Cierre del día (2026-09-21): el botón va al final del auxiliar y se ve
   grande a propósito -- es la acción final del día de la tienda. */
.cierre-final { border: 2px solid #1f3a5f; text-align: center; }
.boton-cerrar-dia {
  padding: 0.85rem 2.5rem; font-size: 1.1rem; font-weight: 700;
  background: #1f3a5f; color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.boton-cerrar-dia:hover { background: #172c48; }
.form-cierre .confirmacion { flex-direction: row; align-items: flex-start; gap: 0.5rem; font-size: 1rem; margin: 1rem 0; }
.form-cierre .confirmacion input { margin-top: 0.25rem; }

/* Contabilidad > ciclo de vida abierto/cerrado de un auxiliar (agregado
   2026-09-21, pedido explícito de Efraín): mientras el día está ABIERTO la
   tienda puede actualizar desde Odoo y capturar ingresos; al CERRAR queda
   congelado e imprime su cierre. El estado tiene que leerse de un vistazo
   tanto en el listado como en el detalle -- ámbar = todavía se puede
   trabajar, verde = ya cerrado (un corte terminado, no un error). */
.badge-estado {
  display: inline-block; margin-left: 0.4rem; padding: 0.15rem 0.5rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  vertical-align: middle; white-space: nowrap;
}
.badge-estado.estado-abierto { background: #fdf0d5; color: #8a5a00; border: 1px solid #e8c88a; }
.badge-estado.estado-vencido { background: #f3e3e1; color: #a12a1f; border: 1px solid #dfb0aa; }
.badge-estado.estado-extra { background: #e8ecf7; color: #1f3a5f; border: 1px solid #b6c2e0; }
.check-extra { flex-direction: row !important; align-items: center; }
.badge-estado.estado-cerrado { background: #e6f2e9; color: #1f6b3a; border: 1px solid #a8cfb6; }
/* Finanzas > distinguir Factura de Remisión de un vistazo en el listado
   (2026-09-29, pedido explícito de Efraín) -- mismo componente visual que
   el resto de los badges de estatus, un tono neutro nuevo para no
   confundirse con Pendiente/Parcial/Pagada. */
.badge-estado.estado-neutro { background: #eef0f2; color: #444; border: 1px solid #d6d9dd; }
/* Ícono de "tiene documento adjunto" (factura, comprobante de pago o nota
   de crédito, 2026-09-29) -- un link directo al archivo, para identificar
   de un vistazo en la lista qué movimientos ya tienen su comprobante. */
.icono-adjunto { text-decoration: none; margin-left: 0.3rem; }
/* Prioridad / Presupuesto (2026-10-02, pedido explícito de Efraín) --
   botón-ícono sin chrome, para que la estrella se vea como un toggle
   ligero en la lista, no como un botón pesado más. */
.icono-prioridad {
  background: none; border: none; cursor: pointer; font-size: 1.15rem;
  padding: 0 0.2rem; line-height: 1; color: #999;
}
.icono-prioridad.marcada { color: #b8860b; }

.acciones-auxiliar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin: 0.75rem 0 0.25rem;
}
.acciones-auxiliar a.boton-secundario { text-decoration: none; }
/* "Cerrar el día" es la acción final e irreversible para la tienda -- se
   distingue del resto de botones a propósito, no debe apretarse por
   accidente creyendo que es "Actualizar". */
.boton-principal {
  padding: 0.4rem 0.9rem;
  background: #1f3a5f; color: #fff;
  border: 1px solid #1f3a5f; border-radius: 4px;
  cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.boton-principal:hover { background: #172c48; }

/* Contabilidad > "8. Cancelados" (agregado 2026-09-18, pedido explícito de
   Efraín): informativo, NUNCA forma parte de los totales del día -- se ve
   deliberadamente gris/apagado (header gris en vez del azul corporativo de
   .tabla-aux) para que nadie lo confunda con un movimiento real al hojear
   la pantalla o el PDF. */
.tarjeta-informativa { background: #f5f6f7; color: #767a80; }
.tarjeta-informativa h2, .tarjeta-informativa h3 { color: #767a80; }
.tarjeta-informativa .tabla-aux th { background: #c9ccd1; color: #3a3d42; }
.tarjeta-informativa .tabla-aux td { color: #767a80; }
.tarjeta-informativa .tabla-aux tr:nth-child(even) td { background: #ebedef; }

/* Finanzas (2026-09-29) -- submenú de pestañas propio (Cuentas por pagar /
   Pagos realizados / Dashboard / Logs / Catálogos), reusa `.tabs` que ya
   existía para Compras/Estadística/Nuevos ingresos. `.tabs-scroll` deja
   que se desplace horizontal en vez de envolver feo cuando no caben las 5
   en una pantalla angosta (ver la regla de mobile más abajo). */
.tabs-scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs-scroll a { flex: 0 0 auto; white-space: nowrap; }

/* Acciones delicadas (anular una cuenta, quitar un pago) -- pedido
   explícito de Efraín: "warnings... dado que es delicado y puede alguien
   quitarla por error". Mismo criterio que el cierre extraordinario de
   Contabilidad: motivo obligatorio, visualmente distinto (borde rojizo en
   vez del borde gris normal de `.form-usuario`) para que no se confunda
   con un formulario cualquiera. */
.form-peligro {
  background: #fdf2f0; border: 1px solid #e6b3ab; border-radius: 6px;
  padding: 0.75rem 1rem; margin-top: 0.5rem;
}
.form-peligro p.aviso-peligro {
  margin: 0 0 0.5rem; color: #a12a1f; font-weight: 600; font-size: 0.85rem;
}
.form-peligro input[type="text"] { width: 100%; max-width: 22rem; }
.form-peligro button[type="submit"] {
  background: #a12a1f; color: #fff; border: 1px solid #a12a1f;
}
.form-peligro button[type="submit"]:hover { background: #841f16; }

/* Bitácora / Logs (2026-09-29): mismo look que .tabla-aux pero cada fila
   se lee más como una línea de historial que como una tabla de números --
   sin columna num, el detalle es el protagonista. */
.tabla-bitacora .detalle { color: #333; }
.tabla-bitacora .motivo { color: #a12a1f; font-style: italic; }
.tabla-bitacora .accion {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; background: #e8ecf7; color: #1f3a5f;
  white-space: nowrap;
}
.tabla-bitacora .accion.accion-baja { background: #f3e3e1; color: #a12a1f; }

/* Dashboard de Finanzas > "Deuda por proveedor" (2026-09-29) -- un
   <details> nativo por proveedor (sin JS): colapsado por default para
   que la lista de "a quién le debo" sea escaneable de un vistazo, un
   toque/clic en cualquiera muestra el detalle de vencimiento de sus
   cuentas pendientes. */
.detalle-proveedor {
  border: 1px solid #e2e2e2; border-radius: 6px; margin-bottom: 0.5rem; overflow: hidden;
}
.detalle-proveedor summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.9rem; cursor: pointer; font-weight: 600; background: #f7f8fa;
}
.detalle-proveedor summary::marker { color: #1f3a5f; }
.detalle-proveedor[open] summary { background: #eef1f6; }
.detalle-proveedor .tabla-aux { margin: 0; }

/* ---- Mobile-friendly (2026-09-29, pedido explícito de Efraín: "que todo
   el sitio sea muy mobile-friendly") ----------------------------------
   `.tabla-envoltura` -- el `<script>` al final de base.html envuelve CADA
   tabla en un div con esta clase, en TODAS las páginas, sin tocar
   plantilla por plantilla. CORREGIDO 2026-09-29 (mismo día, feedback de
   Efraín: "en mobile la información de las tablas se ve muy empalmado"):
   el primer intento ponía `display:block` en la tabla y `table-layout:
   fixed; width:100%` en sus filas -- eso FUERZA cada fila a comprimirse
   al ancho de la pantalla sin importar cuántas columnas tenga, exactamente
   lo que causaba el amontonamiento. La forma correcta (y la que usan
   Bootstrap/casi todo el mundo) es un DIV contenedor con `overflow-x:auto`
   por fuera de una tabla que se queda con su layout NATURAL (ancho real
   según su contenido) -- el div se desplaza, la tabla adentro no se
   aplasta. */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0.5rem; }
.tabla-envoltura table { margin-bottom: 0; }

/* Resto de mobile-friendly, genérico:
   - La barra de navegación superior puede traer muchos links (Stock,
     Usuarios, Catálogos, Finanzas, Roles, Estadística, Compras,
     Contabilidad...) para un super-admin -- se deja envolver en vez de
     desbordar sin poder verse.
   - Formularios/pestañas ya usaban flex-wrap; en pantallas angostas cada
     campo pasa a ocupar el ancho completo para que no queden campos a
     medio achicar. */
@media (max-width: 700px) {
  main { padding: 1rem 0.75rem; }
  .barra { flex-wrap: wrap; gap: 0.6rem; padding: 0.6rem 0.75rem; }
  .barra .usuario { margin-left: 0; flex: 1 1 100%; order: 10; }
  .form-usuario, .form-modal { padding: 0.85rem; }
  .form-usuario label, .buscador input, .buscador select { flex: 1 1 100%; min-width: 0; }
  dialog.modal-ancho { max-width: 94vw; }
  .resumen-lista li { flex-wrap: wrap; }
}

/* Contabilidad > cierres agrupados por día (2026-10-05, pedido de Efraín):
   cada día es un bloque con encabezado propio para que se distinga de un
   vistazo dónde empieza y termina; HOY va resaltado (borde y encabezado de
   color) para separarlo de los días previos. */
.dia { border: 1px solid #d6dbe3; border-radius: 8px; margin-bottom: 1rem; overflow: hidden; }
.dia-encabezado {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem;
  padding: 0.55rem 0.85rem; background: #eef1f5; border-bottom: 1px solid #d6dbe3;
}
.dia-etiqueta { font-weight: 700; font-size: 1rem; color: #1f3a5f; text-transform: uppercase; letter-spacing: 0.03em; }
.dia-fecha { font-size: 0.95rem; color: #333; }
.dia-resumen { margin-left: auto; font-size: 0.85rem; color: #555; }
.dia .tabla-aux th { background: #5b6f8a; }
.dia-hoy { border: 2px solid #1f3a5f; box-shadow: 0 2px 6px rgba(31,58,95,0.15); }
.dia-hoy .dia-encabezado { background: #1f3a5f; border-bottom-color: #1f3a5f; }
.dia-hoy .dia-etiqueta, .dia-hoy .dia-fecha, .dia-hoy .dia-resumen { color: #fff; }
.dia-hoy .tabla-aux th { background: #1f3a5f; }
/* Fila "Pendiente de cierre" sin borrador: el nombre de la tienda se ve
   normal (es lo importante); solo los huecos van tenues. */
.fila-sin-generar td.categoria { color: #888; }
.fila-repetida td { opacity: 0.75; }
.dias-anteriores > summary { cursor: pointer; font-weight: 600; color: #1f3a5f; padding: 0.4rem 0; margin-bottom: 0.6rem; }
.cierre-hoy-listo { font-size: 1rem; margin: 0 0 0.9rem; }
@media (max-width: 640px) {
  .dia-resumen { margin-left: 0; width: 100%; }
  .tabla-dia { display: block; overflow-x: auto; }
}

/* Tablero de tiendas (2026-10-05, ver templates/contabilidad_tablero.html).
   Ingreso = azul #2a78d6, gasto = naranja #eb6834 (slots 1-2 de una
   paleta validada para daltonismo) en TODA la pantalla. Barras delgadas,
   extremo redondeado, cifras siempre en tinta (nunca en el color de la
   serie). */
.tb-filtros { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 0.75rem; }
.tb-filtros label[hidden] { display: none; }
.tb-filtros label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: #5f6368; font-weight: 600; }
.tb-filtros select, .tb-filtros input { padding: 0.45rem 0.6rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; font-size: 0.9rem; min-width: 150px; }
.tb-rango-texto { color: #5f6368; margin: 0 0 1rem; }
.tb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 0.6rem; }
.tb-kpi { background: #fff; border-radius: 10px; padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 0.3rem; }
.tb-kpi-titulo { font-size: 0.82rem; color: #5f6368; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.tb-kpi-valor { font-size: 1.75rem; font-weight: 700; color: #1c1e21; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tb-kpi-valor small { font-size: 0.95rem; color: #5f6368; font-weight: 600; }
.tb-kpi-nota .badge-estado { margin-left: 0; margin-right: 0.3rem; }
.tb-var { font-size: 0.82rem; font-weight: 700; }
.tb-var-buena { color: #1f6b3a; }
.tb-var-mala { color: #a12a1f; }
.tb-var-neutra { color: #888; font-weight: 400; }
.tb-var-contexto { font-size: 0.78rem; color: #888; }
.tb-nota { font-size: 0.82rem; color: #777; margin: 0.25rem 0 1rem; }
.tb-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tb-punto.tb-ingreso, .tb-barra.tb-ingreso { background: #2a78d6; }
.tb-punto.tb-gasto, .tb-barra.tb-gasto { background: #eb6834; }
.tb-encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.tb-encabezado h2 { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.tb-total { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-leyenda { display: flex; gap: 1rem; font-size: 0.85rem; color: #444; margin-bottom: 0.4rem; }
.tb-leyenda span { display: flex; align-items: center; gap: 0.35rem; }
.tb-grafica { position: relative; height: 300px; margin-bottom: 0.75rem; }
.tb-segmentado { display: inline-flex; border: 1px solid #d0d4da; border-radius: 8px; overflow: hidden; }
.tb-segmentado button { border: none; background: #fff; padding: 0.4rem 0.75rem; font-size: 0.82rem; cursor: pointer; color: #444; }
.tb-segmentado button + button { border-left: 1px solid #d0d4da; }
.tb-segmentado button.activo { background: #1f3a5f; color: #fff; }
.tb-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.tb-columnas .tarjeta { margin-bottom: 0; }
.tb-columnas + .tarjeta { margin-top: 1.25rem; }
.tb-subtitulo { font-size: 0.9rem; color: #444; margin: 0.6rem 0 0.4rem; }
.tb-subtitulo small { font-weight: 400; color: #888; }
.tb-barras { list-style: none; margin: 0; padding: 0; }
.tb-barras li, .tb-tienda > summary {
  display: grid; grid-template-columns: minmax(110px, 42%) 1fr auto; align-items: center;
  gap: 0.6rem; padding: 0.3rem 0; font-size: 0.86rem;
}
.tb-barra-nombre { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-barra-pista { height: 10px; background: #f0f1f3; border-radius: 4px; overflow: hidden; }
.tb-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.tb-barra-valor { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: #1c1e21; }
.tb-barra-valor small { display: inline-block; min-width: 2.6rem; color: #888; margin-left: 0.4rem; }
.tb-acordeon { border-top: 1px solid #eceef1; }
.tb-acordeon > summary { cursor: pointer; padding: 0.55rem 0; font-weight: 600; color: #1f3a5f; font-size: 0.9rem; list-style: none; }
.tb-acordeon > summary::-webkit-details-marker { display: none; }
.tb-acordeon > summary::before { content: "▸"; display: inline-block; width: 1rem; color: #888; transition: transform 0.15s; }
.tb-acordeon[open] > summary::before { transform: rotate(90deg); }
.tb-tienda > summary { font-weight: 400; grid-template-columns: 1rem minmax(100px, calc(42% - 1rem)) 1fr auto; }
.tb-tienda > summary:hover { background: #f7f8fa; }
.tb-detalle { padding: 0.25rem 0 0.75rem 1rem; }
.tb-detalle h4 { margin: 0.5rem 0 0.25rem; font-size: 0.8rem; color: #5f6368; text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 860px) {
  .tb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-columnas { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tb-kpi-valor { font-size: 1.35rem; }
  .tb-filtros label, .tb-filtros select, .tb-filtros input { width: 100%; min-width: 0; }
  /* En celular la barra va en su propio renglón, a todo lo ancho. */
  .tb-barras li { grid-template-columns: 1fr auto; grid-template-areas: "nombre valor" "pista pista"; row-gap: 0.25rem; }
  .tb-tienda > summary { grid-template-columns: 1rem 1fr auto; grid-template-areas: "marca nombre valor" ". pista pista"; row-gap: 0.25rem; }
  .tb-tienda > summary::before { grid-area: marca; }
  .tb-barra-nombre { grid-area: nombre; }
  .tb-barra-pista { grid-area: pista; }
  .tb-barra-valor { grid-area: valor; }
}

/* Botón "Exportar a Excel" de /stock (2026-10-05): arriba, a la derecha. */
.stock-acciones { display: flex; justify-content: flex-end; margin: 0 0 0.75rem; }
.stock-acciones a { text-decoration: none; font-weight: 600; }

/* Contabilidad > "Pendiente de cierre" (2026-10-05): chip por día y
   resumen de días anteriores con tiendas sin cerrar. */
.dia-resumen { display: flex; align-items: center; gap: 0.6rem; }
.dia-chip { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.dia-chip-ok { background: #e6f2e9; color: #1f6b3a; }
.dia-chip-falta { background: #f3e3e1; color: #a12a1f; }
.dia-chip-hoy { background: #fdf0d5; color: #8a5a00; }
.dia-conteo { font-size: 0.85rem; }
.dia-hoy .dia-conteo { color: #fff; }
.pendientes-resumen { border: 1px solid #dfb0aa; background: #fbf1ef; border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; color: #7a2018; }
.pendientes-resumen ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.pendientes-resumen li { margin: 0.15rem 0; }
.pendientes-resumen a { color: #a12a1f; font-weight: 600; }
.pendientes-ok { color: #1f6b3a; font-weight: 600; margin: 0 0 1rem; }

/* Franja "IMPORTANTE" de cierres pendientes, en todas las páginas, y aviso
   de bloqueo en el detalle (2026-10-05). */
.franja-importante {
  background: #b3261e; color: #fff; padding: 0.55rem 1rem; font-size: 0.92rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center;
}
.franja-importante a { color: #fff; font-weight: 700; margin-left: auto; white-space: nowrap; }
.franja-tienda { white-space: nowrap; }
.aviso-importante { background: #fbf1ef; border: 1px solid #dfb0aa; color: #7a2018; border-radius: 6px; padding: 0.75rem 1rem; text-align: left; }

/* Finanzas > Movimientos y Flujo de efectivo (2026-10-05). Entradas en azul,
   salidas en naranja (mismos tokens que el Tablero de tiendas), otros
   gastos en verde agua. */
.mov-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.25rem 0 1rem; }
.mov-boton { padding: 0.55rem 1rem; border: none; border-radius: 6px; font-weight: 700; cursor: pointer; color: #fff; }
.mov-gasto { background: #c9501f; }
.mov-ingreso { background: #1c5cab; }
.mov-filtros { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-bottom: 0.9rem; }
.mov-filtros label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: #5f6368; font-weight: 600; }
.mov-filtros input, .mov-filtros select { padding: 0.45rem 0.55rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.mov-filtros button { padding: 0.5rem 0.9rem; background: #1c1e21; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.mov-totales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.mov-totales > div { background: #fff; border-radius: 8px; padding: 0.7rem 0.9rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 0.15rem; }
.mov-totales span { font-size: 0.8rem; color: #5f6368; font-weight: 600; }
.mov-totales strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.mov-totales small { color: #777; }
.mov-entrada { color: #1c5cab; }
.mov-salida { color: #a8431a; }
.mov-tipo-gasto { background: #fde9df; color: #8a3410; border: 1px solid #f0bfa6; }
.mov-tipo-ingreso { background: #e1ecfa; color: #184f95; border: 1px solid #a9c6ee; }
.mov-tipo-pago { background: #e6f2e9; color: #1f6b3a; border: 1px solid #a8cfb6; }
.mov-tipo-nota_credito { background: #e8ecf7; color: #1f3a5f; border: 1px solid #b6c2e0; }
.mov-tipo-traspaso { background: #eef0f2; color: #444; border: 1px solid #d6d9dd; }
.fila-anulada td { opacity: 0.55; text-decoration: line-through; }
.fila-anulada td:last-child, .fila-anulada td:nth-child(2) { text-decoration: none; }
.tb-punto.fl-otros, .tb-barra.fl-otros { background: #1baf7a; }
@media (max-width: 640px) { .mov-totales { grid-template-columns: 1fr; } }
.tabla-stock td.num, .tabla-aux td.num { white-space: nowrap; }
/* Firma de cierres (2026-10-06): botón verde y estado "Firmado". */
.boton-firmar { padding: 0.4rem 0.8rem; background: #1f7a3f; color: #fff; border: none; border-radius: 4px; font-weight: 700; cursor: pointer; }
.boton-firmar:hover { background: #17612f; }
.form-modal .boton-firmar { padding: 0.55rem 1rem; }
.badge-estado.estado-firmado { background: #1f7a3f; color: #fff; border: 1px solid #17612f; }
.firma-ok { background: #e6f2e9; border: 1px solid #a8cfb6; color: #1f6b3a; border-radius: 6px; padding: 0.6rem 0.9rem; }
.form-modal .tabla-aux { font-size: 0.85rem; }
.form-modal button.boton-firmar[type="submit"] { background: #1f7a3f; }
.boton-firmar, .acciones-usuario .boton-secundario { white-space: nowrap; }

/* Usuarios: tiendas (varias) y puesto en tienda (2026-10-06). */
.fieldset-tienda { border: 1px solid #e2e2e2; border-radius: 6px; padding: 0.5rem 0.75rem; margin-top: 0.5rem; }
.fieldset-tienda legend { font-weight: 600; font-size: 0.85rem; }
.casillas { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.casillas label { display: flex; align-items: center; gap: 0.3rem; font-weight: normal; flex-direction: row; }

/* Créditos (fase 1a, 2026-10-06). */
.cr-encabezado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.cr-conteo { display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: #e6e9ee; color: #333; font-size: 0.75rem; text-align: center; }
.cr-conteo-alerta { background: #b3261e; color: #fff; }
.cr-resultado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.cr-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cr-form h3 { font-size: 0.85rem; color: #5f6368; text-transform: uppercase; letter-spacing: 0.03em; margin: 1rem 0 0.4rem; }
.cr-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem 0.8rem; }
.cr-fila label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: #444; }
.cr-fila .check-extra { flex-direction: row; align-items: center; font-weight: 400; }
.cr-fila input, .cr-fila select, .cr-textarea { padding: 0.45rem; border: 1px solid #ccc; border-radius: 5px; font-size: 0.9rem; font-family: inherit; }
.cr-fila input:disabled, .cr-fila select:disabled, .cr-textarea:disabled { background: #f4f5f7; color: #333; }
.cr-ancho { grid-column: span 2; }
.cr-textarea { width: 100%; box-sizing: border-box; }
.cr-guardar { margin-top: 0.8rem; padding: 0.55rem 1.1rem; background: #1f3a5f; color: #fff; border: none; border-radius: 5px; font-weight: 600; cursor: pointer; }
.cr-odoo { font-size: 0.75rem; }
.cr-alerta { margin: 0.25rem 0; padding: 0.45rem 0.7rem; border-radius: 6px; font-size: 0.9rem; }
.cr-alerta-alta { background: #fbecea; color: #8a1f17; border: 1px solid #e7b9b4; }
.cr-alerta-media { background: #fdf3df; color: #7a5200; border: 1px solid #ecd39b; }
.cr-alerta-info { background: #eef2f8; color: #1f3a5f; border: 1px solid #c8d4e6; }
.cr-corrida { background: #f4f6f9; border: 1px dashed #b8c2d1; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.8rem 0; }
.badge-estado.cr-estado-captura { background: #eef0f2; color: #444; border: 1px solid #d6d9dd; }
.badge-estado.cr-estado-pendiente { background: #fdf0d5; color: #8a5a00; border: 1px solid #e8c88a; }
.badge-estado.cr-estado-autorizada { background: #e6f2e9; color: #1f6b3a; border: 1px solid #a8cfb6; }
.badge-estado.cr-estado-rechazada, .badge-estado.cr-estado-cancelada { background: #f3e3e1; color: #a12a1f; border: 1px solid #dfb0aa; }
@media (max-width: 760px) { .cr-columnas { grid-template-columns: 1fr; } .cr-ancho { grid-column: span 1; } }