/* ==========================================================================
   T25 · paso 1 (John 07/11): UN solo azul y botones/pestañas iguales en todo el admin.
   Se carga DESPUÉS de styles.css, rediseno.css y las hojas de cada módulo: solo pisa
   los estilos viejos (turquesa --accent, azul claro #378ADD) con los tokens v7.
   Revertir: quitar el <link> de index.html. No cambia datos ni comportamiento.

   Regla del sistema (dos componentes con trabajos distintos):
   - PESTAÑA (cambia de vista dentro de una pantalla): texto gris, la activa en tinta
     con raya azul --marca debajo.
   - FILTRO / PERÍODO (elige qué datos ver): píldora; la elegida en azul marino.
   - BOTÓN PRINCIPAL (hace algo): azul --marca. Secundario: blanco con borde.
   ========================================================================== */

/* Tokens v7 para TODO el admin (rediseno.css los tiene encerrados en .rd; mismos valores).
   El turquesa viejo pasa a ser el azul de marca en todo lo que lo usa (16 reglas de styles.css). */
:root {
  --marino: #0F172A; --linea: #E7E9EE; --tinta: #0F172A; --tinta-2: #475467; --tinta-3: #667085;
  --apagado: #A0A7B4; --apagado-fondo: #EEF0F3;
  --marca: #3B5BFD; --marca-hover: #2F4BE6; --marca-suave: #ECF0FF; --marca-tinta: #2A3FC4;
  --r-interno: 10px; --r-pildora: 999px;
  --sombra-heroe: 0 10px 30px rgba(59, 91, 253, .28);
  --accent: var(--marca);
  --accent-hover: var(--marca-hover);
}

/* ---------- Botón principal: azul de marca ---------- */
.btn-primary, .btn-refresh {
  background: var(--marca); color: #fff; border: 1px solid transparent;
  border-radius: var(--r-interno, 10px); font-weight: 600;
}
.btn-primary:hover, .btn-refresh:hover { background: var(--marca-hover); }
.btn-primary:disabled, .btn-refresh:disabled { background: var(--apagado); cursor: not-allowed; }

/* ---------- Filtros de período: píldora, la elegida en marino ---------- */
.preset-btn { border-color: var(--linea); color: var(--tinta-2); border-radius: var(--r-pildora, 999px); }
.preset-btn:hover { border-color: var(--marca); color: var(--marca-tinta); }
.preset-btn.active { background: var(--marino); border-color: var(--marino); color: #fff; }

/* ---------- Pestañas: raya azul debajo de la activa (Cierres, Delivery, Casos de peso…) ---------- */
.tab-btn, .ep-tab { color: var(--tinta-3); }
.tab-btn:hover, .ep-tab:hover { color: var(--tinta); background: transparent; }
.tab-btn.active, .ep-tab.ep-tab-active { color: var(--tinta); border-bottom-color: var(--marca); font-weight: 600; }

/* ---------- Totales del panel: tarjeta héroe de un solo color, sin degradado ---------- */
.totales-globales { background: var(--marca); box-shadow: var(--sombra-heroe); }

/* ---------- Casilla de verificación y foco en el azul de marca ---------- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); }

/* ==========================================================================
   T25 · paso 4: cabeceras y menú en celular (revisión 07/11: 07, 17–20, 03 y la franja gris de todas).
   ========================================================================== */
@media (max-width: 768px) {
  /* El menú cerrado proyectaba su sombra sobre el borde izquierdo de TODAS las pantallas. */
  body:not(.menu-abierto) .sidebar { box-shadow: none; }

  /* Cabecera de sección: título arriba a todo el ancho; controles debajo, en una fila que se ajusta. */
  .seccion-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .seccion-header > div { min-width: 0; }
  .seccion-header > div:not(:first-child) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .seccion-header > div:not(:first-child) > select { flex: 1 1 140px; min-width: 0; }

  /* Botones de período (Hoy / 7 días / 30 días…): en fila, nunca uno debajo de otro. */
  .selector-fechas { display: flex; flex-wrap: wrap; gap: 6px; }
  .selector-fechas .preset-btn { flex: 0 0 auto; }

  /* Cierres › calendario: «← Mes anterior / Mes siguiente →» en una sola línea cada uno. */
  .btn-mes { white-space: nowrap; padding: 8px 10px; font-size: 13px; }
}

/* ==========================================================================
   T25 · paso 3: tablas en celular (regla §4: se ocultan columnas secundarias, nunca scroll de lado).
   Cada tabla lleva su clase m-…; se ven las columnas que identifican la fila y su número principal.
   ========================================================================== */
/* Delivery › cierres no cabía ni en escritorio: los encabezados largos pasan a dos líneas. */
.m-dv-cierres.tabla thead th { white-space: normal; padding: 8px; }
.m-dv-cierres.tabla tbody td { padding: 8px; }
@media (max-width: 768px) {
  .m-det-agencia th:nth-child(1), .m-det-agencia td:nth-child(1), .m-det-agencia th:nth-child(3), .m-det-agencia td:nth-child(3), .m-det-agencia th:nth-child(5), .m-det-agencia td:nth-child(5), .m-det-agencia th:nth-child(6), .m-det-agencia td:nth-child(6), .m-det-agencia th:nth-child(7), .m-det-agencia td:nth-child(7) { display: none; }
  .m-usuarios th:nth-child(3), .m-usuarios td:nth-child(3), .m-usuarios th:nth-child(4), .m-usuarios td:nth-child(4), .m-usuarios th:nth-child(6), .m-usuarios td:nth-child(6) { display: none; }
  .m-accesos th:nth-child(3), .m-accesos td:nth-child(3), .m-accesos th:nth-child(4), .m-accesos td:nth-child(4), .m-accesos th:nth-child(6), .m-accesos td:nth-child(6) { display: none; }
  .m-gestion th:nth-child(1), .m-gestion td:nth-child(1), .m-gestion th:nth-child(2), .m-gestion td:nth-child(2), .m-gestion th:nth-child(4), .m-gestion td:nth-child(4) { display: none; }
  .m-auditoria-cierres th:nth-child(3), .m-auditoria-cierres td:nth-child(3), .m-auditoria-cierres th:nth-child(5), .m-auditoria-cierres td:nth-child(5), .m-auditoria-cierres th:nth-child(6), .m-auditoria-cierres td:nth-child(6), .m-auditoria-cierres th:nth-child(7), .m-auditoria-cierres td:nth-child(7) { display: none; }
  .m-peso-resumen th:nth-child(5), .m-peso-resumen td:nth-child(5) { display: none; }
  .m-peso-aprobar th:nth-child(2), .m-peso-aprobar td:nth-child(2), .m-peso-aprobar th:nth-child(4), .m-peso-aprobar td:nth-child(4), .m-peso-aprobar th:nth-child(5), .m-peso-aprobar td:nth-child(5), .m-peso-aprobar th:nth-child(6), .m-peso-aprobar td:nth-child(6), .m-peso-aprobar th:nth-child(8), .m-peso-aprobar td:nth-child(8) { display: none; }
  .m-peso-seguimiento th:nth-child(2), .m-peso-seguimiento td:nth-child(2), .m-peso-seguimiento th:nth-child(4), .m-peso-seguimiento td:nth-child(4), .m-peso-seguimiento th:nth-child(6), .m-peso-seguimiento td:nth-child(6), .m-peso-seguimiento th:nth-child(7), .m-peso-seguimiento td:nth-child(7), .m-peso-seguimiento th:nth-child(9), .m-peso-seguimiento td:nth-child(9) { display: none; }
  .m-peso-robot th:nth-child(2), .m-peso-robot td:nth-child(2), .m-peso-robot th:nth-child(4), .m-peso-robot td:nth-child(4), .m-peso-robot th:nth-child(5), .m-peso-robot td:nth-child(5) { display: none; }
  .m-peso-cajero th:nth-child(2), .m-peso-cajero td:nth-child(2), .m-peso-cajero th:nth-child(4), .m-peso-cajero td:nth-child(4), .m-peso-cajero th:nth-child(6), .m-peso-cajero td:nth-child(6), .m-peso-cajero th:nth-child(7), .m-peso-cajero td:nth-child(7), .m-peso-cajero th:nth-child(8), .m-peso-cajero td:nth-child(8), .m-peso-cajero th:nth-child(9), .m-peso-cajero td:nth-child(9), .m-peso-cajero th:nth-child(10), .m-peso-cajero td:nth-child(10) { display: none; }
  .m-peso-auditoria th:nth-child(2), .m-peso-auditoria td:nth-child(2), .m-peso-auditoria th:nth-child(4), .m-peso-auditoria td:nth-child(4), .m-peso-auditoria th:nth-child(5), .m-peso-auditoria td:nth-child(5), .m-peso-auditoria th:nth-child(6), .m-peso-auditoria td:nth-child(6), .m-peso-auditoria th:nth-child(7), .m-peso-auditoria td:nth-child(7) { display: none; }
  .m-ops-st th:nth-child(3), .m-ops-st td:nth-child(3), .m-ops-st th:nth-child(4), .m-ops-st td:nth-child(4), .m-ops-st th:nth-child(6), .m-ops-st td:nth-child(6) { display: none; }
  .m-ops-conduce th:nth-child(3), .m-ops-conduce td:nth-child(3), .m-ops-conduce th:nth-child(4), .m-ops-conduce td:nth-child(4), .m-ops-conduce th:nth-child(6), .m-ops-conduce td:nth-child(6) { display: none; }
  .m-dv-cierres th:nth-child(2), .m-dv-cierres td:nth-child(2), .m-dv-cierres th:nth-child(4), .m-dv-cierres td:nth-child(4), .m-dv-cierres th:nth-child(5), .m-dv-cierres td:nth-child(5), .m-dv-cierres th:nth-child(6), .m-dv-cierres td:nth-child(6), .m-dv-cierres th:nth-child(8), .m-dv-cierres td:nth-child(8), .m-dv-cierres th:nth-child(9), .m-dv-cierres td:nth-child(9), .m-dv-cierres th:nth-child(10), .m-dv-cierres td:nth-child(10) { display: none; }
  .m-entregado th:nth-child(2), .m-entregado td:nth-child(2), .m-entregado th:nth-child(3), .m-entregado td:nth-child(3), .m-entregado th:nth-child(5), .m-entregado td:nth-child(5), .m-entregado th:nth-child(7), .m-entregado td:nth-child(7), .m-entregado th:nth-child(9), .m-entregado td:nth-child(9) { display: none; }
}

/* Estadísticas y panel (comparación por período, 4 columnas): en celular, letra y relleno menores en vez de scroll. */
@media (max-width: 768px) {
  .rd .tabla-scroll .tabla th, .rd .tabla-scroll .tabla td { padding: 6px 4px; font-size: 12px; white-space: normal; }
  .m-gestion.tabla thead th, .m-gestion.tabla tbody td, .m-dv-cierres.tabla thead th, .m-dv-cierres.tabla tbody td { padding: 8px 6px; }
}
@media (max-width: 768px) {
  /* Estadísticas › comparación: en celular se ve Período y Período anterior; «Sem. pasada» queda para la PC. */
  .tabla:has(> #rdComp) thead th:nth-child(4), #rdComp td:nth-child(4) { display: none; }
}

/* ==========================================================================
   T25 (John 08/11): patrón ÚNICO para cambiar de mes o de día — ‹ Noviembre 2026 › en una línea, centrado,
   flechas pequeñas. Lo usan Cierres › Calendario (mes) y Cierres › Gestión (día).
   ========================================================================== */
.nav-periodo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 12px; }
.nav-flecha { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; color: var(--tinta);
  font: 600 18px/1 inherit; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; flex: none; }
.nav-flecha:hover { border-color: var(--marca); color: var(--marca); }
.nav-etiqueta { font-size: 16px; font-weight: 600; color: var(--tinta); min-width: 150px; text-align: center; }
.nav-periodo-fecha { margin: 0; gap: 6px; }
.nav-periodo-fecha .filtro-input { max-width: 150px; margin: 0; }

/* Calendario: la leyenda Menos/Más, pequeña y debajo del mes. */
.rd .escala.escala-pie { margin-top: 10px; font-size: 11px; gap: 6px; }
.rd .escala.escala-pie .rampa i { width: 12px; height: 8px; }

@media (max-width: 768px) {
  /* Calendario completo a 390 px: siete columnas sin cortar el domingo, días compactos. */
  #rdCalendario { padding: 0; }
  #rdCalendario .tarjeta.c-8 { padding: 12px 8px; }
  #rdCalendario .semana, #rdCalendario .mes { gap: 3px; }
  #rdCalendario .semana { font-size: 11px; text-align: center; } #rdCalendario .semana span { padding: 0; }
  #rdCalendario .dia { min-height: 44px; padding: 4px 3px; border-radius: 8px; }
  #rdCalendario .dia .n { font-size: 10px; }
  #rdCalendario .dia .m { font-size: 11px; }
  #rdCalendario .dia.libre .c { display: none; }
  #rdCalendario .resumen { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  #rdCalendario .resumen b { font-size: 17px; }
}

/* T25 (08/11): al tocar una fila en celular se abre con las columnas escondidas (t25-filas.js). */
@media (max-width: 768px) {
  table[class*="m-"] > tbody > tr:not(.t25-detalle) { cursor: pointer; }
  table[class*="m-"] > tbody > tr.t25-abierta > td { background: var(--marca-suave); }
  tr.t25-detalle > td { display: table-cell !important; background: #F8F9FB; padding: 8px 10px 10px !important; border-bottom: 2px solid var(--marca-suave); }
  tr.t25-detalle dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  tr.t25-detalle dl > div { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 8px; font-size: 12px; }
  tr.t25-detalle dt { color: var(--tinta-3); text-transform: none; }
  tr.t25-detalle dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
}

/* ==========================================================================
   T25 · paso 2 (John 08/11): UN estado vacío y UN cuadro de explicación en todo el admin.
   - Vacío: texto gris normal (sin cursiva), centrado, con aire. Dice qué falta, no «nada».
   - Explicación: tarjeta blanca con borde y raya azul a la izquierda (el de Rutas y Pagos a EPS).
     El ámbar queda SOLO para avisos que piden atención (p. ej. «faltan datos»), nunca para explicar.
   ========================================================================== */
.tabla-empty, .rd .vacio, .cg-empty { color: var(--tinta-3) !important; font-style: normal !important; font-size: 13px; text-align: center; }
.tabla-empty { padding: 28px 16px !important; }
div.tabla-empty { background: #fff; border: 1px dashed var(--linea); border-radius: var(--r-interno); }
.panel-explica, .ep-aud-nota {
  background: #fff !important; color: var(--tinta-2) !important; border: 1px solid var(--linea) !important;
  border-left: 3px solid var(--marca) !important; border-radius: var(--r-interno) !important; box-shadow: none !important;
}
.panel-explica .panel-alerta-header { color: var(--tinta) !important; }

/* Un total que no se pudo cargar (mensajes-error.js): texto claro en ámbar, nunca «—» ni 0. */
.t25-sin-cargar { color: var(--atencion) !important; font-size: 13px !important; font-weight: 600 !important; }

/* P10 Fase 1 (John 08/11): «Elegir fechas…» de Inicio con el mismo estilo de los filtros.
   flatpickr (altInput) crea un input nuevo sin id: se toma cualquier input visible del selector. */
#selectorFechas input[type="text"] {
  font: inherit; font-size: 13px; color: var(--tinta); cursor: pointer;
  padding: 7px 14px 7px 34px; width: 190px; min-height: 34px;
  border: 1px solid var(--linea); border-radius: var(--r-pildora, 999px); background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 16px 16px;
}
#selectorFechas input[type="text"]::placeholder { color: var(--tinta-2); opacity: 1; }
#selectorFechas input[type="text"]:hover { border-color: var(--marca); }
#selectorFechas input[type="text"]:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (max-width: 720px) { #selectorFechas input[type="text"] { width: 170px; flex: 0 0 auto; } }
/* Cierres atrasados › Nuevo lote: dos columnas en PC, una en celular (el select se leía «— Selec…»). */
.ca-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .ca-rejilla { grid-template-columns: 1fr; } }