/* ==========================================================================
   Rediseño del admin (construcción 01/11/2026) — sistema de diseño de los mockups
   (docs/rediseno/optopus-ds.css) ENCERRADO en .rd: solo afecta a las pantallas ya
   rediseñadas. El resto del admin sigue con styles.css sin cambios.
   ========================================================================== */
.rd {
  /* Base */
  --marino:        #0F172A;   /* menú y tinta principal (el de siempre) */
  --marino-2:      #1E293B;   /* segundo tono del degradado del menú */
  --fondo:         #F4F5F7;
  --tarjeta:       #FFFFFF;
  --linea:         #E7E9EE;   /* divisores y guías de tabla */
  --fila-alterna:  #F8F9FB;

  /* Tinta */
  --tinta:         #0F172A;
  --tinta-2:       #475467;   /* texto secundario */
  --tinta-3:       #667085;   /* etiquetas pequeñas */
  --apagado:       #A0A7B4;   /* estados terminados */
  --apagado-fondo: #EEF0F3;

  /* Marca: azul eléctrico */
  --marca:         #3B5BFD;
  --marca-hover:   #2F4BE6;
  --marca-suave:   #ECF0FF;
  --marca-tinta:   #2A3FC4;   /* texto azul legible sobre blanco */

  /* Estados (solo con significado) */
  --bien:          #15803D;  --bien-fondo:     #DCFCE7;
  --atencion:      #B45309;  --atencion-fondo: #FEF3C7;  --atencion-marca: #F59E0B;
  --problema:      #B91C1C;  --problema-fondo: #FEE2E2;  --problema-marca: #EF4444;

  /* Series de gráficos: solo azules (validados con dataviz/validate_palette.js,
     superficie blanca: banda L, croma, CVD y visión normal en PASS).
     El azul claro pide etiquetas directas: contraste 2.36:1. */
  --serie-1:       #3344BA;
  --serie-2:       #4D70FF;
  --serie-3:       #8EA5FA;
  --serie-gris:    #C9CED8;

  /* Tipografía: una familia, números tabulares */
  --fuente: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-12: 12px; --t-13: 13px; --t-15: 15px; --t-18: 18px; --t-24: 24px; --t-32: 32px; --t-44: 44px;

  /* Radios con jerarquía: el héroe manda, lo de adentro es más chico */
  --r-heroe: 22px; --r-tarjeta: 16px; --r-interno: 10px; --r-pildora: 999px;

  /* Sombras: una sola, muy suave; la del héroe es de su propio color */
  --sombra:        0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
  --sombra-heroe:  0 10px 30px rgba(59, 91, 253, .28);

  /* Espaciado (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px;
  font-family: var(--fuente); font-size: var(--t-15); line-height: 1.45; color: var(--tinta);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  background: var(--fondo); border-radius: var(--r-tarjeta); padding: var(--e-5);
}
.rd * { box-sizing: border-box; }
.rd h1, .rd h2, .rd h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.rd h1 { font-size: var(--t-24); } .rd h2 { font-size: var(--t-15); } .rd p { margin: 0; }
.rd .barra-sup { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-5); }
.rd .barra-sup .titulo { margin-right: auto; }
.rd .barra-sup .sub { color: var(--tinta-3); font-size: var(--t-13); margin-top: 2px; }
.rd {
/* ---------- Pestañas píldora ---------- */
.pildoras { display: inline-flex; gap: 2px; padding: 3px; background: var(--tarjeta); border-radius: var(--r-pildora); box-shadow: var(--sombra); }
.pildoras button {
  font: inherit; font-size: var(--t-13); border: 0; background: transparent; color: var(--tinta-2);
  padding: 6px 14px; border-radius: var(--r-pildora); cursor: pointer;
}
.pildoras button[aria-pressed="true"] { background: var(--marino); color: #fff; }

/* ---------- Rejilla ---------- */
.rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; }
.c-6 { grid-column: span 6; } .c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; } .c-12 { grid-column: span 12; }

/* ---------- Tarjeta ---------- */
.tarjeta { background: var(--tarjeta); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); padding: var(--e-5); min-width: 0; }
.tarjeta-cab { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-4); }
.tarjeta-cab h2 { margin-right: auto; }
.tarjeta-cab .nota { font-size: var(--t-12); color: var(--tinta-3); }
.ir { /* botón redondo que lleva al módulo */
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--linea); color: var(--tinta-2); background: var(--tarjeta); text-decoration: none;
}
.ir:hover { border-color: var(--marca); color: var(--marca); }
.ir .ico { width: 16px; height: 16px; }

/* ---------- Tarjeta héroe ---------- */
.heroe {
  background: var(--marca); color: #fff; border-radius: var(--r-heroe); box-shadow: var(--sombra-heroe);
  padding: var(--e-6); position: relative; overflow: hidden; min-width: 0;
}
.heroe::after { /* tentáculo: un único gesto gráfico de la marca, muy tenue */
  content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, .07); pointer-events: none;
}
.heroe .etiqueta { font-size: var(--t-13); color: rgba(255, 255, 255, .78); }
.heroe .cifra { font-size: var(--t-44); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; margin: 6px 0 var(--e-3); }
.heroe .cifra small { font-size: var(--t-18); font-weight: 400; opacity: .8; margin-right: 4px; }
.heroe .chips { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.heroe .ir { position: absolute; top: var(--e-5); right: var(--e-5); border-color: rgba(255,255,255,.35); background: transparent; color: #fff; z-index: 1; }

/* ---------- Chip de variación ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-12); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pildora); white-space: nowrap; }
.chip .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.chip-sube { background: var(--bien-fondo); color: var(--bien); }
.chip-baja { background: var(--problema-fondo); color: var(--problema); }
.chip-neutro { background: var(--apagado-fondo); color: var(--tinta-2); }
.chip-atencion { background: var(--atencion-fondo); color: var(--atencion); }
.chip-info { background: var(--marca-suave); color: var(--marca-tinta); }
.chip span.vs { font-weight: 400; opacity: .85; }
.heroe .chip { background: rgba(255, 255, 255, .16); color: #fff; }
.heroe .chip.chip-baja { background: #fff; color: var(--problema); }
.heroe .chip.chip-sube { background: #fff; color: var(--bien); }

/* ---------- Libro de cobro (barra 100% de la facturación) ---------- */
.libro { margin-top: var(--e-5); }
.libro-barra { display: flex; height: 14px; gap: 2px; border-radius: 7px; overflow: visible; position: relative; }
.libro-barra > i { display: block; height: 100%; min-width: 3px; }
.libro-barra > i:first-child { border-radius: 7px 0 0 7px; }
.libro-barra > i:last-child { border-radius: 0 7px 7px 0; }
.libro-leyenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--e-3); margin-top: var(--e-3); }
.libro-leyenda div { font-size: var(--t-12); color: rgba(255, 255, 255, .8); }
.libro-leyenda b { display: block; font-size: var(--t-15); font-weight: 500; color: #fff; }
.libro-leyenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.marca-100 { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #fff; border-radius: 1px; }
.exceso { background: repeating-linear-gradient(135deg, #FECACA 0 3px, var(--problema-marca) 3px 6px) !important; }

/* ---------- KPI ---------- */
.kpi { display: flex; flex-direction: column; gap: var(--e-2); }
.kpi-cab { display: flex; align-items: center; gap: var(--e-2); }
.kpi-icono { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-tinta); flex: none; }
.kpi-etiqueta { font-size: var(--t-13); color: var(--tinta-2); margin-right: auto; }
.kpi-cifra { font-size: var(--t-24); font-weight: 500; letter-spacing: -.01em; }
.kpi-cifra small { font-size: var(--t-13); color: var(--tinta-3); font-weight: 400; margin-right: 2px; }
.kpi-pie { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: var(--t-12); color: var(--tinta-3); }

/* ---------- Barra de progreso ---------- */
.progreso { height: 8px; border-radius: var(--r-pildora); background: var(--apagado-fondo); overflow: hidden; position: relative; }
.progreso > i { display: block; height: 100%; border-radius: var(--r-pildora); background: var(--marca); }
.progreso.bien > i { background: var(--bien); }
.progreso.atencion > i { background: var(--atencion-marca); }
.progreso.problema > i { background: var(--problema-marca); }
.progreso.apagado > i { background: var(--apagado); }
.fila-progreso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--e-3); align-items: center; font-size: var(--t-13); }
.fila-progreso .progreso { grid-column: 1 / -1; }
.pct { font-size: var(--t-12); font-weight: 600; padding: 1px 8px; border-radius: var(--r-pildora); background: var(--marino); color: #fff; }

/* ---------- Lista "Requiere atención" ---------- */
.atencion-lista { list-style: none; margin: 0; padding: 0; }
.atencion-lista li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); }
.atencion-lista li:first-child { border-top: 0; padding-top: 0; }
.punto { width: 8px; height: 8px; border-radius: 50%; }
.punto.problema { background: var(--problema-marca); } .punto.atencion { background: var(--atencion-marca); }
.punto.bien { background: var(--bien); } .punto.apagado { background: var(--apagado); }
.atencion-lista .que { font-size: var(--t-13); }
.atencion-lista .que small { display: block; color: var(--tinta-3); font-size: var(--t-12); }
.atencion-lista .cuanto { font-size: var(--t-13); font-weight: 600; text-align: right; white-space: nowrap; }

/* ---------- Tabla compacta con guías ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.tabla th { text-align: left; font-weight: 500; color: var(--tinta-3); font-size: var(--t-12); padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 8px; border-bottom: 1px solid var(--linea); }
.tabla tbody tr:nth-child(even) td { background: var(--fila-alterna); }
.tabla .num { text-align: right; }
.tabla tr.terminado td { color: var(--apagado); }

/* ---------- Semáforo ---------- */
.semaforo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); font-weight: 600; padding: 3px 9px 3px 7px; border-radius: var(--r-pildora); }
.semaforo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.semaforo.bien { color: var(--bien); background: var(--bien-fondo); }
.semaforo.atencion { color: var(--atencion); background: var(--atencion-fondo); }
.semaforo.problema { color: var(--problema); background: var(--problema-fondo); }
.semaforo.apagado { color: var(--tinta-3); background: var(--apagado-fondo); }

/* ---------- Donut con total al centro ---------- */
.donut { position: relative; width: 160px; height: 160px; margin: 0 auto; }
.donut canvas { position: absolute; inset: 0; }
.donut .centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut .centro b { font-size: var(--t-24); font-weight: 500; }
.donut .centro span { font-size: var(--t-12); color: var(--tinta-3); }

/* ---------- Leyenda de gráficos ---------- */
.leyenda { display: flex; gap: var(--e-4); flex-wrap: wrap; font-size: var(--t-12); color: var(--tinta-2); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.grafico { position: relative; height: 220px; }

/* ---------- Esqueleto de carga ---------- */
.esqueleto { border-radius: 8px; background: linear-gradient(90deg, #ECEEF2 0%, #F5F6F8 50%, #ECEEF2 100%); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Estado vacío ---------- */
.vacio { text-align: center; padding: var(--e-6) var(--e-4); color: var(--tinta-2); font-size: var(--t-13); }
.vacio .kpi-icono { margin: 0 auto var(--e-3); background: var(--bien-fondo); color: var(--bien); }

/* ---------- Botones ---------- */
.boton { font: inherit; font-size: var(--t-13); font-weight: 600; border-radius: var(--r-interno); padding: 8px 14px; border: 1px solid transparent; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.boton-primario { background: var(--marca); color: #fff; }
.boton-primario:hover { background: var(--marca-hover); }
.boton-secundario { background: var(--tarjeta); color: var(--tinta); border-color: var(--linea); }

/* ---------- Pie de dato (fuente / N/D) ---------- */
.fuente { font-size: var(--t-12); color: var(--tinta-3); margin-top: var(--e-3); }
.nd { color: var(--atencion); font-weight: 600; }
@media (max-width: 900px) {
  .rejilla > [class*="c-"] { grid-column: 1 / -1; }
  /* KPIs de dos en dos: más datos por pantalla, menos scroll */
  .rejilla { gap: 12px; }
  .rejilla > .kpi.c-3 { grid-column: span 6; padding: 14px; }
  .kpi .ir { display: none; }
  .kpi-icono { width: 28px; height: 28px; }
  .kpi-etiqueta { font-size: 12px; line-height: 1.2; }
  .kpi-cifra { font-size: 19px; }
  .kpi-pie .chip span.vs { display: none; }
  .heroe { padding: var(--e-5); }
  .heroe .cifra { font-size: 36px; }
  .pildoras { width: 100%; overflow-x: auto; }
  .pildoras button { flex: 1 0 auto; padding: 6px 10px; }
  .tabla-scroll { overflow-x: auto; }
}
}

@media (max-width: 900px) { .rd { padding: 12px; border-radius: 0; } }

/* ---------- F1 · Panel general (de docs/rediseno/panel.html) ---------- */
.rd .cuadra { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rd .cuadra b { font-weight: 600; color: #fff; }
.rd .cuadra .ok { background: #fff; color: var(--bien); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.rd .libro-barra { background: rgba(255,255,255,.12); }
.rd .meta-cifra { font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
.rd .meta-cifra small { font-size: 15px; color: var(--tinta-3); font-weight: 400; }
.rd .meta-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 14px; font-size: 12px; color: var(--tinta-3); }
.rd .meta-datos b { display: block; font-size: 15px; font-weight: 500; color: var(--tinta); }
.rd .meses { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: 14px; }
.rd .meses div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--tinta-3); }
.rd .meses i { width: 100%; border-radius: 4px 4px 0 0; background: var(--serie-gris); display: block; }
.rd .meses .actual i { background: var(--marca); }
.rd .ag-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rd .ag-cab h2 { font-size: 18px; margin-right: auto; }
.rd .ag-cifras { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.rd .ag-cifras .monto { font-size: 24px; font-weight: 500; }
.rd .ag-cifras .monto small { font-size: 13px; color: var(--tinta-3); font-weight: 400; }
.rd .ag-cifras .aporte { font-size: 12px; color: var(--tinta-3); text-align: right; }
.rd .ag-cifras .aporte b { display: block; color: var(--tinta); font-size: 15px; font-weight: 600; }
.rd .mini { display: flex; height: 8px; gap: 2px; border-radius: 4px; overflow: hidden; margin-bottom: 6px; background: var(--apagado-fondo); }
.rd .mini i { display: block; height: 100%; }
.rd .mini-ley { display: flex; gap: 12px; font-size: 11px; color: var(--tinta-3); flex-wrap: wrap; margin-bottom: 12px; }
.rd .mini-ley i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.rd .cajas { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.rd .cajas li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--linea); }
.rd .cajas .quien small { display: block; font-size: 11px; color: var(--tinta-3); }
.rd .cajas .dif { font-weight: 600; text-align: right; min-width: 72px; }
.rd .dif.bien { color: var(--tinta-2); } .rd .dif.atencion { color: var(--atencion); } .rd .dif.problema { color: var(--problema); }
.rd .cajas li.falta { color: var(--tinta-3); }
.rd .llena { display: flex; flex-direction: column; }

/* ---------- F2 · Cierres: calendario (de docs/rediseno/calendario.html) ---------- */
.rd {

  /* ---- Mapa de calor del mes: 7 columnas, sin scroll ---- */
  .semana, .mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .semana { font-size: 12px; color: var(--tinta-3); margin-bottom: 6px; }
  .semana span { padding-left: 4px; }
  .dia {
    font: inherit; text-align: left; border: 0; cursor: pointer; border-radius: var(--r-interno);
    min-height: 74px; padding: 7px 8px; display: flex; flex-direction: column; gap: 2px; position: relative;
    background: var(--marca-suave); color: var(--tinta);
  }
  .dia:hover { outline: 2px solid var(--marca); outline-offset: -2px; }
  .dia[aria-pressed="true"] { outline: 2px solid var(--marino); outline-offset: 1px; }
  .dia .n { font-size: 12px; opacity: .75; }
  .dia .m { font-size: 15px; font-weight: 600; margin-top: auto; }
  .dia .c { font-size: 11px; opacity: .8; }
  .dia .m .corto { display: none; }
  .dia.oscuro .c, .dia.oscuro .n { opacity: 1; }
  .rejilla.cal { align-items: start; }
  .dia.oscuro { color: #fff; }
  .dia.libre { background: transparent; border: 1px dashed var(--linea); color: var(--tinta-3); cursor: default; }
  .dia.libre:hover { outline: 0; }
  .dia.vacio { visibility: hidden; }
  .dia .alerta { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
  .alerta.problema { background: var(--problema-marca); color: #fff; }
  .alerta.atencion { background: var(--atencion-marca); color: var(--marino); }
  .dia .c.falta { opacity: 1; background: var(--atencion-marca); color: var(--marino); border-radius: 999px; padding: 0 6px; align-self: flex-start; font-weight: 600; }
  .escala { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-3); flex-wrap: wrap; }
  .escala .rampa { display: flex; gap: 2px; } .escala .rampa i { width: 18px; height: 10px; border-radius: 2px; display: block; }
  .resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .resumen div { font-size: 12px; color: var(--tinta-3); }
  .resumen b { display: block; font-size: 20px; font-weight: 500; color: var(--tinta); }
  .det-cab { font-size: 24px; font-weight: 500; margin: 2px 0 12px; }
  @media (max-width: 900px) {
    .dia { min-height: 54px; padding: 5px; } .dia .c { display: none; } .dia .m { font-size: 13px; }
    .dia .m .largo { display: none; } .dia .m .corto { display: inline; }
    .dia .alerta { top: 6px; right: 6px; padding: 0; width: 8px; height: 8px; font-size: 0; box-shadow: 0 0 0 2px #fff; }
    .dia .c.falta { display: inline-block; font-size: 10px; padding: 0 5px; white-space: nowrap; }
    .dia .c.falta .largo { display: none; }
    .semana, .mes { gap: 4px; }
    .resumen { grid-template-columns: 1fr 1fr; }
  }
}
.rd .tabla th { text-transform: none; letter-spacing: 0; background: transparent; }

/* ---------- F3 · Casos de peso (de docs/rediseno/peso.html) ---------- */
.rd {

  /* ---- Flujo de un caso: 5 etapas en fila, el cuello de botella resaltado ---- */
  .flujo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .etapa { border-radius: var(--r-interno); padding: 12px; background: var(--fila-alterna); position: relative; min-width: 0; }
  .etapa .n { font-size: 28px; font-weight: 500; line-height: 1.1; }
  .etapa .t { font-size: 13px; color: var(--tinta-2); }
  .etapa small { display: block; font-size: 11px; color: var(--tinta-3); margin-top: 6px; }
  .etapa.cero .n { color: var(--apagado); }
  .etapa.cuello { background: var(--atencion-fondo); box-shadow: inset 0 0 0 1.5px var(--atencion-marca); }
  .etapa.cuello .n { color: var(--atencion); }
  .etapa.hecho { background: var(--apagado-fondo); } .etapa.hecho .n { color: var(--tinta-2); }
  .etapa:not(:last-child)::after { /* conector entre etapas */
    content: ""; position: absolute; right: -7px; top: 50%; width: 6px; height: 6px; border-top: 2px solid var(--apagado); border-right: 2px solid var(--apagado); transform: translateY(-50%) rotate(45deg); }
  .cerrados { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--tinta-3); align-items: center; }
  .edad { display: grid; gap: 14px; }
  .mediana { font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
  .mediana small { font-size: 15px; color: var(--tinta-3); font-weight: 400; }
  @media (max-width: 900px) {
    .flujo { grid-template-columns: 1fr 1fr; }
    .etapa::after { display: none; }
    .etapa.cuello { grid-column: 1 / -1; }
  }
}

/* ---------- F4 · Resumen de delivery (de delivery-cobros.html y delivery-eficiencia.html) ---------- */
.rd .dos-lados { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.rd .lado { border-radius: var(--r-interno); padding: 14px; background: var(--fila-alterna); min-width: 0; }
.rd .lado.calle { background: var(--atencion-fondo); }
.rd .lado h3 { margin: 0 0 4px; font-size: var(--t-13); font-weight: 500; color: var(--tinta-2); }
.rd .lado .cifra { font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--atencion); }
.rd .lado .cifra small { font-size: 14px; color: var(--tinta-3); }
.rd .lado ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-13); }
.rd .lado li { display: flex; justify-content: space-between; gap: 8px; }
.rd .lado p { margin: 8px 0 0; font-size: var(--t-12); color: var(--tinta-2); }
.rd .sin-datos { border: 1px dashed var(--linea); border-radius: var(--r-interno); padding: 12px; color: var(--tinta-2); font-size: var(--t-13); }
.rd .sin-datos b { display: block; color: var(--tinta); font-size: var(--t-15); font-weight: 500; }
@media (max-width: 900px) { .rd .dos-lados { grid-template-columns: 1fr; } }

/* ---------- Ajuste 01/11/2026 · Panel general solo operativo ----------
   Pedido de John (revisado en el celular): el efectivo a depositar manda, cada agencia
   es una lista corta y el detalle por caja queda plegado («Ver cajas"). */
.rd {
  .panel-op { align-items: start; }
  .panel-op .heroe .cifra { font-size: 52px; margin-bottom: var(--e-2); }
  .heroe-pie { font-size: var(--t-13); color: rgba(255, 255, 255, .8); }
  .heroe-pie a { color: #fff; font-weight: 600; }
  .totales { display: grid; gap: 0; padding: var(--e-2) var(--e-5); align-self: stretch; align-content: center; }
  .totales .fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: var(--e-3) 0; border-top: 1px solid var(--linea); font-size: var(--t-13); color: var(--tinta-2); }
  .totales .fila:first-child { border-top: 0; }
  .totales .fila b { font-size: var(--t-18); font-weight: 600; white-space: nowrap; color: var(--tinta); }
  .totales .fila small { color: var(--tinta-3); display: block; }
  .totales .fila b.dif.atencion { color: var(--atencion); } .totales .fila b.dif.problema { color: var(--problema); }
  .atencion-lista.una-linea li { padding: 8px 0; }
  .atencion-lista.una-linea .que { line-height: 1.3; }
  .ag .deposito { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); background: var(--marca-suave); border-radius: var(--r-interno); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-2); }
  .ag .deposito span { font-size: var(--t-13); color: var(--marca-tinta); font-weight: 600; }
  .ag .deposito b { font-size: 26px; font-weight: 600; color: var(--tinta); white-space: nowrap; letter-spacing: -.01em; }
  .ag .deposito b small { font-size: var(--t-13); color: var(--tinta-3); font-weight: 400; }
  .ag-filas { margin: 0; }
  .ag-filas div { display: flex; justify-content: space-between; gap: var(--e-3); padding: 7px var(--e-1); border-bottom: 1px solid var(--linea); font-size: var(--t-15); }
  .ag-filas dt { color: var(--tinta-2); } .ag-filas dd { margin: 0; font-weight: 500; }
  .ag-filas dd.dif.bien { color: var(--tinta); }
  .moncion { font-size: var(--t-12); color: var(--tinta-3); margin-top: var(--e-2); }
  .ver-cajas { margin-top: var(--e-3); }
  .ver-cajas summary { cursor: pointer; font-size: var(--t-13); font-weight: 600; color: var(--marca-tinta); list-style: none; padding: 6px 0; }
  .ver-cajas summary::-webkit-details-marker { display: none; }
  .ver-cajas summary::before { content: "▸ "; } .ver-cajas[open] summary::before { content: "▾ "; }
  .ver-cajas .ver-detalle { display: inline-block; margin-top: var(--e-2); font-size: var(--t-12); color: var(--marca-tinta); }
  .tabla .chip { padding: 2px 6px; }
  @media (max-width: 900px) { .tabla .chip .ico { display: none; } .tabla td, .tabla th { padding: 6px 4px; } }
  .por-caja { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  @media (max-width: 900px) {
    .panel-op .heroe .cifra { font-size: 40px; }
    .totales { padding: var(--e-1) var(--e-4); }
    .ag .deposito b { font-size: 22px; }
  }
}

/* ---------- Ajuste 02/11/2026 · Panel general: tarjeta azul del total + 4 agencias ----------
   Pedido de John: FACTURACIÓN manda en la tarjeta azul, las formas de cobro al lado y
   A DEPOSITAR al final resaltado; MV, EMV, NVA y Moncion cada una en su tarjeta, y las
   estadísticas compactas del período debajo, a todo el ancho. */
.rd {
  .heroe-total { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: var(--e-6); align-items: center; }
  .heroe-total .cifra { font-size: 52px; margin-bottom: var(--e-2); }
  .heroe-lineas { margin: 0; position: relative; z-index: 1; display: grid; gap: 0; }
  .heroe-lineas > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: var(--t-13); }
  .heroe-lineas > div:first-child { border-top: 0; }
  .heroe-lineas dt { color: rgba(255, 255, 255, .82); }
  .heroe-lineas dt small { display: block; color: rgba(255, 255, 255, .7); font-size: var(--t-12); }
  .heroe-lineas dd { margin: 0; font-size: var(--t-15); font-weight: 600; white-space: nowrap; }
  .heroe-lineas .dif-valor { padding: 1px 8px; border-radius: var(--r-pildora); }
  .heroe-lineas .dif-valor.atencion { background: #fff; color: var(--atencion); }
  .heroe-lineas .dif-valor.problema { background: #fff; color: var(--problema); }
  .heroe-lineas .a-depositar { margin-top: var(--e-2); border-top: 0; background: #fff; color: var(--tinta); border-radius: var(--r-interno); padding: var(--e-3) var(--e-4); }
  .heroe-lineas .a-depositar dt { color: var(--marca-tinta); font-weight: 600; font-size: var(--t-13); }
  .heroe-lineas .a-depositar dd { font-size: 26px; letter-spacing: -.01em; }
  .heroe-lineas .a-depositar dd small { font-size: var(--t-13); color: var(--tinta-3); font-weight: 400; }

  .ag { display: flex; flex-direction: column; }
  .ag-fact { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--e-2); }
  .ag-fact span { font-size: var(--t-12); color: var(--tinta-3); }
  .ag-fact b { font-size: 26px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
  .ag-fact b small { font-size: var(--t-13); color: var(--tinta-3); font-weight: 400; }
  .ag .deposito { margin: var(--e-3) 0 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  .ag .deposito span { white-space: nowrap; }
  .ag .deposito b { font-size: 22px; }
  .ag-filas div { font-size: var(--t-13); padding: 6px var(--e-1); }
  .ag .ver-detalle { display: inline-block; margin-top: auto; padding-top: var(--e-2); font-size: var(--t-13); font-weight: 600; color: var(--marca-tinta); }
  .ag.ag-vacia { align-self: start; padding-top: var(--e-4); padding-bottom: var(--e-4); }
  .ag.ag-vacia .ag-cab { margin-bottom: 0; }
  .ag .sin-act { margin-top: var(--e-2); font-size: var(--t-13); color: var(--tinta-3); }

  .est-panel { min-width: 0; }
  .est-cab { display: flex; align-items: baseline; gap: var(--e-3); margin: var(--e-3) 0 var(--e-3); }
  .est-cab h2 { margin-right: auto; font-size: var(--t-18); }
  .est-cab a { font-size: var(--t-13); font-weight: 600; color: var(--marca-tinta); }
  .cobro { display: grid; gap: 12px; }
  .cobro-ley { margin-bottom: 12px; }
  .cobro-nom { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-13); color: var(--tinta-2); margin-bottom: 4px; }
  .cobro-nom b { color: var(--tinta); font-weight: 600; }
  .cobro-barra { display: flex; gap: 2px; height: 12px; }
  .cobro-barra i { display: block; height: 100%; min-width: 3px; }
  .cobro-barra i:first-child { border-radius: 4px 0 0 4px; } .cobro-barra i:last-child { border-radius: 0 4px 4px 0; }
  .cobro-barra i:only-child { border-radius: 4px; }

  @media (max-width: 1200px) { .rejilla > .ag.c-3 { grid-column: span 6; } }
  @media (max-width: 900px) {
    .heroe-total { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
    .heroe-total .cifra { font-size: 40px; }
    .heroe-lineas .a-depositar dd { font-size: 22px; }
    .rejilla > .ag.c-3 { grid-column: 1 / -1; }
    .ag-fact b { font-size: 24px; }
  }
}

/* ---------- Ajuste 02/11/2026 (2) · Tarjetas de agencia del mismo alto ----------
   John: la más alta marca el alto de todas, el contenido arriba y «A depositar» siempre
   abajo, alineado entre tarjetas; Moncion sin actividad es la misma tarjeta, no una franja. */
.rd {
  .panel-op > .ag { align-self: stretch; }
  .ag .deposito { margin-top: auto; }
  .ag-filas { margin-bottom: var(--e-3); }
  .ag .ver-cajas { margin-top: var(--e-2); }
  .ag.ag-vacia { align-self: stretch; padding: var(--e-5); }
  .ag.ag-vacia .ag-cab { margin-bottom: 12px; }
  .ag.ag-vacia .ag-fact b { color: var(--tinta-3); }
  .ag .sin-act { flex: 1; display: grid; place-items: center; min-height: 96px; margin: 0; font-size: var(--t-15); color: var(--tinta-3); border: 1px dashed var(--linea); border-radius: var(--r-interno); }
}

/* ---------- Ajuste 02/11/2026 (3) · Escritorio sin huecos (John, Panel v4) ----------
   · tarjeta azul: el desglose va pegado a la Facturación, con ancho máximo (sin vacío al centro)
   · «Requiere atención»: 2 columnas en pantalla ancha, el monto cerca de su texto
   · tarjetas de agencia: Facturación y A depositar ~27% más pequeños, siguen siendo lo más destacado */
.rd {
  .heroe-total { grid-template-columns: max-content minmax(300px, 440px); justify-content: start; column-gap: clamp(32px, 5vw, 80px); }
  .ag-fact b { font-size: 19px; }
  .ag-fact b small { font-size: var(--t-12); }
  .ag .deposito b { font-size: 17px; }
  .ag-cab { gap: 6px; }
  .ag-cab .semaforo { white-space: nowrap; }
  .tarjeta-cab .nota { white-space: nowrap; }
  @media (max-width: 1400px) { .ag-cab h2 { font-size: 16px; } .ag-cab .semaforo { font-size: 11px; padding: 2px 7px 2px 6px; } }
  @media (min-width: 1100px) {
    .atencion-lista.una-linea { display: grid; grid-template-columns: repeat(2, minmax(0, 520px)); column-gap: 64px; }
    .atencion-lista.una-linea li:nth-child(2) { border-top: 0; }
  }
  @media (max-width: 900px) {
    .heroe-total { grid-template-columns: minmax(0, 1fr); }
    .ag-fact b { font-size: 19px; }
    .ag .deposito b { font-size: 17px; }
  }
}

/* ---------- Ajuste 02/11/2026 (4) · Estilo del Panel v5 en Cierres, Casos de peso y Delivery ----------
   Tarjetas alineadas, números proporcionados, un solo enlace por tarjeta, ceros ocultos y sin
   vacíos grandes. */
.rd {
  .enlace-tarjeta { font-size: var(--t-13); font-weight: 600; color: var(--marca-tinta); white-space: nowrap; }
  /* Cierres: el detalle del día ocupa el alto del calendario; su único botón queda abajo */
  .rejilla.cal { align-items: stretch; }
  .cal-det { display: flex; flex-direction: column; }
  .cal-det #rdDet { flex: 1; display: flex; flex-direction: column; }
  .cal-det #rdIrDia { margin-top: auto !important; align-self: flex-start; }
  .cal-det .tabla { margin-bottom: var(--e-4); }
  /* Casos de peso: la mediana al lado de las barras, no una barra de lado a lado */
  .espera { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 640px); gap: var(--e-6); align-items: center; }
  /* Delivery */
  .del-cifra { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: -4px 0 var(--e-3); white-space: nowrap; }
  .del-cifra small { font-size: var(--t-13); color: var(--tinta-3); font-weight: 400; }
  .del-cifra.atencion { color: var(--atencion); }
  .del-aviso { margin-top: var(--e-3); font-size: var(--t-12); color: var(--tinta-2); background: var(--atencion-fondo); border-radius: var(--r-interno); padding: 10px 12px; }
  @media (max-width: 900px) { .espera { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); } }
}
/* Casos de peso › Resumen: la tabla de últimos reportes mide lo que tiene (antes alto de pantalla fijo) */
#seccion-error-peso #epTabResumen .tabla-wrap { height: auto; }

/* ---------- Ajuste 02/11/2026 (5) · Tarjeta azul repartida en todo su ancho (escritorio ≥ 1400px) ----------
   Tres zonas: Facturación · formas de cobro y Diferencia · A depositar. Sin zonas vacías.
   Por debajo de 1400px queda como el v5 aprobado (celular y tablet sin cambios). */
@media (min-width: 1400px) {
  .rd .heroe-total { grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(40px, 4vw, 64px); }
  .rd .heroe-lineas { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); grid-template-rows: repeat(var(--filas, 3), auto); grid-auto-flow: column; column-gap: clamp(28px, 3vw, 48px); align-content: center; }
  .rd .heroe-lineas > div { grid-column: 1; }
  .rd .heroe-lineas > .a-depositar { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
}