/*
  Tema de Productividad RSec.

  Deliberadamente distinto de los otros dos portales internos: barra superior
  en vez de sidebar, grafito con acento verde azulado, y tipografía de sistema.
  Alguien que tenga las tres apps abiertas debe saber en cuál está de un
  vistazo.
*/

:root {
    --fondo: #f6f7f9;
    --superficie: #ffffff;
    --borde: #e3e6ea;
    --texto: #1b2430;
    --texto-tenue: #667085;
    --acento: #0f766e;
    --acento-suave: #d7efec;
    --alerta: #b42318;
    --alerta-suave: #fde8e6;
    --bien: #146c43;
    --bien-suave: #d9f2e4;
    /* Reunion con invitados externos en la agenda: no es una alerta, es otra
       naturaleza de reunion, asi que no reusa --alerta. */
    --agenda-externo: #b45309;
    /* Texto sobre la banda de la agenda: el acento cambia de luminosidad
       entre temas, asi que el color del texto tiene que cambiar con el. */
    --agenda-texto: #ffffff;
    --agenda-meet: #0e7490;
    --agenda-doc: #4338ca;
    --agenda-doc-suave: #eceafd;
    --radio: 10px;
}

[data-bs-theme="dark"] {
    --fondo: #12161c;
    --superficie: #1a2029;
    --borde: #2b3441;
    --texto: #e6eaf0;
    --texto-tenue: #98a4b5;
    --acento: #2dd4bf;
    --acento-suave: #10312e;
    --alerta: #fda29b;
    --alerta-suave: #3a1d1a;
    --bien: #6ee7b7;
    --bien-suave: #10312a;
    --agenda-externo: #d97706;
    --agenda-texto: #06231f;
    --agenda-meet: #67e8f9;
    --agenda-doc: #a5b4fc;
    --agenda-doc-suave: #1e2033;
}

body {
    background: var(--fondo);
    color: var(--texto);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
}

/* --- Barra superior --------------------------------------------------- */

.barra-superior {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 10;
}

.barra-interna {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.marca {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--texto);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.marca-punto {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--acento);
    display: inline-block;
}

.enlaces {
    display: flex;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
}

.enlaces a {
    color: var(--texto-tenue);
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
}

.enlaces a:hover {
    background: var(--fondo);
    color: var(--texto);
}

.enlaces a.activo {
    background: var(--acento-suave);
    color: var(--acento);
    font-weight: 600;
}

.usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texto-tenue);
    font-size: 14px;
}

.nombre-usuario {
    white-space: nowrap;
}

.boton-tema,
.boton-salir {
    background: none;
    border: 1px solid var(--borde);
    color: var(--texto-tenue);
    border-radius: 8px;
    padding: 4px 9px;
    line-height: 1;
}

.boton-tema:hover,
.boton-salir:hover {
    color: var(--texto);
    border-color: var(--texto-tenue);
}

/* --- Contenido -------------------------------------------------------- */

.contenido {
    max-width: 1400px;
    margin: 0 auto;
    padding: 26px 24px 60px;
}

.encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.encabezado h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}

.encabezado .periodo {
    color: var(--texto-tenue);
    font-size: 13px;
    margin-top: 3px;
}

.panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 18px;
    margin-bottom: 18px;
}

.panel h2 {
    font-size: 15px;
    font-weight: 650;
    margin: 0 0 14px;
}

.panel .subtitulo {
    color: var(--texto-tenue);
    font-size: 13px;
    margin: -8px 0 14px;
}

/* --- Tarjetas de indicador -------------------------------------------- */

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px 18px;
}

.tarjeta .etiqueta {
    color: var(--texto-tenue);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.tarjeta .valor {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 6px 0 2px;
}

.tarjeta .nota {
    color: var(--texto-tenue);
    font-size: 12.5px;
    line-height: 1.35;
}

.tarjeta.alerta .valor { color: var(--alerta); }
.tarjeta.bien .valor { color: var(--bien); }

/* --- Tablas ----------------------------------------------------------- */

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabla th {
    text-align: left;
    font-weight: 600;
    color: var(--texto-tenue);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.tabla td {
    padding: 10px;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}

.tabla tbody tr:last-child td {
    border-bottom: none;
}

.tabla tbody tr:hover {
    background: var(--fondo);
}

.tabla a {
    color: var(--acento);
    text-decoration: none;
    font-weight: 600;
}

.numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Encabezados ordenables (las clases las pone js/tablesort.js). La flecha
   doble tenue avisa que la columna se puede ordenar; al ordenar por ella
   queda una sola flecha opaca en el sentido correspondiente. */
.tabla th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px;
}

.tabla th.sortable:hover {
    color: var(--texto);
}

.tabla th.sortable:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: -2px;
}

.tabla th.sortable::after {
    content: "\2195";
    position: absolute;
    right: 8px;
    font-size: 11px;
    opacity: 0.4;
}

.tabla th.sortable.sorted-asc::after {
    content: "\2191";
    opacity: 1;
    color: var(--acento);
}

.tabla th.sortable.sorted-desc::after {
    content: "\2193";
    opacity: 1;
    color: var(--acento);
}

.desplazable {
    overflow-x: auto;
}

/* --- Agenda semanal de Workspace (ficha de la persona) ------------------ */

/* La rejilla se dibuja con dos alturas que manda la vista: el alto de una
   hora y el total, para que las lineas de hora de la columna izquierda
   coincidan con las de cada dia. Todo lo que va dentro se posiciona en % de
   su columna, asi que el alto de la hora se puede cambiar sin recalcular. */
.agenda {
    display: flex;
    gap: 3px;
    min-width: 820px;
}

.agenda-horas {
    flex: 0 0 52px;
}

.agenda-esquina {
    height: 46px;
}

.agenda-hora {
    height: var(--alto-hora);
    font-size: 11px;
    color: var(--texto-tenue);
    text-align: right;
    padding-right: 6px;
    transform: translateY(-6px);
    font-variant-numeric: tabular-nums;
}

.agenda-dia {
    flex: 1 1 0;
    min-width: 104px;
}

.agenda-cabeza {
    height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 6px;
}

.agenda-dow {
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.agenda-resumen {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.agenda-pct {
    font-size: 11px;
    color: var(--texto-tenue);
    font-variant-numeric: tabular-nums;
}

.agenda-pct.alto {
    color: var(--alerta);
    font-weight: 600;
}

.agenda-pct.sin {
    color: var(--borde);
}

.agenda-mini {
    font-size: 10px;
    color: var(--texto-tenue);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: help;
}

.agenda-mini.documentos {
    color: var(--agenda-doc);
}

.agenda-dia.hoy .agenda-dow {
    color: var(--acento);
}

/* --- Rejilla y capas --------------------------------------------------- */

.agenda-rejilla {
    position: relative;
    height: var(--alto-rejilla);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 8px;
    overflow: hidden;
}

.agenda-dia.fin-de-semana .agenda-rejilla {
    background: transparent;
}

.agenda-dia.hoy .agenda-rejilla {
    border-color: var(--acento);
}

.agenda-lineas,
.capa-foco,
.agenda-carriles {
    position: absolute;
    inset: 0;
}

.agenda-linea {
    height: var(--alto-hora);
    border-top: 1px solid var(--borde);
}

.agenda-linea:first-child {
    border-top: none;
}

/* El foco va al fondo: es el contexto sobre el que se leen las demas capas. */
.agenda-foco {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--bien-suave);
    border-left: 3px solid var(--borde);
    cursor: help;
}

.agenda-foco.profundo {
    border-left-color: var(--bien);
}

/* Un carril por capa. Al ocultar una, las demas se reparten el ancho. */
.agenda-carriles {
    display: flex;
    gap: 2px;
    padding: 0 2px;
}

.agenda-carril {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.capa-meet {
    flex: 0 0 9px;
}

.capa-actividad {
    flex: 0 0 14px;
}

/* --- Bandas de cada capa ----------------------------------------------- */

.agenda-bloque,
.agenda-doc {
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 5px;
    padding: 1px 4px;
    font-size: 10.5px;
    line-height: 1.25;
    overflow: hidden;
    cursor: help;
    /* Un tramo de 5 min no debe desaparecer: se le deja un minimo legible
       aunque su alto real en la rejilla sea menor. */
    min-height: 13px;
    box-shadow: 0 0 0 1px var(--superficie);
}

.agenda-bloque {
    background: var(--acento);
    color: var(--agenda-texto);
}

.agenda-bloque.externo {
    background: var(--agenda-externo);
}

/* Una banda que empieza antes o termina despues de la rejilla se recorta: el
   borde plano avisa que sigue, para no leerla como si terminara ahi. */
.agenda-bloque.sigue-antes {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 2px solid var(--superficie);
}

.agenda-bloque.sigue-despues {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 2px solid var(--superficie);
}

.agenda-bloque-hora {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.agenda-bloque-titulo,
.agenda-doc-titulo {
    display: block;
    opacity: 0.9;
    /* Una sola linea con puntos suspensivos: cortar a media palabra en una
       columna angosta se lee peor que truncar. El titulo completo esta en el
       tooltip. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-doc {
    background: var(--agenda-doc-suave);
    color: var(--agenda-doc);
    border: 1px solid var(--agenda-doc);
    font-size: 10px;
}

.agenda-doc.interrumpida {
    border-style: dashed;
}

.agenda-doc-titulo {
    font-weight: 600;
}

/* Meet es una barra delgada: importa el cuando y el cuanto, no el titulo. */
.agenda-meet {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 4px;
    border-radius: 4px;
    background: var(--agenda-meet);
    cursor: help;
}

.agenda-meet.externo {
    background: var(--agenda-externo);
}

/* Cada marca es un cubo de 15 min de eventos sueltos de Drive. */
.agenda-marca {
    position: absolute;
    left: 2px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    transform: translateY(-1px);
    cursor: help;
    background: var(--texto-tenue);
}

.agenda-marca.edicion {
    background: var(--agenda-doc);
}

.agenda-marca.vista {
    background: var(--borde);
    border: 1px solid var(--texto-tenue);
}

.agenda-marca.permiso {
    background: var(--agenda-externo);
}

/* --- Tarjeta de detalle de una franja (la muestra js/agenda.js) --------- */

/* El detalle viaja dentro de la franja pero nunca se dibuja ahi: js/agenda.js
   copia su contenido a la tarjeta flotante. */
.agenda-detalle {
    display: none;
}

/* Cuelga del <body> con position: fixed porque la rejilla recorta lo que se
   sale y ademas vive dentro de un contenedor con desplazamiento horizontal:
   dentro de la franja, la tarjeta quedaria cortada. */
.agenda-tarjeta {
    position: fixed;
    z-index: 50;
    width: 320px;
    /* El max() evita que la tarjeta se colapse donde 1vh valga 0 (visores
       embebidos sin viewport): en un navegador normal manda el 70vh. */
    max-height: max(70vh, 260px);
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--texto);
}

/* Marca en la franja: hubo conexion a Meet en esa hora. */
.agenda-conectado {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--agenda-texto);
    opacity: 0.85;
}

.detalle-cabeza {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 8px;
}

.detalle-cabeza span {
    color: var(--texto-tenue);
    font-size: 11.5px;
}

.detalle-eventos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.detalle-eventos li {
    border-left: 2px solid var(--acento);
    padding-left: 8px;
}

.detalle-hora {
    color: var(--texto-tenue);
    font-variant-numeric: tabular-nums;
    margin-right: 5px;
}

.detalle-titulo {
    font-weight: 600;
}

.detalle-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--texto-tenue);
}

.detalle-etiquetas span {
    background: var(--fondo);
    border-radius: 20px;
    padding: 1px 7px;
}

.detalle-etiquetas .externo {
    background: var(--alerta-suave);
    color: var(--agenda-externo);
}

/* La respuesta a la invitacion es el dato que mas se busca: se colorea. */
.detalle-etiquetas .respuesta.aceptada {
    background: var(--bien-suave);
    color: var(--bien);
}

.detalle-etiquetas .respuesta.rechazada {
    background: var(--alerta-suave);
    color: var(--alerta);
}

.detalle-etiquetas .respuesta.tentativa {
    background: var(--acento-suave);
    color: var(--acento);
}

.detalle-nota {
    margin: 0;
    color: var(--texto-tenue);
    font-size: 11.5px;
}

.detalle-conexion {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--borde);
    font-size: 11.5px;
    color: var(--texto-tenue);
}

.detalle-conexion strong {
    color: var(--bien);
}

.detalle-conexion.sin strong {
    color: var(--texto-tenue);
}

.detalle-conexion ul {
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}

/* La franja es enfocable con el teclado: tiene que notarse cual es. */
.agenda-bloque:focus-visible {
    outline: 2px solid var(--texto);
    outline-offset: 1px;
}

/* --- Interruptores de capa (casilla + :has, sin JavaScript) ------------- */

.agenda-capas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: -4px 0 14px;
    font-size: 12px;
    color: var(--texto-tenue);
}

.agenda-capas label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

.agenda-capas b {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.agenda-capas input:not(:checked) ~ * {
    opacity: 0.45;
}

.agenda-panel:has(#capaCalendario:not(:checked)) .capa-calendario,
.agenda-panel:has(#capaMeet:not(:checked)) .capa-meet,
.agenda-panel:has(#capaDocumentos:not(:checked)) .capa-documentos,
.agenda-panel:has(#capaActividad:not(:checked)) .capa-actividad,
.agenda-panel:has(#capaFoco:not(:checked)) .capa-foco {
    display: none;
}

/* --- Fila de lo que cae fuera del encuadre ------------------------------ */

.agenda-fuera {
    height: 26px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 3px;
    overflow: hidden;
}

.agenda-fuera-titulo {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-tenue);
}

.agenda-chip {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--acento-suave);
    color: var(--acento);
    white-space: nowrap;
    cursor: help;
    font-variant-numeric: tabular-nums;
}

.agenda-chip.documentos,
.agenda-chip.actividad {
    background: var(--agenda-doc-suave);
    color: var(--agenda-doc);
}

.agenda-chip.meet {
    background: var(--acento-suave);
    color: var(--agenda-meet);
}

.agenda-chip.foco {
    background: var(--bien-suave);
    color: var(--bien);
}

.agenda-chip.mas {
    background: var(--fondo);
    color: var(--texto-tenue);
}

/* --- Leyenda y navegacion de semana ------------------------------------- */

.agenda-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--texto-tenue);
    align-items: center;
}

.agenda-muestra {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--acento);
    vertical-align: -1px;
    margin-right: 2px;
    flex: 0 0 auto;
}

.agenda-muestra.externo {
    background: var(--agenda-externo);
}

.agenda-muestra.meet {
    background: var(--agenda-meet);
}

.agenda-muestra.documentos {
    background: var(--agenda-doc-suave);
    border: 1px solid var(--agenda-doc);
}

.agenda-muestra.actividad {
    background: var(--agenda-doc);
    border-radius: 2px;
}

.agenda-muestra.actividad.vista {
    background: var(--borde);
    border: 1px solid var(--texto-tenue);
}

.agenda-muestra.actividad.permiso {
    background: var(--agenda-externo);
}

.agenda-muestra.foco {
    background: var(--bien-suave);
    border-left: 3px solid var(--bien);
}

.semana-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.semana-nav a {
    color: var(--acento);
    text-decoration: none;
    font-weight: 600;
}

.semana-nav .deshabilitado {
    color: var(--borde);
}

.semana-rango {
    color: var(--texto-tenue);
    white-space: nowrap;
}

/* --- Barras y etiquetas ----------------------------------------------- */

.barra {
    background: var(--fondo);
    border-radius: 4px;
    height: 7px;
    overflow: hidden;
    min-width: 70px;
}

.barra span {
    display: block;
    height: 100%;
    background: var(--acento);
}

.barra.roja span { background: var(--alerta); }

.pastilla {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--fondo);
    color: var(--texto-tenue);
    border: 1px solid var(--borde);
}

.pastilla.alerta { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.pastilla.bien { background: var(--bien-suave); color: var(--bien); border-color: transparent; }

/* --- Avisos y vacíos --------------------------------------------------- */

.aviso {
    border-radius: var(--radio);
    padding: 11px 15px;
    margin-bottom: 14px;
    font-size: 14px;
    border: 1px solid var(--borde);
    background: var(--superficie);
}

.aviso-success { background: var(--bien-suave); border-color: transparent; color: var(--bien); }
.aviso-error { background: var(--alerta-suave); border-color: transparent; color: var(--alerta); }
.aviso-warning { background: #fef6e7; border-color: transparent; color: #8a5a00; }

.vacio {
    text-align: center;
    padding: 44px 20px;
    color: var(--texto-tenue);
}

.vacio i {
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* --- Filtros ----------------------------------------------------------- */

.filtros {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.filtros a {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--borde);
    color: var(--texto-tenue);
    text-decoration: none;
    background: var(--superficie);
}

.filtros a.activo {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
    font-weight: 600;
}

/* --- Copiloto ---------------------------------------------------------- */

.conversacion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.mensaje {
    max-width: 780px;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.mensaje.user {
    align-self: flex-end;
    background: var(--acento);
    color: #fff;
    border-bottom-right-radius: 3px;
}

.mensaje.model {
    align-self: flex-start;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-bottom-left-radius: 3px;
}

.caja-pregunta {
    display: flex;
    gap: 10px;
}

.caja-pregunta input[type="text"] {
    flex: 1;
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto);
    border-radius: 9px;
    padding: 11px 14px;
    font-size: 14.5px;
}

.caja-pregunta input[type="text"]:focus {
    outline: none;
    border-color: var(--acento);
}

.boton {
    background: var(--acento);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.boton:hover { filter: brightness(1.08); color: #fff; }

.boton.secundario {
    background: transparent;
    border: 1px solid var(--borde);
    color: var(--texto-tenue);
}

.boton.secundario:hover { color: var(--texto); }

.sugerencia {
    border: 1px solid var(--borde);
    background: var(--superficie);
    border-radius: 20px;
    padding: 6px 13px;
    font-size: 13px;
    color: var(--texto-tenue);
    cursor: pointer;
}

.sugerencia:hover { border-color: var(--acento); color: var(--acento); }

/* --- Login ------------------------------------------------------------- */

.login-caja {
    max-width: 380px;
    margin: 90px auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 30px;
}

.login-caja h1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-caja p.sub {
    color: var(--texto-tenue);
    font-size: 13.5px;
    margin-bottom: 22px;
}

.login-caja label {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-tenue);
    display: block;
    margin-bottom: 5px;
}

.login-caja input {
    width: 100%;
    border: 1px solid var(--borde);
    background: var(--fondo);
    color: var(--texto);
    border-radius: 9px;
    padding: 10px 13px;
    margin-bottom: 15px;
    font-size: 14.5px;
}

.login-caja input:focus { outline: none; border-color: var(--acento); }

.grafico {
    position: relative;
    height: 280px;
}

.grid-dos {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
}

.grid-tres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

/* Los enlaces pasan a su propia linea antes de que empiecen a cortarse:
   media palabra visible al borde de la barra parece un error, no un menu
   desplazable. */
@media (max-width: 1100px) {
    .barra-interna {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 24px;
        gap: 10px 18px;
    }

    .enlaces {
        order: 3;
        flex: 1 1 100%;
        overflow-x: auto;
    }
}

@media (max-width: 900px) {
    .grid-dos { grid-template-columns: 1fr; }
    .contenido { padding: 18px 16px 48px; }
    .barra-interna { padding: 10px 16px; }
}

/* --- Selector de rango de fechas --------------------------------------- */

.rango {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.rango .campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rango label {
    font-size: 12px;
    font-weight: 600;
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rango input[type="date"],
.rango select {
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 14px;
    font-family: inherit;
    min-width: 150px;
}

.rango input[type="date"]:focus,
.rango select:focus {
    outline: none;
    border-color: var(--acento);
}

/* El icono del calendario es negro en modo oscuro y se pierde. */
[data-bs-theme="dark"] .rango input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.7);
}

.atajos {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.atajos .sugerencia {
    text-decoration: none;
}

.atajos .sugerencia.activo {
    border-color: var(--acento);
    color: var(--acento);
    font-weight: 600;
}

@media (max-width: 720px) {
    .atajos { margin-left: 0; width: 100%; }
    .rango .campo { flex: 1 1 45%; }
}

/* --- Bloques de resumen ------------------------------------------------
   Una cifra principal por bloque y su desglose dentro, en vez de tarjetas
   todas iguales: "internas" y "con externos" no son pares de "generadas",
   son su detalle, y el diseno debe decirlo. */

.resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.bloque {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px 18px;
}

.bloque-titulo {
    color: var(--texto-tenue);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.bloque-cifra {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 8px 0 10px;
    font-variant-numeric: tabular-nums;
}

.bloque-desglose {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12.5px;
    color: var(--texto-tenue);
    border-top: 1px solid var(--borde);
    padding-top: 9px;
}

.bloque-desglose b {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.bloque-desglose .tenue,
.bloque-desglose .tenue b { color: var(--texto-tenue); }

/* --- Cabecera de panel con nota plegable -------------------------------- */

.panel-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.panel-cabecera h2 { margin: 0; }

.nota-plegable summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--texto-tenue);
    list-style: none;
}

.nota-plegable summary::before {
    content: "\f431";
    font-family: "bootstrap-icons";
    margin-right: 6px;
    font-size: 12px;
}

.nota-plegable summary:hover { color: var(--acento); }

.nota-plegable p {
    font-size: 13px;
    color: var(--texto-tenue);
    line-height: 1.5;
    max-width: 70ch;
    margin: 10px 0 0;
}

/* --- Tabla de actividad ------------------------------------------------- */

.tabla-actividad thead .grupos th {
    padding-bottom: 2px;
    border-bottom: none;
    font-size: 11px;
    color: var(--texto-tenue);
}

.tabla-actividad thead .grupo {
    text-align: center;
    border-bottom: 2px solid var(--acento-suave);
    letter-spacing: 0.05em;
}

/* La cabecera acompana al desplazamiento. Los desplazamientos se apilan bajo
   la barra superior (59 px): primero la fila de grupos, y bajo ella la de
   columnas; invertirlos hace que una tape a la otra. */
.tabla-actividad thead th {
    position: sticky;
    background: var(--superficie);
    z-index: 2;
}

/* Un ancestro con overflow hace que `sticky` se ancle a ESE contenedor y no
   al viewport. Por eso la tabla larga vive en una caja con altura propia y
   los desplazamientos se miden desde el borde de la caja, no desde la barra
   superior. */
.tabla-alta {
    max-height: 68vh;
    overflow: auto;
}

.tabla-actividad thead .grupos th { top: 0; }
.tabla-actividad thead tr:last-child th { top: 26px; }

/* Sin esto se ve el contenido de la tabla por debajo de la cabecera fija. */
.tabla-actividad thead tr:last-child th { box-shadow: 0 1px 0 var(--borde); }

.tabla-actividad td { padding: 7px 10px; }

.tabla-actividad .persona { white-space: nowrap; }

/* Un cero no aporta informacion: se atenua para que resalte lo que si. */
.tabla-actividad .cero { color: var(--borde); }

.tabla-actividad tr.corte td { border-top: 2px solid var(--borde); }

.tabla-actividad .tenue { color: var(--texto-tenue); white-space: nowrap; }

/* --- Barra superior: sin barra de desplazamiento a la vista ------------- */

.enlaces { scrollbar-width: none; }
.enlaces::-webkit-scrollbar { display: none; }

/* Encabezados que se explican al pasar el cursor: la ayuda debe verse
   disponible, no descubrirse por casualidad. */
.tabla-actividad thead th[title] {
    cursor: help;
    text-decoration: underline dotted var(--borde);
    text-underline-offset: 4px;
}

.tabla-actividad thead th[title]:hover {
    color: var(--texto);
    text-decoration-color: var(--acento);
}

/* --- La fila bajo el cursor manda sobre las graficas -------------------- */

.tabla-actividad tbody tr:hover {
    background: var(--acento-suave);
}

.tabla-actividad tbody tr:hover .cero {
    color: var(--texto-tenue);
}

/* El periodo va escrito en todas las filas, pero mientras la tabla conserve
   su orden agrupado solo se ve en la primera fila de cada bloque, que es como
   se leia antes. Al ordenar por una columna el bloque deja de existir (el
   encabezado activo queda con aria-sort): ahi se muestra el periodo de cada
   fila y sobra la linea divisoria, que ya no separa nada. */
.tabla-actividad td.periodo.repetido {
    visibility: hidden;
}

.tabla-actividad:has(thead th[aria-sort="ascending"], thead th[aria-sort="descending"]) td.periodo.repetido {
    visibility: visible;
}

.tabla-actividad:has(thead th[aria-sort="ascending"], thead th[aria-sort="descending"]) tr.corte td {
    border-top: none;
}

/* Nombre de la persona enfocada, junto al titulo del grafico. */
.foco {
    color: var(--acento);
    font-weight: 600;
}

.titulo-seccion {
    font-size: 15px;
    font-weight: 650;
    margin: 26px 0 14px;
}

/* --- Tabla a la izquierda, graficas a la derecha ------------------------ */
/* La tabla es el mando: se recorre con el cursor y las graficas de al lado
   responden. Por eso va fija en su columna mientras la de graficas se
   desplaza; asi la fila y su grafico nunca quedan a dos pantallas. */

.disposicion {
    display: grid;
    /* La tabla se lleva la mayor parte: son doce columnas y apretarlas la
       vuelve ilegible. A las graficas les basta con no bajar de 440 px. */
    grid-template-columns: minmax(0, 1.45fr) minmax(440px, 1fr);
    gap: 18px;
    align-items: start;
}

.columna-tabla {
    position: sticky;
    top: 59px;
}

.columna-tabla .panel {
    margin-bottom: 0;
}

.columna-graficas {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.columna-graficas .panel {
    margin-bottom: 0;
}

.columna-graficas .grafico {
    height: 230px;
}

/* La tabla ocupa el alto util de la pantalla y se desplaza por dentro. */
.columna-tabla .tabla-alta {
    max-height: max(260px, calc(100vh - 210px));
}

/* En una columna estrecha los nombres largos parten la fila en dos. */
.columna-tabla .tabla-actividad .persona a {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 1200px) {
    /* Sin ancho suficiente, dos columnas dejan ambas inservibles: se apilan
       y la tabla vuelve a mandar arriba. */
    .disposicion {
        grid-template-columns: 1fr;
    }

    .columna-tabla {
        position: static;
    }

    .columna-tabla .tabla-alta {
        max-height: 55vh;
    }
}

}

/* Un guion, no un cero: la fuente no cubre ese periodo. Se marca con la misma
   linea punteada que los encabezados con explicacion, para que se entienda
   que hay algo que leer al pasar el cursor. */
.sindato {
    color: var(--borde);
    border-bottom: 1px dotted var(--borde);
    cursor: help;
}

.cobertura {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--tenue);
}