/* --------------------------------------------------------------------------
   CRONOGEST - hoja de estilos
   -------------------------------------------------------------------------- */

/* Paleta sacada del logotipo (assets/logo.svg): azul pizarra para el texto y
   la marca, azul intenso para lo que se pulsa y verde lima solo de adorno
   (sobre blanco no llega al contraste mínimo para leerse como texto). */
:root {
    --fondo: #f4f6fa;
    --panel: #ffffff;
    --texto: #1c3c50;
    --texto-suave: #5e6e7c;
    --borde: #e2e6ef;
    --primario: #005bcf;
    --primario-oscuro: #004aa8;
    --primario-suave: #e6effb;
    --primario-borde: #c3d8f4;
    --acento: #95c71f;
    --ok: #16a34a;
    --ok-fondo: #e8f7ee;
    --error: #dc2626;
    --error-fondo: #fdecec;
    --aviso: #d97706;
    --aviso-fondo: #fdf4e3;
    --radio: 10px;
    --sombra: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 20px; flex: 1; }

/* --- Barra superior ---------------------------------------------------- */
.barra { background: var(--panel); border-bottom: 1px solid var(--borde); }
.barra-inner {
    max-width: 1120px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 24px; min-height: 60px; flex-wrap: wrap;
}
/* Logotipo con el nombre del portal debajo. */
.marca {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0;
    font-weight: 700; font-size: 12px; line-height: 1.2; color: var(--texto); text-align: center;
}
.marca:hover { text-decoration: none; }
.marca-logo { height: 64px; width: auto; display: block; }
.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; align-items: center; }
.menu a {
    padding: 8px 12px; border-radius: 8px; color: var(--texto-suave); font-weight: 500;
}
.menu a:hover { background: var(--fondo); text-decoration: none; }
.menu a.activo, .desplegable > summary.activo {
    background: var(--primario-suave); color: var(--primario-oscuro);
    box-shadow: inset 0 -3px 0 var(--acento);
}
/* Botón «Menú»: solo en el móvil (abajo, @media). Con .barra delante, para
   ganar a .btn, que va más abajo. */
.barra .menu-abrir, .barra .menu-boton { display: none; }

/* Grupos desplegables del menú y de la persona (<details>, templates/header.php). */
.desplegable { position: relative; }
.desplegable > summary {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px;
    list-style: none; cursor: pointer; color: var(--texto-suave); font-weight: 500; user-select: none;
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after {
    content: ""; width: 6px; height: 6px; margin-left: 2px; flex: none;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.desplegable[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.desplegable > summary:hover, .desplegable[open] > summary:not(.activo) { background: var(--fondo); }
.desplegable > summary:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.desplegable-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 230px;
    display: flex; flex-direction: column; gap: 2px; padding: 6px;
    background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
}
.desplegable-derecha > .desplegable-panel { left: auto; right: 0; }
.desplegable-panel a {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: 6px; color: var(--texto); font-weight: 500; white-space: nowrap;
}
.desplegable-panel a:hover { background: var(--fondo); text-decoration: none; }
.desplegable-panel a.activo {
    background: var(--primario-suave); color: var(--primario-oscuro); box-shadow: inset 3px 0 0 var(--acento);
}
.desplegable-seccion {
    padding: 8px 10px 2px; font-size: 11px; font-weight: 600; color: var(--texto-suave);
    text-transform: uppercase; letter-spacing: .4px;
}
.desplegable-seccion:not(:first-child) { border-top: 1px solid var(--borde); margin-top: 4px; padding-top: 10px; }
.desplegable-panel .selector-idioma { padding: 2px 10px 6px; }
.desplegable-panel .selector-idioma select { width: 100%; }
/* «Salir» es un formulario (logout.php solo admite POST): su botón, como un enlace más del panel. */
.desplegable-panel .desplegable-salir { border-top: 1px solid var(--borde); margin: 4px 0 0; padding-top: 4px; }
.desplegable-panel .desplegable-salir button {
    display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
    color: var(--texto); font: inherit; font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer;
}
.desplegable-panel .desplegable-salir button:hover,
.desplegable-panel .desplegable-salir button:focus-visible { background: var(--fondo); }
/* El de la persona: su nombre y rol, en dos líneas. */
.desplegable-usuario > summary { padding: 4px 8px; color: var(--texto); }
.badge {
    display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px;
    background: var(--aviso); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px;
    text-align: center; vertical-align: middle;
}

/* Zona del usuario: avisos y su menú (perfil, idioma, «Salir») arriba; empresa abajo. */
.usuario { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 6px 0; }
.usuario-fila { display: flex; align-items: center; gap: 8px; }
.usuario-empresa { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.empresa-logo { height: 32px; width: auto; max-width: 96px; object-fit: contain; }
.avisos {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; font-size: 18px; line-height: 1;
}
.avisos:hover { background: var(--fondo); text-decoration: none; }
.avisos.activo { background: var(--primario-suave); }
.avisos .badge { position: absolute; top: -4px; right: -6px; }
.selector-empresa select {
    width: auto; min-width: 130px; padding: 6px 10px; font-size: 13px; font-weight: 600;
    background: var(--primario-suave); border-color: var(--primario-borde); color: var(--primario-oscuro);
}
.selector-idioma select {
    width: auto; padding: 6px 8px; font-size: 13px;
}
.login-idioma { display: flex; justify-content: center; margin-bottom: 14px; }
.empresa-fija {
    font-size: 13px; font-weight: 600; color: var(--primario-oscuro);
    background: var(--primario-suave); border-radius: 8px; padding: 6px 10px; white-space: nowrap;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.usuario-nombre { display: flex; flex-direction: column; color: var(--texto); font-weight: 600; line-height: 1.2; }
.usuario-nombre small { color: var(--texto-suave); font-weight: 400; font-size: 12px; }

/* --- Pie --------------------------------------------------------------- */
.pie { border-top: 1px solid var(--borde); background: #fff; color: var(--texto-suave); font-size: 13px; }
.pie .contenedor { display: flex; justify-content: space-between; padding: 14px 20px; }

/* --- Bloques ----------------------------------------------------------- */
.panel {
    background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 20px; margin-bottom: 20px;
}
.panel h2 { margin: 0 0 16px; font-size: 17px; }
.panel h3 { margin: 0 0 12px; font-size: 15px; }

h1 { font-size: 22px; margin: 0 0 4px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 20px; }

.rejilla { display: grid; gap: 20px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* --- Métricas ---------------------------------------------------------- */
.metrica { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.metrica .valor { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.metrica .etiqueta { color: var(--texto-suave); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }

/* --- Reloj y fichaje --------------------------------------------------- */
.reloj { font-size: 46px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.reloj-fecha { color: var(--texto-suave); text-transform: capitalize; }
/* Logotipo junto al reloj (dashboard): ocupa la altura del reloj y la fecha,
   sin aportar altura propia, así que el panel no crece. */
/* El reloj y la fecha conservan su ancho natural (la fecha no se parte en dos
   líneas); el logotipo ocupa lo que queda a la derecha. */
.reloj-bloque { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 16px; }
.reloj-logo { position: relative; min-width: 0; }
.reloj-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.acciones-fichaje { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.sin-pausas { color: var(--texto-suave); font-size: 13px; font-style: italic; }

/* --- Botones ----------------------------------------------------------- */
.btn {
    display: inline-block; border: 1px solid transparent; border-radius: 8px;
    padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
    background: var(--primario); color: #fff; text-align: center;
}
.btn:hover { background: var(--primario-oscuro); text-decoration: none; color: #fff; }
.btn-sec { background: var(--panel); color: var(--texto); border-color: var(--borde); }
.btn-sec:hover { background: var(--fondo); color: var(--texto); }
.btn-ok { background: var(--ok); }
.btn-ok:hover { background: #15803d; }
.btn-peligro { background: var(--error); }
.btn-peligro:hover { background: #b91c1c; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-grande { padding: 16px 28px; font-size: 17px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Formularios ------------------------------------------------------- */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], input[type=number], input[type=time], select, textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: 15px; font-family: inherit; background: var(--panel); color: var(--texto);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(0, 91, 207, .15);
}
.ayuda { color: var(--texto-suave); font-size: 12px; margin-top: 4px; }
/* Selector de color (Configuración > Colores). */
input[type=color].campo-color {
    width: 72px; height: 38px; padding: 3px; border: 1px solid var(--borde); border-radius: 8px;
    background: var(--panel); cursor: pointer;
}
select[multiple] { height: auto; padding: 6px; }
select[multiple] option { padding: 4px 6px; border-radius: 4px; }
select[multiple] option:checked { background: var(--primario-suave); color: var(--primario-oscuro); font-weight: 600; }
/* Listas de casillas (listaCasillas()): selección múltiple con un clic normal. */
.lista-casillas {
    border: 1px solid var(--borde); border-radius: 8px; background: var(--panel);
    overflow-y: auto; padding: 4px;
}
.lista-casillas label.casilla {
    display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 5px 6px;
    border-radius: 6px; font-weight: 400; font-size: 14px; cursor: pointer;
}
.lista-casillas label.casilla:hover { background: var(--fondo); }
/* display:flex pisaba el atributo hidden: el buscador no ocultaba nada. */
.lista-casillas label.casilla[hidden], .lista-casillas-pie[hidden], .lista-casillas-buscar[hidden] { display: none; }
.lista-casillas label.casilla:has(input:checked) { background: var(--primario-suave); color: var(--primario-oscuro); font-weight: 600; }
.lista-casillas label.casilla small { color: var(--texto-suave); font-weight: 400; }
.lista-casillas input[type=checkbox] { margin-top: 3px; flex: none; }
.lista-casillas-buscar { width: 100%; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 6px; font: inherit; font-size: 14px; }
/* Logotipo de la empresa (admin/empresas.php). */
.logo-actual { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.logo-actual img { max-width: 96px; max-height: 96px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; padding: 4px; }
.logo-miniatura { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
/* Logotipo enlazado a la web de la empresa (enlazarLogoWeb): el enlace no
   añade hueco bajo la imagen ni cambia cómo se coloca. */
.logo-enlace { display: inline-flex; flex: none; vertical-align: middle; }
.logo-enlace:hover { opacity: .85; }
/* Paginación de listados (controlesPaginacion()). */
.paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; font-size: 13px; color: var(--texto-suave); }
.paginacion-tamano { display: flex; align-items: center; gap: 6px; margin: 0; }
.paginacion-tamano label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.paginacion-tamano select { width: auto; padding: 4px 8px; }
.paginacion-paginas { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.paginacion-paginas a, .paginacion-actual, .paginacion-hueco {
    min-width: 32px; padding: 5px 9px; border-radius: 6px; text-align: center; font-variant-numeric: tabular-nums;
}
.paginacion-paginas a { border: 1px solid var(--borde); background: var(--panel); color: var(--texto); }
.paginacion-paginas a:hover { background: var(--fondo); text-decoration: none; }
.paginacion-actual { background: var(--primario); color: #fff; font-weight: 600; border: 1px solid var(--primario); }
.paginacion-hueco { padding-inline: 2px; min-width: 0; }
.lista-casillas-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--texto-suave); }
.filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filtros .campo { margin-bottom: 0; }

/* --- Tablas ------------------------------------------------------------ */
.tabla-scroll { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabla th, table.tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borde); }
table.tabla th { color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
table.tabla tbody tr:hover { background: #fafbfe; }
/* Avisos sin abrir: fondo resaltado, que no se pierde al pasar el ratón. */
table.tabla tr.sin-abrir, table.tabla tbody tr.sin-abrir:hover { background: var(--primario-suave); }
table.tabla td.num, table.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Acciones de una fila, repartidas en varias líneas sin que se partan. */
.acciones-fila { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
.acciones-fila + .acciones-fila { margin-top: 6px; }

/* Cabeceras ordenables: parecen cabeceras, no enlaces, hasta que se apunta. */
table.tabla th a { color: inherit; white-space: nowrap; }
table.tabla th a:hover { color: var(--primario); text-decoration: none; }
.vacio { text-align: center; color: var(--texto-suave); padding: 28px 0; }

/* --- Etiquetas de estado ----------------------------------------------- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-trabajando { background: var(--ok-fondo); color: #12692f; }
.pill-pausa { background: var(--aviso-fondo); color: #92400e; }
.pill-fuera { background: #eef0f5; color: var(--texto-suave); }
.pill-incidencia { background: var(--error-fondo); color: #991b1b; }
.pill-admin { background: #ede9fe; color: #5b21b6; }
.pill-gestor { background: #dcfce7; color: #166534; }
.pill-rrhh { background: #e0f2fe; color: #075985; }
.pill-representante { background: #fef3c7; color: #92400e; }
.pill-empleado { background: #eef0f5; color: var(--texto-suave); }
.pill-excluido { background: #f1f5f9; color: #475569; }

/* --- Avisos ------------------------------------------------------------ */
.alerta { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; }
.alerta-ok { background: var(--ok-fondo); color: #12692f; border-color: #bfe6cd; }
.alerta-error { background: var(--error-fondo); color: #991b1b; border-color: #f5c6c6; }
.alerta-aviso { background: var(--aviso-fondo); color: #92400e; border-color: #f2ddb4; }

/* --- Login ------------------------------------------------------------- */
.login-caja { max-width: 380px; margin: 8vh auto; }
.login-caja .panel { padding: 28px; }
.login-titulo { text-align: center; margin-bottom: 22px; }
.login-logo { height: 96px; width: auto; display: block; margin: 0 auto 14px; }
.login-logo-enlace { display: block; width: fit-content; margin: 0 auto 14px; border-radius: 10px; }
.login-logo-enlace .login-logo { margin: 0; }
.login-logo-enlace:focus-visible { outline: 3px solid var(--primario); outline-offset: 4px; }
.login-titulo h1 { font-size: 20px; }
.login-titulo p { color: var(--texto-suave); margin: 4px 0 0; font-size: 14px; }

/* --- Varios ------------------------------------------------------------ */
.cabecera-pagina { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.barra-progreso { height: 8px; background: #eef0f5; border-radius: 999px; overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--primario); }
.texto-suave { color: var(--texto-suave); }
.texto-error { color: var(--error); }
.mt-0 { margin-top: 0; }
.mt-16 { margin-top: 16px; }

/* --- Documentos oficiales (resumen del art. 35.5, informes) ------------- */
.documento { border-top: 4px solid var(--primario); }
.doc-cabecera {
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    border-bottom: 1px solid var(--borde); padding-bottom: 14px; margin-bottom: 16px;
}
.doc-cabecera p { margin: 4px 0 0; font-size: 13px; }
/* Logotipo de la empresa en el resumen mensual (también al imprimir). */
.doc-empresa { display: flex; align-items: flex-start; gap: 14px; }
.doc-logo { height: 64px; width: auto; max-width: 160px; object-fit: contain; flex: none; }
.doc-pie { border-top: 1px solid var(--borde); padding-top: 14px; font-size: 13px; }
.doc-pie code { background: var(--fondo); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

/* --- Impresión: solo el documento, sin cromo de la aplicación ----------- */
/* --- Registro mensual (calendario) ------------------------------------- */
.calendario { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.calendario th {
    color: var(--texto-suave); font-size: 11px; text-transform: uppercase;
    letter-spacing: .4px; font-weight: 600; padding: 2px 0; text-align: center;
}
.cal-dia {
    height: 78px; vertical-align: top; padding: 6px; border-radius: 8px;
    border: 1px solid var(--borde); background: var(--panel); overflow: hidden;
}
.cal-numero { display: block; font-weight: 700; font-size: 14px; line-height: 1.1; }
.cal-detalle { display: block; font-size: 10px; line-height: 1.3; margin-top: 2px; word-break: break-word; }
.cal-horas { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-aviso { color: var(--error); font-weight: 600; }

/* Los tres colores del registro. El texto de la celda repite el concepto,
   para que el dato no dependa solo de distinguir el color. */
.cal-fichado { background: var(--ok-fondo); border-color: #bfe6cd; color: #12692f; }
.cal-ausencia { background: var(--aviso-fondo); border-color: #f2ddb4; color: #92400e; }
/* Bajas (IT, nacimiento) y suspensiones del contrato, distinguibles del resto de ausencias. */
.cal-ausencia.cal-baja { background: #efe9fb; border-color: #d6c8f3; color: #5b3a9e; }
.cal-ausencia.cal-suspension { background: #eceff3; border-color: #cfd6df; color: #475569; }
.cal-festivo { background: var(--error-fondo); border-color: #f5c6c6; color: #991b1b; }
.cal-descanso { background: #f7f8fb; border-style: dashed; color: var(--texto-suave); }
.cal-sin-fichar { background: #fff; }
.cal-fuera-mes { background: transparent; border-color: transparent; }

.cal-leyenda {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    margin-top: 12px; font-size: 12px; color: var(--texto);
}
.cal-muestra {
    display: inline-block; width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid var(--borde); vertical-align: -2px; margin-right: 4px;
}

/* --- Calendario anual (calendario-anual.php) ---------------------------- */
/* Colores de las categorías de ausencia y de los estados del día. El gráfico
   (assets/calendario-anual.js) los lee de aquí: la leyenda y el dibujo no se
   pueden separar. La paleta distingue las nueve categorías entre sí; el verde
   claro de lo trabajado es el mismo concepto que el del registro mensual. */
.ca {
    --ca-vacaciones: #2a78d6;
    --ca-incapacidad: #e34948;
    --ca-nacimiento: #e87ba4;
    --ca-permiso_retribuido: #1baf7a;
    --ca-permiso_no_retribuido: #eda100;
    --ca-suspension: #888780;
    --ca-compensacion: #6250d6;
    --ca-incumplimiento: #eb6834;
    --ca-otras: #008300;
    /* Colores de más para las categorías que se crean en Tipos de ausencia
       (PALETA_CATEGORIAS en src/ausencias.php). */
    --ca-c-turquesa: #0f9fa8;
    --ca-c-cielo: #57b8ec;
    --ca-c-indigo: #3b3f99;
    --ca-c-lila: #b07ad9;
    --ca-c-granate: #9b2c4a;
    --ca-c-marron: #8a5a35;
    --ca-c-oliva: #7a8b1f;
    --ca-c-pizarra: #4f6475;
    --ca-trabajado: #cde9d5;
    --ca-festivo: rgba(28, 60, 80, .13);
    --ca-finde: rgba(28, 60, 80, .05);
    --ca-fuera: rgba(28, 60, 80, .22);
    --ca-linea: #c9d0dc;
    --ca-rejilla: #e6e9f0;
}
.ca-controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ca-controles .campo { margin-bottom: 0; }
.ca-controles select { width: auto; padding: 7px 10px; font-size: 14px; }
.ca-casilla { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding-bottom: 8px; }
.ca-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ca-kpis .metrica .valor { font-size: 22px; font-variant-numeric: tabular-nums; }
.ca-kpis .metrica .etiqueta { font-size: 11px; }
.ca-leyenda { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ca-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--borde); background: var(--panel); color: var(--texto); font: inherit; font-size: 12px;
}
.ca-chip:hover { background: var(--fondo); }
.ca-chip:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.ca-chip[aria-pressed="false"] { color: var(--texto-suave); text-decoration: line-through; }
.ca-chip[aria-pressed="false"] .ca-muestra { background: transparent; box-shadow: inset 0 0 0 1px var(--texto-suave); }
.ca-chip-n { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.ca-estados { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 12px; color: var(--texto-suave); }
.ca-estados span { display: inline-flex; align-items: center; gap: 6px; }
.ca-muestra { display: inline-block; width: 11px; height: 11px; border-radius: 2px; flex: none; }
.ca-m-vacaciones { background: var(--ca-vacaciones); }
.ca-m-incapacidad { background: var(--ca-incapacidad); }
.ca-m-nacimiento { background: var(--ca-nacimiento); }
.ca-m-permiso_retribuido { background: var(--ca-permiso_retribuido); }
.ca-m-permiso_no_retribuido { background: var(--ca-permiso_no_retribuido); }
.ca-m-suspension { background: var(--ca-suspension); }
.ca-m-compensacion { background: var(--ca-compensacion); }
.ca-m-incumplimiento { background: var(--ca-incumplimiento); }
.ca-m-otras { background: var(--ca-otras); }
.ca-m-c-turquesa { background: var(--ca-c-turquesa); }
.ca-m-c-cielo { background: var(--ca-c-cielo); }
.ca-m-c-indigo { background: var(--ca-c-indigo); }
.ca-m-c-lila { background: var(--ca-c-lila); }
.ca-m-c-granate { background: var(--ca-c-granate); }
.ca-m-c-marron { background: var(--ca-c-marron); }
.ca-m-c-oliva { background: var(--ca-c-oliva); }
.ca-m-c-pizarra { background: var(--ca-c-pizarra); }
.ca-m-trabajado { background: var(--ca-trabajado); }
.ca-m-sin-fichar { background: linear-gradient(transparent 60%, var(--texto-suave) 60%); }
.ca-m-pendiente { background: var(--ca-vacaciones); opacity: .35; }
.ca-m-horas { background: linear-gradient(transparent 50%, var(--ca-permiso_retribuido) 50%); }
.ca-m-festivo { background: var(--ca-festivo); }
.ca-m-finde { background: var(--ca-finde); box-shadow: inset 0 0 0 1px var(--borde); }
.ca-m-fuera { background: repeating-linear-gradient(135deg, var(--ca-fuera) 0 2px, transparent 2px 4px); }
.ca-m-hoy { width: 2px; background: var(--texto); }
.ca-grafico { position: relative; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; background: var(--panel); }
/* Barra del gráfico, dentro de su marco: tramo visible a la izquierda, zoom y «Hoy» a la derecha. */
.ca-barra {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px;
    border-bottom: 1px solid var(--borde); background: var(--fondo); font-size: 13px; color: var(--texto-suave);
}
.ca-rango { font-variant-numeric: tabular-nums; }
.ca-zoom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ca-zoom input[type=range] { width: 120px; }
.ca-zoom .btn-sm { padding: 3px 10px; line-height: 1.3; }
.ca-lienzos { display: flex; }
.ca-nombres { display: block; flex: none; }
.ca-desplazable { flex: 1; min-width: 0; overflow-x: auto; }
.ca-desplazable canvas { display: block; }
.ca-tip {
    position: absolute; z-index: 5; pointer-events: none; max-width: 320px; padding: 7px 10px;
    background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .14); font-size: 12px; line-height: 1.5; color: var(--texto);
}
.ca-tip .ca-muestra { vertical-align: -1px; margin-right: 5px; }
.ca-tip-nombre { font-weight: 600; }
.ca-tip-suave { color: var(--texto-suave); font-weight: 400; }

@media print {
    .barra, .pie, .no-imprimir { display: none !important; }
    body { background: #fff; font-size: 12px; }
    .contenedor { max-width: none; padding: 0; }
    .panel { box-shadow: none; border: none; margin: 0; padding: 0; }
    .documento { border-top: none; }
    .metrica { border: 1px solid #ccc; }
    table.tabla { font-size: 11px; }
    table.tabla th, table.tabla td { padding: 4px 6px; }
    a[href]::after { content: ""; }
    /* El resumen del art. 35.5 ET se imprime y se entrega: los tres colores
       del registro mensual tienen que sobrevivir al papel. */
    .calendario, .cal-dia, .cal-muestra { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .cal-dia { height: 62px; }
    .calendario { border-spacing: 2px; }
}

/* --- Hilo de incidencias ----------------------------------------------- */
.hilo { display: flex; flex-direction: column; gap: 12px; }
.mensaje {
    border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px;
    background: var(--fondo); max-width: 85%;
}
/* Los mensajes propios se alinean a la derecha para leer el hilo de un vistazo. */
.mensaje-propio { align-self: flex-end; background: var(--primario-suave); border-color: var(--primario-borde); }
.mensaje-resolucion { background: var(--ok-fondo); border-color: #bfe6cd; }
.mensaje-meta { font-size: 12px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mensaje-texto { font-size: 14px; line-height: 1.5; word-break: break-word; }

/* --- Utilidades --------------------------------------------------------------
   La política de contenido no admite estilos en línea (style="…"): lo que
   antes iba en cada etiqueta tiene aquí su clase. */
[hidden] { display: none !important; }
.t-11 { font-size: 11px; }
.t-12 { font-size: 12px; }
.t-13 { font-size: 13px; }
.t-14 { font-size: 14px; }
.t-16 { font-size: 16px; }
.normal { font-weight: 400; }
.negrita { font-weight: 600; }
.mono { font-family: monospace; }
.sin-salto { white-space: nowrap; }
.partir { word-break: break-all; }
.a-izda { text-align: left; }
.a-dcha { text-align: right; }
.a-centro { text-align: center; }
.en-linea { display: inline; }
.en-bloque { display: block; }
.ancho-auto { width: auto; }
.ancho-total { width: 100%; }
.w-80 { width: 80px; }
.w-90 { width: 90px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-130 { width: 130px; }
.w-200 { width: 200px; }
.w-7em { width: 7em; }
.w-30p { width: 30%; }
.w-35p { width: 35%; }
.min-200 { min-width: 200px; }
.min-220 { min-width: 220px; }
.min-230 { min-width: 230px; }
.min-240 { min-width: 240px; }
.min-260 { min-width: 260px; }
.min-300 { min-width: 300px; }
.min-420 { min-width: 420px; }
.max-220 { max-width: 220px; }
.max-280 { max-width: 280px; }
.max-320 { max-width: 320px; }
.flex-1 { flex: 1; }
.m-0 { margin: 0; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mr-16 { margin-right: 16px; }
.margen-2-0-0 { margin: 2px 0 0; }
.margen-0-0-6 { margin: 0 0 6px; }
.margen-4-6 { margin: 4px 6px; }
.hueco-6 { gap: 6px; }
.hueco-12 { gap: 12px; }
.opaco { opacity: .6; }
.opaco-55 { opacity: .55; }
.justificar-entre { justify-content: space-between; }
.justificar-final { justify-content: flex-end; }
.alinear-inicio { align-items: flex-start; }
.alinear-propio-final { align-self: flex-end; }
.base-total { flex-basis: 100%; }
.columna-completa { grid-column: 1 / -1; }
.flotar-dcha { float: right; }
.fila-flexible { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.separador-arriba { border-top: 1px solid var(--borde); padding-top: 14px; }
.separador { border: none; border-top: 1px solid var(--borde); margin: 18px 0; }
.fila-destacada { background: #f5f8ff; }
.alto-72 { height: 72px; }
.lista-desplazable { max-height: 220px; overflow-y: auto; }
.traza { white-space: pre-wrap; font-size: 12px; margin: 8px 0 0; }
.texto-largo { font-size: 13px; max-width: 480px; overflow-wrap: anywhere; }
.btn-medio { font-size: 14px; padding: 8px 16px; }
.color-ok { color: var(--ok); }
.color-error { color: var(--error); }
.color-aviso { color: var(--aviso); }
.color-suave { color: var(--texto-suave); }

/* Barras de progreso: el ancho, en pasos de 5 % (clase pct-N). */
.pct-0 { width: 0; } .pct-5 { width: 5%; } .pct-10 { width: 10%; } .pct-15 { width: 15%; }
.pct-20 { width: 20%; } .pct-25 { width: 25%; } .pct-30 { width: 30%; } .pct-35 { width: 35%; }
.pct-40 { width: 40%; } .pct-45 { width: 45%; } .pct-50 { width: 50%; } .pct-55 { width: 55%; }
.pct-60 { width: 60%; } .pct-65 { width: 65%; } .pct-70 { width: 70%; } .pct-75 { width: 75%; }
.pct-80 { width: 80%; } .pct-85 { width: 85%; } .pct-90 { width: 90%; } .pct-95 { width: 95%; }
.pct-100 { width: 100%; }

/* Alto de las listas de casillas (listaCasillas()). */
.lista-casillas.alto-160 { max-height: 160px; }
.lista-casillas.alto-170 { max-height: 170px; }
.lista-casillas.alto-220 { max-height: 220px; }
.lista-casillas.alto-260 { max-height: 260px; }

/* --- Instalador (instalar.php) ----------------------------------------------- */
.contenedor-instalador { max-width: 860px; padding-top: 28px; padding-bottom: 40px; }
.pasos { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; counter-reset: paso; }
.pasos li { counter-increment: paso; padding: 6px 12px; border-radius: 999px; background: #eef2f7; color: #64748b; font-size: 13px; }
.pasos li::before { content: counter(paso) ". "; }
.pasos li.hecho { background: #dcfce7; color: #166534; }
.pasos li.actual { background: var(--texto); color: #fff; font-weight: 600; }
.orden {
    background: #0f172a; color: #e2e8f0; padding: 12px 14px; border-radius: 8px; overflow-x: auto;
    font-size: 13px; line-height: 1.5; white-space: pre; margin: 6px 0 14px;
}
.requisitos td:first-child { width: 28px; text-align: center; }
textarea.orden { width: 100%; min-height: 260px; border: 0; resize: vertical; box-sizing: border-box; }
details > summary { cursor: pointer; font-weight: 600; }

/* --- Terminal de fichaje (kiosco.php) ------------------------------------------ */
body.pagina-kiosco { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.contenedor-estrecho { max-width: 520px; padding-top: 40px; }
.kiosco { max-width: 520px; width: 100%; margin: 16px; text-align: center; }
.kiosco input { font-size: 28px; text-align: center; letter-spacing: 4px; }
.kiosco .btn-grande { width: 100%; margin-top: 12px; font-size: 22px; padding: 18px; }

/* --- Segundo factor (segundo-factor.php, mi-segundo-factor.php) ----------------- */
.qr-mfa { image-rendering: pixelated; max-width: 100%; border: 8px solid #fff; }
.codigos-recuperacion {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; list-style: none;
    padding: 12px 16px; margin: 12px 0 16px; background: var(--fondo); border-radius: 8px; font-size: 15px;
}

/* --- Organigrama (organigrama.php) --------------------------------------------- */
/* El mismo HTML, listas anidadas, en dos vistas: el gráfico, con la cabeza
   arriba y las líneas dibujadas con ::before y ::after, y la lista, con
   sangría. El color de las iniciales es el del nivel (.ca, PALETA_CATEGORIAS).
   Las tarjetas van posicionadas para quedar por encima de las líneas. */
.org-lienzo { overflow-x: auto; }
.org, .org ul { list-style: none; margin: 0; padding: 0; }
.org-tarjeta {
    position: relative; display: flex; gap: 10px; align-items: flex-start; text-align: left;
    width: 220px; padding: 10px 12px; background: var(--panel);
    border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
.org-yo { border-color: var(--primario); box-shadow: 0 0 0 2px var(--primario-suave); }
.org-iniciales {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .3px;
}
.org-sin-nivel { background: var(--texto-suave); }
.org-datos { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--texto-suave); }
.org-datos > * { overflow-wrap: anywhere; }
.org-nombre { font-size: 14px; color: var(--texto); }
.org-puesto { color: var(--texto); }
.org-nivel { font-weight: 600; }
.org-depende { font-style: italic; }
.org-pie { margin-top: 4px; }

/* Gráfico: cada persona centrada sobre quienes dependen de ella. Cada una de
   estas dibuja su trozo de la línea horizontal (::before a su izquierda,
   ::after a su derecha) y el trazo que baja hasta su tarjeta; el que baja de
   la responsable es el ::before de la lista. */
.org-grafico, .org-grafico ul { display: flex; justify-content: center; align-items: flex-start; }
.org-grafico { gap: 32px; width: max-content; min-width: 100%; padding: 4px 4px 8px; }
.org-grafico li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 6px 0; }
.org-grafico > li { padding: 0; }
.org-grafico ul { position: relative; padding-top: 20px; }
.org-grafico ul::before {
    content: ""; position: absolute; top: 0; left: 50%; height: 20px; border-left: 1px solid var(--ca-linea);
}
.org-grafico ul li::before, .org-grafico ul li::after {
    content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 20px; border-top: 1px solid var(--ca-linea);
}
.org-grafico ul li::after { right: auto; left: 50%; border-left: 1px solid var(--ca-linea); }
.org-grafico ul li:only-child { padding-top: 0; }
.org-grafico ul li:only-child::before, .org-grafico ul li:only-child::after { display: none; }
.org-grafico ul li:first-child::before, .org-grafico ul li:last-child::after { border: 0; }
.org-grafico ul li:last-child::before { border-right: 1px solid var(--ca-linea); border-top-right-radius: 6px; }
.org-grafico ul li:first-child::after { border-top-left-radius: 6px; }
/* Un equipo sin nadie más debajo, en columna, con la línea por detrás. */
.org-grafico ul.org-columna { flex-direction: column; align-items: center; gap: 8px; }
.org-grafico ul.org-columna::before { height: auto; bottom: 20px; }
.org-grafico ul.org-columna > li { padding: 0; }
.org-grafico ul.org-columna > li::before, .org-grafico ul.org-columna > li::after { display: none; }

/* Lista: sangría con una línea a la izquierda por cada nivel de dependencia. */
.org-lista ul { margin-left: 22px; padding-left: 16px; border-left: 1px solid var(--ca-linea); }
.org-lista li { position: relative; padding: 4px 0; }
.org-lista ul > li::before {
    content: ""; position: absolute; left: -16px; top: 26px; width: 14px; border-top: 1px solid var(--ca-linea);
}
.org-lista .org-tarjeta { width: auto; max-width: 560px; box-shadow: none; }

.org-sueltos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.org-sueltos .org-tarjeta { width: auto; }
.org-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; }
.org-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.org-camino { margin: 0 0 12px; font-size: 14px; color: var(--texto-suave); }

@media print {
    .org-lienzo { overflow: visible; }
    .org-tarjeta { box-shadow: none; break-inside: avoid; }
}

/* --- Mapa web (mapa-web.php) --------------------------------------------------- */
/* Listas anidadas dibujadas como un árbol: cada pantalla lleva a su izquierda
   la línea que baja de su grupo (el borde del <li>, que en la última no se
   pinta) y el codo que llega hasta ella (::before). El color de la línea es
   el del organigrama (--ca-linea, que solo existe dentro de .ca). */
.mapa { --mapa-linea: #c9d0dc; }
.mapa, .mapa ul { list-style: none; margin: 0; padding: 0; }
.mapa ul { margin-left: 8px; }
.mapa ul > li { position: relative; padding-left: 20px; border-left: 1px solid var(--mapa-linea); }
.mapa ul > li:last-child { border-left-color: transparent; }
.mapa ul > li::before {
    content: ""; position: absolute; left: -1px; top: 0; width: 14px; height: 15px;
    border-left: 1px solid var(--mapa-linea); border-bottom: 1px solid var(--mapa-linea); border-bottom-left-radius: 6px;
}
.mapa li > a, .mapa li > span { display: inline-block; padding: 3px 0; }
.mapa-raiz { font-size: 17px; font-weight: 700; color: var(--texto); }
.mapa-grupo, .mapa-aqui { font-weight: 600; }
.mapa-sin-enlace { color: var(--texto-suave); }

/* --- Ver como otra persona (src/suplantacion.php) ------------------------------ */
/* Fija arriba y de otro color que todo lo demás: que no se olvide de quién es
   lo que se está viendo. */
.barra-ver-como { position: sticky; top: 0; z-index: 50; background: #5b21b6; color: #fff; }
.barra-ver-como-inner {
    max-width: 1120px; margin: 0 auto; padding: 8px 20px; font-size: 14px;
    display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.barra-ver-como .btn { background: #fff; color: #5b21b6; }
.barra-ver-como .btn:hover { background: #ede9fe; color: #5b21b6; }

/* --- Página de error (bootstrap.php) ------------------------------------------- */
.pagina-error {
    font-family: "Segoe UI", Arial, sans-serif; max-width: 700px; margin: 60px auto; padding: 24px;
    border: 1px solid #f5c6c6; background: #fdecec; border-radius: 10px; color: #991b1b;
}

@media (max-width: 640px) {
    .barra-inner { min-height: auto; padding: 10px 16px; }
    /* Menú plegado tras el botón «Menú» (casilla oculta, sin JavaScript), a
       todo lo ancho bajo la zona de la persona; los grupos se abren debajo,
       sin flotar. */
    .barra .menu-boton { display: inline-block; margin-left: auto; }
    .barra .menu-abrir { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
    .menu-abrir:focus-visible + .menu-boton { outline: 2px solid var(--primario); outline-offset: 2px; }
    .usuario { order: 1; flex-basis: 100%; }
    .menu { display: none; order: 2; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: 6px; }
    .menu-abrir:checked ~ .menu { display: flex; }
    .menu .desplegable-panel {
        position: static; min-width: 0; margin: 2px 0 6px 12px; padding: 0 0 0 6px;
        border: 0; border-left: 2px solid var(--borde); border-radius: 0; box-shadow: none;
    }
    .reloj { font-size: 36px; }
    .pie .contenedor { flex-direction: column; gap: 4px; }
    /* En móvil la rejilla no cabe con el detalle: queda el color y el número,
       y el resto se consulta pulsando (title) o en el registro diario. */
    .cal-dia { height: 46px; padding: 3px; }
    .cal-detalle { display: none; }
    .calendario { border-spacing: 2px; }
}