/* =====================================================================
   ERP Jasmin v2.0.0 · Sistema de diseño
   =====================================================================
   Continua la paleta del ERP anterior (navy/teal/blue con estados en
   verde/rojo/naranjo) porque Jasmín ya la reconoce, pero se revisó el
   contraste para cumplir WCAG AA en texto y estados.

   Sin frameworks externos: nada de Bootstrap ni Tailwind por CDN, porque
   el sitio no debe depender de que un tercero siga sirviendo el archivo.
   Todo vive aquí, en un solo archivo, cacheable por el navegador.
   ===================================================================== */

:root {
    --navy: #17324d;
    --navy-oscuro: #0f2133;
    --teal: #0f766e;
    --blue: #2563eb;
    --blue-oscuro: #1d4ed8;
    --verde: #15803d;
    --verde-suave: #e8f6ec;
    --rojo: #b91c1c;
    --rojo-suave: #fde8e8;
    --naranjo: #c2650a;      /* mas oscuro que el ERP anterior: #f59e0b sobre blanco no pasa AA */
    --naranjo-suave: #fff0d8;
    --violeta: #6d28d9;
    --violeta-suave: #f3e8ff;
    --amarillo-suave: #fff4cc;
    --rosa: #be185d;          /* bloque "reemplazo KDR" en la agenda: el teal quedaba casi igual al verde de "realizada" */
    --rosa-suave: #fce7f3;
    --gris: #475569;          /* mas oscuro que #64748b: sobre blanco #64748b no pasa AA para texto pequeño */
    --gris-suave: #f1f5f9;
    --borde: #cbd5e1;
    --fondo: #f8fafc;
    --texto: #0f172a;
    --blanco: #ffffff;

    --radio: 10px;
    --radio-chico: 7px;
    --sombra: 0 1px 3px rgba(15, 23, 42, 0.08);
    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--fuente);
    background: var(--fondo);
    color: var(--texto);
    font-size: 15px;
    line-height: 1.5;
}
h1, h2, h3, h4 { margin: 0 0 8px; color: var(--navy); }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; color: var(--teal); }
p { margin: 0 0 10px; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------
   Estructura
   --------------------------------------------------------------------- */
.encabezado {
    background: var(--navy);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 30;
}
.encabezado .marca { font-size: 17px; font-weight: 700; }
.encabezado .marca small { font-weight: 400; opacity: .75; font-size: 12px; margin-left: 8px; }
.encabezado nav { display: flex; gap: 4px; flex-wrap: wrap; }
.encabezado nav a {
    color: #dbeafe; padding: 8px 12px; border-radius: var(--radio-chico); font-size: 13px; font-weight: 600;
}
.encabezado nav a:hover, .encabezado nav a.activo { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.encabezado nav a.con-pendientes { background: var(--naranjo); color: #fff; }
.encabezado nav a.con-pendientes:hover { background: #c2410c; }
.encabezado .usuario { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.encabezado .usuario form { margin: 0; }
.encabezado .usuario button { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 6px 10px; border-radius: var(--radio-chico); font-size: 12px; cursor: pointer; }

main.contenedor { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
.contenedor-angosto { max-width: 480px; margin: 60px auto; padding: 0 16px; }

.tarjeta {
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 18px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.tarjeta h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.intro { color: var(--gris); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
label { font-weight: 600; display: block; margin: 12px 0 5px; font-size: 13px; }
label .opcional { font-weight: 400; color: var(--gris); }
input, select, textarea {
    width: 100%; border: 1px solid #94a3b8; border-radius: var(--radio-chico);
    background: #fffbea; padding: 10px 11px; font: inherit; color: var(--texto);
}
input:focus, select:focus, textarea:focus { background: #fff; border-color: var(--blue); }
textarea { min-height: 70px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--teal); margin-right: 7px; }
.ayuda-campo { font-size: 12px; color: var(--gris); margin-top: 4px; }
.campo-error { color: var(--rojo); font-size: 12px; margin-top: 4px; font-weight: 600; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; margin: 0 0 14px; }
legend { font-weight: 700; color: var(--navy); padding: 0 6px; }

button, .boton {
    display: inline-block; border: 0; border-radius: var(--radio-chico); background: var(--teal); color: #fff;
    padding: 11px 16px; font-weight: 700; font-size: 14px; cursor: pointer; text-align: center;
}
button:hover, .boton:hover { filter: brightness(.94); text-decoration: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
.boton-ancho { width: 100%; }
.boton-secundario { background: var(--blue); }
.boton-gris { background: var(--gris); }
.boton-peligro { background: var(--rojo); }
.boton-linea { background: #fff; color: var(--navy); border: 1px solid var(--borde); }
.grupo-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------- */
.aviso { padding: 12px 14px; border-radius: var(--radio-chico); font-size: 13px; line-height: 1.5; margin: 10px 0; border: 1px solid transparent; }
.aviso-info { background: #eaf2ff; color: var(--navy-oscuro); border-color: #bfdbfe; }
.aviso-exito { background: var(--verde-suave); color: #14532d; border-color: #bbf7d0; }
.aviso-alerta { background: var(--naranjo-suave); color: #7c3c00; border-color: #fde2b3; }
.aviso-error { background: var(--rojo-suave); color: #7f1d1d; border-color: #fecaca; }

/* ---------------------------------------------------------------------
   Ventana modal

   Se renderiza desde el servidor y se cierra navegando: sin JavaScript,
   para que funcione igual bajo la CSP estricta del sistema.
   --------------------------------------------------------------------- */
.capa-modal {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.capa-modal .modal {
    background: #fff; border-radius: var(--radio); padding: 22px;
    width: 100%; max-width: 560px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .28);
}
.capa-modal .modal h3 { font-size: 17px; color: var(--navy); }
@media (max-width: 480px) {
    .capa-modal { padding: 16px 10px; }
}

/* ---------------------------------------------------------------------
   Estado vacío
   --------------------------------------------------------------------- */
.estado-vacio { text-align: center; padding: 40px 20px; color: var(--gris); }
.estado-vacio strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 6px; }

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
table.tabla { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
table.tabla th {
    position: sticky; top: 0; background: var(--navy); color: #fff; text-align: left;
    padding: 10px 12px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
table.tabla td { padding: 9px 12px; border-top: 1px solid #e2e8f0; font-size: 13px; }
table.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla tr:hover td { background: #f8fafc; }

/* ---------------------------------------------------------------------
   Pastillas de estado — el color nunca es la única señal: siempre va
   acompañado de texto, y el contraste de cada combinación se probó AA.
   --------------------------------------------------------------------- */
.pastilla { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pastilla::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pastilla-programada { background: #dbeafe; color: #1d4ed8; }
.pastilla-realizada  { background: #dcfce7; color: #15803d; }
.pastilla-cancelada  { background: #fee2e2; color: #b91c1c; }
.pastilla-reprogramada { background: #ffe4c4; color: #9a4b00; }
.pastilla-no_realizada { background: #e2e8f0; color: #334155; }
.pastilla-pendiente   { background: #ffe4c4; color: #9a4b00; }
.pastilla-parcial     { background: #fef3c7; color: #854d0e; }
.pastilla-cobrado     { background: #dcfce7; color: #15803d; }
.pastilla-anulado     { background: #fee2e2; color: #b91c1c; }
.pastilla-porconfirmar { background: #e2e8f0; color: #334155; }

/* ---------------------------------------------------------------------
   Tarjetas KPI
   --------------------------------------------------------------------- */
.kpi-rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { border: 1px solid var(--borde); border-radius: var(--radio); padding: 13px; background: #fff; }
.kpi small { display: block; color: var(--gris); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .02em; }
.kpi strong { display: block; color: var(--navy); font-size: 19px; margin-top: 6px; }
.kpi.destacado { background: var(--navy); border-color: var(--navy); }
.kpi.destacado small { color: #93c5fd; }
.kpi.destacado strong { color: #fff; }
.kpi p.ayuda { margin: 5px 0 0; font-size: 11px; line-height: 1.35; color: var(--gris); font-weight: 400; text-transform: none; letter-spacing: normal; }
.kpi.destacado p.ayuda { color: #bfdbfe; }

/* "Como vas este mes": el bloque que responde de un vistazo cuanto trabajaste,
   cuanto vale, cuanto llego y quien te debe. Se distingue del resto con un
   borde de acento porque es lo primero que hay que mirar al entrar. */
.tarjeta.destacada-mes { border-left: 4px solid var(--teal); }
.mes-rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mes-dato { border: 1px solid var(--borde); border-radius: var(--radio); padding: 13px; }
.mes-dato small { display: block; color: var(--gris); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .02em; }
.mes-dato strong { display: block; color: var(--navy); font-size: 23px; margin: 5px 0 3px; font-variant-numeric: tabular-nums; }
.mes-dato span { display: block; font-size: 11px; line-height: 1.35; color: var(--gris); }
.mes-dato.alerta { border-color: var(--naranjo); background: var(--naranjo-suave); }
.mes-dato.alerta strong { color: #7c3c00; }
.mes-dato.alerta span { color: #7c3c00; }

/* ---------------------------------------------------------------------
   Utilidades
   --------------------------------------------------------------------- */
.oculto { display: none !important; }
.texto-gris { color: var(--gris); }
.texto-chico { font-size: 12px; }
.centrado { text-align: center; }
.espacio-arriba { margin-top: 16px; }
.card-header-accion { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Pestañas de panel (dashboard con varias vistas sin recargar).
   Se navegan con enlaces reales (?panel=...), no con JavaScript: así
   cada pestaña tiene su propia URL, se puede compartir y volver atrás
   funciona. El estilo replica el del ERP anterior, que Jasmín ya conoce.
   --------------------------------------------------------------------- */
.panel-pestanas { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 2px; }
.panel-pestanas a {
    white-space: nowrap; padding: 9px 14px; border-radius: var(--radio-chico);
    background: #e2e8f0; color: var(--navy); font-weight: 600; font-size: 13px;
}
.panel-pestanas a:hover { background: #cbd5e1; text-decoration: none; }
.panel-pestanas a.activa { background: var(--navy); color: #fff; }
.panel-pestanas a.con-pendientes { background: var(--naranjo-suave); color: #7c3c00; }
.panel-pestanas a.con-pendientes.activa { background: var(--naranjo); color: #fff; }

.filtros-panel { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; align-items: end; }
.filtros-panel label { margin-top: 0; }

/* ---------------------------------------------------------------------
   Alertas del período: cifras que exigen una acción, no solo informan.
   --------------------------------------------------------------------- */
.alerta-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.alerta-caja { padding: 12px 14px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--gris-suave); }
.alerta-caja b { display: block; font-size: 21px; color: var(--navy); }
.alerta-caja small { display: block; color: var(--gris); font-size: 12px; margin-top: 3px; line-height: 1.4; }
.alerta-caja.urgente { background: var(--rojo-suave); border-color: #fecaca; }
.alerta-caja.urgente b { color: var(--rojo); }
.alerta-caja.atencion { background: var(--naranjo-suave); border-color: #fde2b3; }
.alerta-caja.atencion b { color: #7c3c00; }
.alerta-caja.ok { background: var(--verde-suave); border-color: #bbf7d0; }
.alerta-caja.ok b { color: var(--verde); }
/* Tarjeta de alerta clicable: mismo aspecto que una fija, mas un indicio
   de que se puede entrar a resolverla. */
.alerta-caja.alerta-clicable { display: block; text-decoration: none; cursor: pointer; color: inherit; transition: box-shadow .15s, transform .1s; }
.alerta-caja.alerta-clicable:hover { text-decoration: none; box-shadow: var(--sombra); transform: translateY(-1px); }
.alerta-caja.alerta-clicable:visited { color: inherit; }

/* ---------------------------------------------------------------------
   Gráfico de barras mensual, en CSS puro.
   No se usa ninguna librería de gráficos: son divs con altura
   proporcional. Cero dependencias externas (coherente con la regla de
   que el sitio no dependa de ningún CDN) y funciona con la CSP estricta.
   --------------------------------------------------------------------- */
.grafico-rejilla { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.grafico-mes-envoltorio { display: flex; gap: 6px; }
.grafico-eje { display: flex; flex-direction: column; justify-content: space-between; padding: 16px 0 34px; font-size: 10px; color: var(--gris); text-align: right; white-space: nowrap; }
.grafico-mes { flex: 1; height: 260px; display: flex; align-items: flex-end; gap: 6px; padding: 16px 4px 34px; border-bottom: 1px solid var(--borde); position: relative; }
.grafico-linea-ref { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--borde); pointer-events: none; }
.grafico-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; position: relative; }
.grafico-col small { position: absolute; bottom: -26px; font-size: 10px; color: var(--gris); }
.grafico-col:hover .barra { filter: brightness(1.12); }
.barra { min-width: 6px; max-width: 15px; border-radius: 4px 4px 0 0; transition: filter .12s; }
.barra-devengado { background: var(--blue); }
.barra-documentado { background: var(--naranjo); }
.barra-banco { background: var(--teal); }
.grafico-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--gris); margin-bottom: 6px; }
.grafico-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Barra horizontal comparativa (ingresos por pagador). */
.barra-pagador { margin: 14px 0; }
.barra-pagador b { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.barra-pagador b span:last-child { font-variant-numeric: tabular-nums; }
.riel { height: 9px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.riel span { display: block; height: 100%; border-radius: 99px; }
.riel .devengado { background: var(--blue); }
.riel .banco { background: var(--teal); }

/* ---------------------------------------------------------------------
   Filas de tabla coloreadas por estado financiero. Replica la lectura
   "de un vistazo" que daba el Sheet: verde ya está pagado, rojo está
   pendiente, amarillo tiene una diferencia que explicar, azul es el
   período en curso (todavía no es deuda).
   --------------------------------------------------------------------- */
table.tabla tr.fila-pagada td { background: #f0fdf4; }
table.tabla tr.fila-pendiente td { background: #fef2f2; }
table.tabla tr.fila-diferencia td { background: #fffbeb; }
table.tabla tr.fila-actual td { background: #eff6ff; }
table.tabla tr.fila-pagada:hover td { background: #dcfce7; }
table.tabla tr.fila-pendiente:hover td { background: #fee2e2; }
table.tabla tr.fila-diferencia:hover td { background: #fef3c7; }
table.tabla tr.fila-actual:hover td { background: #dbeafe; }
table.tabla tr.fila-total td { background: var(--gris-suave); font-weight: 700; border-top: 2px solid var(--borde); }
table.tabla td.sangria { padding-left: 28px; }

/* Separador de mes al elegir atenciones de un pago.
   Queda pegado arriba mientras se hace scroll: con dos meses en pantalla,
   saber en cuál se está mirando es justamente lo que evita marcar la
   semana equivocada. */
table.tabla tr.fila-mes td {
  position: sticky; top: 0; z-index: 2;
  background: var(--navy); color: #fff;
  border-top: 0; border-bottom: 1px solid var(--navy-oscuro);
}
table.tabla tr.fila-mes td .texto-gris { color: #c7d2e5; }
table.tabla tr.fila-mes .boton-linea { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
table.tabla tr.fila-mes .boton-linea:hover { background: rgba(255,255,255,.14); }

/* Notas cortas en línea bajo un título de sección. */
.nota-seccion { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.nota-seccion span { background: var(--gris-suave); border-radius: var(--radio-chico); padding: 7px 10px; font-size: 12px; color: var(--gris); }

/* Bloque plegable por pagador (estado de cuenta desglosado). */
.estado-pagador { border: 1px solid var(--borde); border-radius: var(--radio); margin: 10px 0; background: #fff; }
.estado-pagador summary { padding: 13px 14px; cursor: pointer; color: var(--navy); font-weight: 600; }
.estado-pagador summary:hover { background: var(--gris-suave); }
.estado-pagador[open] summary { border-bottom: 1px solid var(--borde); }
.estado-pagador .cuerpo { padding: 0 14px 14px; }

/* ---------------------------------------------------------------------
   Agenda visual semanal: grilla de 7 días por franjas de 15 minutos,
   con los bloques ocupando su duración real (equivalente web de la
   agenda que el ERP anterior dibujaba en la hoja de cálculo).
   --------------------------------------------------------------------- */
.agenda-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.agenda-grilla { display: grid; grid-template-columns: 62px repeat(7, minmax(132px, 1fr)); position: relative; min-width: 940px; }
.agenda-cabecera { position: sticky; top: 0; z-index: 2; background: var(--teal); color: #fff; text-align: center; padding: 9px 4px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.agenda-cabecera small { display: block; font-weight: 400; opacity: .85; font-size: 11px; }
.agenda-cabecera.hoy { background: var(--navy); }
.agenda-hora { font-size: 10px; color: var(--gris); text-align: right; padding: 0 6px; border-right: 1px solid var(--borde); border-top: 1px solid #eef2f7; background: var(--fondo); }
.agenda-hora.en-punto { color: var(--navy); font-weight: 700; border-top-color: var(--borde); }
.agenda-celda { border-top: 1px solid #eef2f7; border-right: 1px solid #eef2f7; position: relative; }
.agenda-celda.en-punto { border-top-color: var(--borde); }
.agenda-celda.finde { background: #fcfdfe; }

/* El bloque se posiciona en la grilla vía grid-row (inline, calculado
   en PHP) y ocupa tantas filas de 15 min como dure la sesión. */
.agenda-bloque {
    margin: 1px 3px; padding: 5px 7px; border-radius: 6px; border-left: 4px solid;
    font-size: 11px; line-height: 1.35; overflow: hidden; position: relative; z-index: 1;
    display: block; color: var(--texto);
}
.agenda-bloque:hover { text-decoration: none; filter: brightness(.97); box-shadow: var(--sombra); }
.agenda-bloque b { display: block; font-size: 12px; color: var(--navy); }
.agenda-bloque small { display: block; color: var(--gris); font-size: 10px; }
.agenda-bloque.est-programada { background: #eff6ff; border-left-color: var(--blue); }
.agenda-bloque.est-realizada { background: var(--verde-suave); border-left-color: var(--verde); }
.agenda-bloque.est-cancelada { background: var(--rojo-suave); border-left-color: var(--rojo); }
.agenda-bloque.est-reprogramada { background: var(--naranjo-suave); border-left-color: var(--naranjo); }
.agenda-bloque.est-no_realizada { background: var(--gris-suave); border-left-color: var(--gris); }
.agenda-bloque.tipo-operativo { border-left-color: var(--violeta); background: var(--violeta-suave); }
/* Mismo azul que "Programada": el magenta anterior se leia como cancelado
   o suspendido, que es justo lo contrario de lo que un reemplazo agendado
   significa. Se mantiene la entrada propia en la leyenda para distinguirlo. */
.agenda-bloque.tipo-reemplazo { border-left-color: var(--blue); background: #eff6ff; }
.agenda-bloque.conflicto { outline: 2px solid var(--rojo); outline-offset: -2px; }
.agenda-bloque .marca-conflicto { color: var(--rojo); font-weight: 700; }

.agenda-leyenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--gris); margin-top: 12px; }
.agenda-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border-left: 3px solid; }

/* ---------------------------------------------------------------------
   Ficha clínica: línea de tiempo de evoluciones.
   --------------------------------------------------------------------- */
.evolucion { border-left: 3px solid var(--teal); padding: 0 0 18px 16px; position: relative; margin-left: 6px; }
.evolucion::before { content: ""; position: absolute; left: -7px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); border: 2px solid #fff; }
.evolucion:last-child { padding-bottom: 0; }
.evolucion .fecha { font-weight: 700; color: var(--navy); font-size: 13px; }
.evolucion .meta { font-size: 12px; color: var(--gris); margin-bottom: 6px; }
.evolucion .texto { font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.evolucion dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 6px 0 0; font-size: 13px; }
.evolucion dt { font-weight: 600; color: var(--gris); }
.evolucion dd { margin: 0; }

.dato-sensible { border-left: 3px solid var(--violeta); background: var(--violeta-suave); padding: 10px 14px; border-radius: var(--radio-chico); font-size: 12px; color: #4c1d95; margin: 10px 0; }

/* ---------------------------------------------------------------------
   Responsive: en móvil la experiencia prioriza listas y acciones
   rápidas por sobre tablas anchas, tal como pide el proyecto.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .grafico-rejilla { grid-template-columns: 1fr; }
    .filtros-panel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .encabezado { flex-wrap: wrap; gap: 8px; }
    .fila, .fila-3, .kpi-rejilla, .mes-rejilla { grid-template-columns: 1fr 1fr; }
    .alerta-rejilla { grid-template-columns: 1fr 1fr; }
    main.contenedor { padding: 14px 10px 50px; }
}
@media (max-width: 480px) {
    .fila, .fila-3, .kpi-rejilla, .mes-rejilla, .alerta-rejilla, .filtros-panel { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Impresión — para cuando alguien imprime una pantalla en vez de
   generar el PDF correspondiente.
   --------------------------------------------------------------------- */
@media print {
    .encabezado, nav, .no-imprimir { display: none !important; }
}