/* =====================================================================
Alendara — hoja de estilos base
Marca: Forest Green #2E7D52 · Sap Green #8FD1A8 · Warm Gold #D9A441
Tipos: Comfortaa (marca y titulares) · Nunito Sans (interfaz)
Las fuentes se sirven desde este mismo dominio, no desde Google: así el
navegador del usuario no hace ninguna petición a un tercero, que para un
producto que se vende en Alemania y Francia importa.
Ambas son variables: un solo archivo por familia y subconjunto cubre
todos los pesos, 108 KB en total.
===================================================================== */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../fonts/comfortaa-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../fonts/comfortaa-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 200 1000;
font-display: swap;
src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 200 1000;
font-display: swap;
src: url('../fonts/nunito-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --- Tema claro (por defecto) -------------------------------------- */
:root{
--brand:#2E7D52; /* Forest Green */
--brand-strong:#245F3F;
--brand-soft:#D9E6DF;
--brand-ink:#FFFFFF; /* texto sobre el verde de marca */
--sap:#8FD1A8; /* Sap Green */
--gold:#D9A441; /* Warm Gold: relleno */
--gold-ink:#7A5510; /* Warm Gold legible como texto */
--gold-soft:#F7EAD2;
--paper:#F4F7F5;
--surface:#FFFFFF;
--surface-2:#E9EFEA;
--ink:#16211C;
--muted:#5A6B62;
--rule:#D7E2DA;
--rule-strong:#B9CBC0;
--ok:#22694A; --ok-soft:#DCEBE2;
--warn:#7A5510; --warn-soft:#F7EAD2;
--danger:#9B2F2A;--danger-soft:#F6E0DE;
--radius:9px;
--shadow:0 1px 2px rgba(22,33,28,.05), 0 10px 26px -18px rgba(22,33,28,.34);
--logo:url('../img/alendara-logo.svg');
}
/* --- Tema oscuro ---------------------------------------------------- */
@media (prefers-color-scheme: dark){
:root{
--brand:#8FD1A8; /* en oscuro manda el verde claro: el Forest no contrasta */
--brand-strong:#A9DCBD;
--brand-soft:#173A2A;
--brand-ink:#0C1A13;
--sap:#8FD1A8;
--gold:#E2B45C;
--gold-ink:#E2B45C;
--gold-soft:#332711;
--paper:#0F1613;
--surface:#16211C;
--surface-2:#1E2B24;
--ink:#E4EDE7;
--muted:#94A79C;
--rule:#26332C;
--rule-strong:#3A4B41;
--ok:#7FD3A4; --ok-soft:#14301F;
--warn:#E2B45C; --warn-soft:#332711;
--danger:#E58C86;--danger-soft:#3A1E1C;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.85);
--logo:url('../img/alendara-logo-blanco.svg');
}
}
*{box-sizing:border-box}
html,body{margin:0}
body{
background:var(--paper);
color:var(--ink);
font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
font-size:15px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* --- Cabecera -------------------------------------------------------- */
/* Fijada arriba: con el hilo de Sócrates o un artículo largo de la ayuda,
volver al menú obligaba a subir toda la página. `sticky` y no `fixed`
para que el contenido no quede tapado y no haya que compensar con
padding. La impresión la oculta entera, así que no la afecta. */
.topbar{
background:var(--surface);border-bottom:1px solid var(--rule);
position:sticky;top:0;z-index:50;
}
/* La barra puede ser mas ancha que la columna de texto, y le hace falta:
con diez entradas necesitaba 985 px y el envoltorio de 1180 solo dejaba 970.
Quince pixeles de menos partian la fila en dos. El margen extra es para las
traducciones, que en aleman son mas largas. */
.topbar .wrap{display:flex;align-items:center;gap:20px;min-height:66px;max-width:1320px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
/* El logotipo va como imagen de fondo para poder cambiarlo entre temas con
una variable. El texto queda oculto pero disponible para lectores. */
.brand i{
display:block;width:150px;height:36px;
background:var(--logo) left center/contain no-repeat;
}
.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.topbar nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.topbar nav a{padding:7px 11px;border-radius:7px;text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:600}
.topbar nav a:hover{background:var(--surface-2);color:var(--ink)}
/* Selector de idioma plegado: ocupa lo que un boton, no lo que cuatro. */
.idioma{position:relative;margin-left:8px;padding-left:12px;border-left:1px solid var(--rule);flex-shrink:0}
.idioma summary{
list-style:none;cursor:pointer;padding:6px 10px;border-radius:7px;
font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted);display:flex;align-items:center;gap:5px;
}
.idioma summary::-webkit-details-marker{display:none}
/* La punta de flecha va en CSS y no como caracter: asi no la lee un lector
de pantalla ni se la lleva por delante un traductor. */
.idioma summary::after{
content:'';width:0;height:0;border:4px solid transparent;
border-top-color:currentColor;margin-top:2px;
}
.idioma summary:hover{background:var(--surface-2);color:var(--ink)}
.idioma[open] summary{background:var(--surface-2);color:var(--ink)}
.idioma[open] summary::after{transform:rotate(180deg);margin-top:-2px}
.idioma .menu{
position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:150px;
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
box-shadow:var(--shadow);padding:5px;
}
.idioma .menu a{display:block;padding:7px 10px;font-size:14px;white-space:nowrap}
.idioma .menu a.on{color:var(--brand);background:var(--brand-soft)}
/* --- Contenido ------------------------------------------------------- */
main{padding:40px 0 80px}
h1,h2,h3{font-family:'Comfortaa','Nunito Sans',system-ui,sans-serif;text-wrap:balance}
h1{font-size:27px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px;line-height:1.2}
h2{font-size:19px;font-weight:600;margin:36px 0 14px}
h3{font-size:16px;font-weight:600;margin:26px 0 10px}
.lead{color:var(--muted);margin:0 0 26px;max-width:68ch;font-size:15.5px}
/* --- Tarjetas y contadores ------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:30px}
.card{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
padding:20px;box-shadow:var(--shadow);
}
.card .n{
font-family:'Comfortaa',sans-serif;font-size:30px;font-weight:700;
letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--brand);
}
.card .k{font-size:13px;color:var(--muted);margin-top:5px;font-weight:600}
/* --- Formularios ----------------------------------------------------- */
.form{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
padding:28px;box-shadow:var(--shadow);max-width:430px;
}
.field{margin-bottom:18px}
label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
width:100%;padding:10px 12px;border:1px solid var(--rule-strong);border-radius:7px;
background:var(--paper);color:var(--ink);font:inherit;font-size:15px;
}
input:focus,select:focus,textarea:focus{
border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft);
}
.btn{
display:inline-block;padding:10px 20px;border:0;border-radius:7px;cursor:pointer;
background:var(--brand);color:var(--brand-ink);font:inherit;font-size:15px;font-weight:700;
text-decoration:none;line-height:1.4;
}
.btn:hover{background:var(--brand-strong)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--rule-strong);font-weight:600}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
/* --- Avisos ---------------------------------------------------------- */
.alert{padding:11px 15px;border-radius:7px;margin-bottom:18px;font-size:14px;border:1px solid transparent}
.alert.success{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.alert.error{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.alert.info{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.alert.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
/* --- Tablas ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{
text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted);padding:11px 15px;border-bottom:1px solid var(--rule-strong);white-space:nowrap;
}
td{padding:11px 15px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.mono,th.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.pill{
display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;
text-transform:uppercase;letter-spacing:.05em;
}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.pend{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--danger-soft);color:var(--danger)}
/* --- Pie ------------------------------------------------------------- */
footer{border-top:1px solid var(--rule);padding:26px 0;color:var(--muted);font-size:13.5px}
@media (max-width:640px){
.topbar .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand i{width:126px;height:30px}
h1{font-size:25px}
main{padding:28px 0 56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* --- Subnavegación de módulo ------------------------------------------ */
.subnav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 26px;border-bottom:1px solid var(--rule);padding-bottom:10px}
.subnav a{
padding:7px 13px;border-radius:7px;text-decoration:none;color:var(--muted);
font-size:14.5px;font-weight:600;
}
.subnav a:hover{background:var(--surface-2);color:var(--ink)}
.subnav a.on{background:var(--brand-soft);color:var(--brand)}
/* --- Barra de acciones y filtros -------------------------------------- */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
.toolbar .filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1}
.toolbar .filtros input[type=text],
.toolbar .filtros input[type=number],
.toolbar .filtros select{width:auto;min-width:170px;padding:8px 11px;font-size:14.5px}
.toolbar .filtros input[type=number]{min-width:96px}
.toolbar > .btn{margin-left:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* --- Árbol de departamentos ------------------------------------------- */
/* La sangría se calcula desde el nivel, así la jerarquía se lee de un
vistazo sin necesidad de anidar tablas. */
.tree{display:inline-flex;align-items:center;gap:8px;padding-left:calc(var(--nivel,0) * 22px)}
.tree .rama{
width:12px;height:12px;flex-shrink:0;
border-left:1.5px solid var(--rule-strong);
border-bottom:1.5px solid var(--rule-strong);
border-bottom-left-radius:4px;margin-bottom:5px;
}
/* --- Formularios anchos y rejillas ------------------------------------ */
.form.wide{max-width:760px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.dos-columnas{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:24px;align-items:start}
.field.check label{display:flex;align-items:center;gap:9px;font-weight:600}
.field.check input{width:auto}
.hint{font-size:12.5px;color:var(--muted);margin:5px 0 0;max-width:none}
.botonera{display:flex;gap:10px;align-items:center;margin-top:8px}
/* --- Botones auxiliares ----------------------------------------------- */
.btn.small{padding:5px 11px;font-size:13px}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{filter:brightness(1.1)}
td.actions{text-align:right;white-space:nowrap}
/* --- Estados vacíos y pies de tabla ----------------------------------- */
.empty{
background:var(--surface);border:1px dashed var(--rule-strong);border-radius:var(--radius);
padding:38px 24px;text-align:center;color:var(--muted);
}
.empty p{margin:0 auto 16px;max-width:44ch}
.pie-tabla{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
margin-top:12px;font-size:14px;color:var(--muted)}
.pager{display:flex;gap:10px;align-items:center}
.pager a{
text-decoration:none;padding:3px 10px;border:1px solid var(--rule-strong);
border-radius:6px;color:var(--brand);
}
@media (max-width:760px){
.grid-2,.dos-columnas{grid-template-columns:1fr}
.toolbar > .btn{margin-left:0}
}
/* --- Competencias y perfiles ------------------------------------------ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.suave{color:var(--muted);font-size:12.5px;margin-left:6px}
.pill.maestro{background:var(--gold-soft);color:var(--gold-ink)}
.pill.heredado{background:var(--surface-2);color:var(--muted)}
/* Elección de ámbito sobre el que declarar requisitos. */
.ambito-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card.ambito h2{font-size:17px;margin:0 0 6px}
.card.ambito .hint{margin-bottom:12px}
.ambitos{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto}
.ambitos li{
display:flex;align-items:center;gap:10px;justify-content:space-between;
padding:7px 0;border-bottom:1px solid var(--rule);font-size:14.5px;
}
.ambitos li:last-child{border-bottom:0}
.ambitos .cuenta{font-size:12px;font-weight:700;white-space:nowrap}
.ambitos .cuenta.con{color:var(--brand)}
.ambitos .cuenta.sin{color:var(--muted);font-weight:400}
/* De dónde sale cada requisito efectivo. Sin esto, un responsable no puede
entender por qué a su puesto se le exige un nivel que él no ha puesto. */
.origenes{list-style:none;margin:0;padding:0;font-size:13px}
.origenes li{padding:3px 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
@media (max-width:760px){
.grid-3{grid-template-columns:1fr}
}
/* --- Registro de niveles ---------------------------------------------- */
input.mini{width:64px;text-align:right;padding:6px 8px}
label.inline{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;white-space:nowrap}
label.inline input{width:auto;margin:0}
/* --- Catálogo y scoring ----------------------------------------------- */
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:0 14px}
.par{display:flex;align-items:center;gap:8px}
.par input{width:100%}
.par span{color:var(--muted)}
/* La matriz de prioridad frente a precio: comunica, no decide. */
.matriz .celda{text-align:center;font-weight:700;font-family:'Comfortaa',sans-serif}
.matriz .celda.a{background:var(--brand-soft);color:var(--brand)}
.matriz .celda.b{background:var(--surface-2)}
.matriz .celda.c{color:var(--muted)}
@media (max-width:900px){ .grid-5{grid-template-columns:repeat(2,1fr)} }
/* --- Priorización ------------------------------------------------------ */
.celda-pill{
display:inline-block;min-width:44px;text-align:center;padding:4px 9px;border-radius:6px;
font-family:'Comfortaa',sans-serif;font-weight:700;font-size:13px;
}
.celda-pill.a{background:var(--brand-soft);color:var(--brand)}
.celda-pill.b{background:var(--surface-2);color:var(--ink)}
.celda-pill.c{background:transparent;color:var(--muted);border:1px solid var(--rule-strong)}
/* El ajuste manual va plegado: es la excepción, no el camino habitual.
Y va en una fila entera, no dentro de la celda: la columna de acciones
es la última de una tabla ancha y suele quedar fuera de lo que se ve,
así que el contenedor con desplazamiento horizontal recortaba el
formulario justo al abrirlo. */
.ajuste-interruptor{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ajuste-interruptor:focus-visible + label{outline:2px solid var(--brand);outline-offset:2px}
tr.ajuste-fila{display:none}
tr:has(.ajuste-interruptor:checked) + tr.ajuste-fila{display:table-row}
tr.ajuste-fila > td{background:var(--surface-2)}
form.ajuste{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;text-align:left}
form.ajuste .btn{align-self:flex-end}
form.ajuste .field{margin:0;min-width:150px}
form.ajuste .field.ancho{flex:1 1 320px}
form.ajuste label{font-size:12px}
form.ajuste input,form.ajuste textarea{font-size:14px;padding:6px 9px;width:100%}
form.ajuste .hint{font-size:12px;flex-basis:100%;margin:0}
@media (max-width:640px){
form.ajuste .field,form.ajuste .field.ancho{min-width:100%;flex-basis:100%}
form.ajuste .btn{width:100%}
}
/* --- Presupuesto y plan ------------------------------------------------ */
input.importe{width:120px;text-align:right}
.negativo{color:var(--danger);font-weight:700}
.barra{height:6px;background:var(--surface-2);border-radius:3px;margin:8px 0 6px;overflow:hidden}
.barra span{display:block;height:100%;background:var(--brand);border-radius:3px}
.barra span.exceso{background:var(--danger)}
/* --- Cuenta y usuarios ------------------------------------------------- */
.clave-temporal{
font-family:ui-monospace,Consolas,monospace;font-size:17px;font-weight:700;
background:var(--surface);border:1px dashed var(--rule-strong);border-radius:6px;
padding:10px 14px;margin:10px 0;display:inline-block;user-select:all;word-break:break-all;
}
/* --- Tablero de indicadores ------------------------------------------- */
.card.enlace{display:block;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.card.enlace:hover{border-color:var(--brand);transform:translateY(-1px)}
.tablero{
display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:16px;margin-bottom:24px;
}
.panel-caja{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
padding:20px 22px;box-shadow:var(--shadow);
}
.panel-caja h2{font-size:16px;font-weight:600;margin:0 0 4px}
.panel-caja .hint{margin:0 0 14px}
.panel-caja h2 + .anillo,.panel-caja h2 + .barras{margin-top:14px}
/* Los tonos se declaran una sola vez y valen para el anillo (trazo), la
leyenda (fondo) y las barras (fondo), via currentColor. */
.tono-ok,.anillo .ok,.barras .ok{color:var(--ok)}
.tono-brand,.anillo .brand,.barras .brand{color:var(--brand)}
.tono-oro,.anillo .oro,.barras .oro{color:var(--gold)}
.tono-peligro,.anillo .peligro,.barras .peligro{color:var(--danger)}
.tono-suave,.anillo .suave,.barras .suave{color:var(--rule-strong)}
/* Anillo */
.anillo{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.anillo svg{width:132px;height:132px;flex:none}
.anillo circle.pista{stroke:var(--surface-2)}
.anillo circle.tramo{stroke:currentColor}
.anillo text.cifra{
font-family:'Comfortaa',sans-serif;font-size:30px;font-weight:700;
fill:var(--ink);font-variant-numeric:tabular-nums;
}
.anillo .leyenda{flex:1;min-width:150px}
.anillo .leyenda .item{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 0}
.anillo .leyenda .punto{width:10px;height:10px;border-radius:3px;background:currentColor;flex:none}
.anillo .leyenda .txt{color:var(--muted)}
.anillo .leyenda .val{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.anillo .pie-grafico{font-size:12.5px;color:var(--muted);margin:10px 0 0}
/* Barras horizontales */
.barras .fila{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:14px}
.barras .etiqueta{
flex:0 0 34%;color:var(--muted);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
.barras .pista{flex:1;height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.barras .valor{display:block;height:100%;background:currentColor;border-radius:5px}
.barras .cifra{flex:none;min-width:2.4em;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
/* Consumo por partida */
.partida{margin-bottom:14px}
.partida:last-child{margin-bottom:0}
.partida .cabecera{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.partida .cifra{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
/* --- Puntuacion coloreada por tramo ------------------------------------ */
.sc-pill{
display:inline-block;min-width:40px;text-align:center;padding:3px 8px;border-radius:6px;
font-family:'Comfortaa',sans-serif;font-weight:700;font-size:13.5px;
font-variant-numeric:tabular-nums;
}
.sc-pill.alta {background:var(--danger-soft);color:var(--danger)}
.sc-pill.media {background:var(--gold-soft);color:var(--gold-ink)}
.sc-pill.baja {background:var(--brand-soft);color:var(--brand)}
.sc-pill.minima{background:var(--surface-2);color:var(--muted)}
.sc-pill.nula {background:transparent;color:var(--muted);font-weight:400}
/* --- Calendario del ciclo ---------------------------------------------- */
.dos-columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.dos-columnas .form{max-width:none}
.dos-columnas .panel-caja h2:first-child{margin-top:0}
.dos-columnas .panel-caja h2{margin-top:22px}
.calendario{width:auto;margin-bottom:4px;font-size:14px}
.calendario th{
text-align:left;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;
padding:3px 18px 3px 0;border:0;background:transparent;
}
.calendario td{padding:3px 0;border:0;font-variant-numeric:tabular-nums;font-weight:600}
/* El mes en curso se marca: es la fila que contesta a «¿y ahora mismo?». */
.calendario tr.ahora th,.calendario tr.ahora td{color:var(--brand);font-weight:700}
/* --- Selector de ejercicio --------------------------------------------- */
/* Toda la fila a la misma altura y con el contenido centrado. Antes cada
pieza iba a lo suyo: las fichas de ejercicio con sus dos lineas, el
desplegable a su altura natural y el enlace a Evolucion estirado hasta
arriba con el texto pegado al borde. Se fija una altura comun y cada cosa
se centra dentro. */
.ejercicios{
--alto-ejercicio:58px;
display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0 0 22px;
}
.ejercicios > *{min-height:var(--alto-ejercicio)}
.ejercicios .ejercicio{
display:flex;flex-direction:column;justify-content:center;gap:2px;
text-decoration:none;padding:8px 14px;
border:1px solid var(--rule);border-radius:var(--radius);
background:var(--surface);min-width:118px;
}
.ejercicios .ejercicio:hover{border-color:var(--rule-strong)}
.ejercicios .ejercicio.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.ejercicios .anio{
font-family:'Comfortaa',sans-serif;font-size:19px;font-weight:700;
color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;
}
.ejercicios .ejercicio.on .anio{color:var(--brand)}
.ejercicios .estado{font-size:11.5px;font-weight:600;letter-spacing:.02em}
/* El que se ejecuta y el que se prepara no compiten: uno es el presente y el
otro el borrador, y el color lo dice antes que la etiqueta. */
.ejercicios .estado.ejecucion{color:var(--ok)}
.ejercicios .estado.elaboracion{color:var(--gold-ink)}
.ejercicios .estado.cerrado,.ejercicios .estado.futuro{color:var(--muted)}
/* El formulario del ejercicio suelto y el enlace a Evolucion se comportan
como una ficha mas: mismo alto, mismo borde, mismo radio. */
.ejercicios .otro{
display:flex;align-items:center;gap:6px;margin-left:4px;
padding:0 12px;border:1px solid var(--rule);border-radius:var(--radius);
background:var(--surface);
}
.ejercicios .otro input,.ejercicios .otro select{width:auto;min-width:92px}
.ejercicios .otro .btn{padding:6px 12px}
.ejercicios > .btn{
display:flex;align-items:center;margin-left:0;
padding:0 16px;background:var(--surface);
}
/* --- Ejecución: convocatorias y asistentes ----------------------------- */
.form.ancha{max-width:720px}
.pareja{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 18px}
/* La fila de un asistente es un formulario propio: estado, nota y fecha se
guardan juntos y de uno en uno, que es como se pasa lista de verdad. */
.fila-asistente{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fila-asistente select{width:auto;min-width:132px}
.fila-asistente input.nota{width:76px;text-align:right}
.fila-asistente input[type=date]{width:auto}
form.quitar{display:inline-block;margin-left:8px}
.btn.ghost.peligro{color:var(--danger);border-color:var(--rule)}
.btn.ghost.peligro:hover{border-color:var(--danger);background:var(--danger-soft)}
.lista-personas{
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:2px 16px;margin:10px 0 18px;
}
.lista-personas label.inline{padding:5px 0;font-size:14.5px}
.lista-personas .suave{margin-left:6px;font-size:12.5px}
/* Cuatro cifras en fila dentro de una caja del tablero. */
/* Dentro de una caja del tablero solo caben dos columnas: con cuatro, un
importe como «20.070,00 €» se partia en dos lineas. */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px 14px;margin:14px 0 4px}
.cifras .n{
display:block;font-family:'Comfortaa',sans-serif;font-size:26px;font-weight:700;
color:var(--brand);line-height:1.1;font-variant-numeric:tabular-nums;
}
.cifras .k{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px}
/* --- Evolución entre ejercicios ---------------------------------------- */
.evolucion th[scope=row]{font-weight:600;text-align:left;text-transform:none;letter-spacing:0;background:transparent}
.evolucion th[scope=row] .suave{font-weight:400;font-size:12px;margin-top:2px}
.evolucion td.num .suave{font-size:12px;font-weight:400}
.tendencia{
display:inline-block;padding:2px 7px;border-radius:5px;
font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;
}
/* «Mejor» no es «sube»: que baje el coste por alumno es una buena noticia,
y el catálogo de indicadores dice en cuál es cuál. */
.tendencia.mejor{background:var(--ok-soft);color:var(--ok)}
.tendencia.peor{background:var(--danger-soft);color:var(--danger)}
.tendencia.neutro,.tendencia.igual{background:var(--surface-2);color:var(--muted)}
.fila-asistente select.motivo{min-width:150px}
/* La convocatoria fuera del plan cierra la pantalla, separada de las tablas. */
.toolbar.fuera-de-plan{
margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);
justify-content:flex-start;align-items:center;gap:14px;
}
/* .toolbar > .btn lleva margin-left:auto para empujar la accion a la
derecha; aqui no interesa, va pegada a su explicacion. */
.toolbar.fuera-de-plan > .btn{margin-left:0}
.toolbar.fuera-de-plan .hint{margin:0;max-width:52ch}
/* --- Menú activo y suplantación ---------------------------------------- */
/* La entrada activa se marca con el verde de marca y un filete debajo: un
fondo entero competiría con el botón de Salir, que es el único que debe
destacar en la barra. */
.topbar nav a.on{
color:var(--brand);font-weight:700;
box-shadow:inset 0 -2px 0 var(--brand);border-radius:7px 7px 0 0;
}
.topbar nav a.on:hover{background:transparent}
.alert.suplantacion{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.alert.suplantacion span{flex:1;min-width:200px}
/* --- Ayuda ------------------------------------------------------------- */
/* La ayuda se lee, no se ojea: columna estrecha y interlineado holgado. El
indice va al lado para poder saltar de un articulo a otro sin volver. */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.migas{margin:0 0 10px;font-size:.86rem}
.migas a{color:var(--muted);text-decoration:none}
.migas a:hover{color:var(--brand)}
.buscador-ayuda{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin:0 0 22px;
}
.buscador-ayuda input[type=search]{flex:1;min-width:220px;max-width:520px}
.resultados-ayuda{
display:grid;gap:14px;margin:0 0 26px;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.resultados-ayuda .panel-caja{display:flex;flex-direction:column;gap:8px}
.resultados-ayuda h3{margin:0;font-size:1rem}
.resultados-ayuda h3 a{text-decoration:none}
.resultados-ayuda p{margin:0;font-size:.88rem;line-height:1.55;color:var(--muted)}
.resultados-ayuda .btn{align-self:flex-start;margin-top:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.chip{
display:inline-block;padding:5px 11px;border:1px solid var(--rule);
border-radius:999px;font-size:.82rem;text-decoration:none;color:var(--muted);
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
/* La prosa de la ayuda es el unico sitio de la aplicacion con texto largo:
se le dan medidas de lectura y no las de una tabla. */
.prosa{max-width:64ch;line-height:1.68}
.prosa h2{margin:26px 0 10px;font-size:1.06rem}
.prosa p{margin:0 0 14px}
.prosa ul,.prosa ol{margin:0 0 14px;padding-left:22px}
.prosa li{margin:0 0 6px}
.prosa strong{font-weight:700}
.dos-columnas.ayuda{align-items:start}
.indice-ayuda ul{list-style:none;margin:0;padding:0}
.indice-ayuda li{margin:0 0 7px;font-size:.88rem;line-height:1.4}
.indice-ayuda li.on>a{color:var(--brand);font-weight:700}
.indice-ayuda a{text-decoration:none;color:var(--muted)}
.indice-ayuda a:hover{color:var(--brand)}
/* El interrogante de la barra: mismo peso visual que el codigo de idioma,
para no gastar una palabra de menu en un sitio donde ya no caben. */
/* Utilidades de la barra —ayuda y cuenta— en redondo: no son modulos, y
con diez entradas dos palabras mas partian la fila en dos. */
.topbar nav a.icono-boton{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;padding:0;border:1px solid var(--rule);
border-radius:50%;font-weight:700;line-height:1;flex:none;
}
.topbar nav a.icono-boton:hover{border-color:var(--brand);color:var(--brand)}
.topbar nav a.icono-boton svg{display:block}
/* --- Conversación con Sócrates ----------------------------------------- */
/* No es un chat flotante: es una pagina con un hilo. Se recarga entera en
cada turno, sin una linea de JavaScript, y por eso el ultimo turno tiene
que quedar donde se ve al volver. */
.conversacion{margin:0 0 26px}
.hilo{
display:flex;flex-direction:column;gap:14px;
margin:16px 0;padding:14px 0;border-top:1px solid var(--rule);
}
.turno{max-width:70ch}
.turno .quien{
display:block;font-size:.74rem;text-transform:uppercase;
letter-spacing:.04em;color:var(--muted);margin:0 0 4px;
}
/* Tu pregunta se lee como una cita, no como una burbuja rellena. Antes tenia
fondo claro —la variable --soft no existe, asi que caia al blanco del
respaldo— y en tema oscuro salia un rectangulo blanco con el texto casi
invisible: identico a un campo de texto vacio. */
.turno.tuyo p{
margin:0;padding:1px 0 1px 12px;
border-left:3px solid var(--brand);
color:var(--ink);font-weight:600;
}
.turno.suyo{padding-left:2px}
.turno.suyo>p{margin:6px 0 0;line-height:1.6}
.prosa-ia{line-height:1.65}
.turno.suyo form{margin-top:8px}
.respuesta-ayuda{list-style:none;margin:8px 0 0;padding:0}
.respuesta-ayuda li{margin:0 0 12px;padding-left:12px;border-left:2px solid var(--rule)}
.respuesta-ayuda li>a{font-weight:700;text-decoration:none}
.respuesta-ayuda li>p{margin:3px 0 6px;font-size:.88rem;line-height:1.55;color:var(--muted)}
.caja-pregunta{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 8px}
.caja-pregunta input[type=text]{flex:1;min-width:220px}
/* El boton de vaciar es una accion menor: se pinta como enlace para que no
compita con Preguntar, que es lo unico que se hace aqui de verdad. */
.quitar-hilo{display:inline}
.quitar-hilo form{display:inline}
button.enlace{
background:none;border:0;padding:0;font:inherit;color:var(--muted);
text-decoration:underline;cursor:pointer;
}
button.enlace:hover{color:var(--brand)}
/* --- Fórmulas de la ayuda ---------------------------------------------- */
/* Monoespaciadas y sin partir: un subíndice partido entre dos renglones deja
de ser un subíndice. Si no cabe, se desplaza la fórmula, no la página. */
pre.formula{
margin:0 0 16px;padding:12px 14px;
background:var(--surface-2);border:1px solid var(--rule);border-radius:8px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.95rem;line-height:1.5;
overflow-x:auto;white-space:pre;
}
/* --- La caja de preguntar, siempre arriba ------------------------------- */
/* Estaba debajo del hilo y se enterraba: cada respuesta la empujaba más
abajo, justo la que más crece cuando más se usa. Ahora se pregunta arriba
y las respuestas bajan, de la más reciente a la más vieja. */
.caja-pregunta{margin:14px 0 6px}
.conversacion .hilo{border-top:1px solid var(--rule);border-bottom:0;margin-top:18px}
.acciones-hilo{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin:0;font-size:.86rem;color:var(--muted);
}
.acciones-hilo form{display:contents}
/* --- Figuras de la ayuda ------------------------------------------------ */
/* Los diagramas son SVG cargados con ![]()
, asi que no ven el CSS de esta
pagina: llevan sus colores dentro y resuelven el tema oscuro con su propia
consulta de medios. Aqui solo se les da sitio. */
.figura-ayuda{margin:0 0 22px;padding:0}
.figura-ayuda img{
display:block;width:100%;height:auto;
padding:14px;border:1px solid var(--rule);border-radius:8px;
background:var(--surface);
}
.figura-ayuda figcaption{
margin-top:8px;font-size:.86rem;line-height:1.55;color:var(--muted);
}
/* --- Ampliar un diagrama ------------------------------------------------ */
/* Dentro del ancho de lectura los diagramas quedan pequenos, y son justo lo
que hay que mirar de cerca. El cursor lo anuncia antes de pulsar. */
.figura-ayuda .ampliar{display:block;cursor:zoom-in}
.figura-ayuda .ampliar:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.lupa{
position:fixed;inset:0;z-index:200;
display:flex;align-items:center;justify-content:center;
padding:32px;cursor:zoom-out;
background:rgba(15,22,19,.88);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
/* Fondo propio para el diagrama: el SVG es transparente y sobre la capa
oscura se leeria en su version clara, que es la que no toca. */
.lupa img{
max-width:100%;max-height:100%;
padding:20px;border-radius:10px;background:var(--surface);
box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.lupa-cerrar{
position:absolute;top:14px;right:18px;
width:40px;height:40px;padding:0;
border:1px solid rgba(255,255,255,.28);border-radius:50%;
background:transparent;color:#fff;
font-size:26px;line-height:1;cursor:pointer;
}
.lupa-cerrar:hover{background:rgba(255,255,255,.12)}
.sin-scroll{overflow:hidden}
@media print{
.lupa{display:none}
}
/* --- Selector de normas ------------------------------------------------- */
/* Quince casillas en una columna serian quince renglones que nadie lee. En
rejilla se abarcan de un vistazo, y cada una lleva debajo que formacion
arrastra: sin esa linea, marcar «ISO 45001» no le dice nada a quien no
sepa ya lo que es. */
fieldset.normas{border:0;margin:0 0 18px;padding:0}
fieldset.normas legend{padding:0;font-weight:700;font-size:.92rem}
.rejilla-normas{
display:grid;gap:8px;margin:10px 0 16px;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.norma{
display:flex;gap:10px;align-items:flex-start;
padding:10px 12px;border:1px solid var(--rule);border-radius:8px;
cursor:pointer;background:var(--surface);
}
.norma:hover{border-color:var(--rule-strong)}
.norma input{margin:2px 0 0;flex-shrink:0}
.norma span{display:block;line-height:1.4}
.norma strong{display:block;font-size:.9rem;font-weight:700}
.norma em{display:block;margin-top:3px;font-size:.8rem;font-style:normal;color:var(--muted)}
/* Marcada se nota sin depender solo del cuadrito, que a 14 px se ve poco. */
.norma:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
/* --- Habilidades de Sócrates -------------------------------------------- */
/* Eran dos y cabian en dos columnas fijas; ya son tres y seguiran creciendo.
En rejilla se acomodan solas y en un movil caen una debajo de otra. */
.habilidades{
display:grid;gap:16px;margin:0 0 26px;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
align-items:start;
}
.habilidades .panel-caja{display:flex;flex-direction:column;gap:10px}
.habilidades h3{margin:0;font-size:1rem}
.habilidades .hint{margin:0}
.habilidades form{margin-top:auto}
.habilidades .pill{margin:0 4px 4px 0}
/* --- La norma que exige una formación ----------------------------------- */
/* En ámbar y no en rojo: «Obligatorio» es el aviso y esto es su porqué, así
que acompaña sin competir con él. Monoespaciada porque una referencia
—«ISO 45001 cl. 7.2», «RD 1215/1997»— es un identificador, no prosa. */
.pill.norma{
background:var(--warn-soft);color:var(--warn);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.74rem;font-weight:600;
}
/* --- Pie con los textos legales ----------------------------------------- */
footer .wrap{
display:flex;flex-wrap:wrap;align-items:center;
gap:8px 18px;justify-content:space-between;
}
.pie-legal{display:flex;flex-wrap:wrap;gap:14px}
.pie-legal a{color:var(--muted);text-decoration:none}
.pie-legal a:hover{color:var(--brand);text-decoration:underline}
@media print{ .pie-legal{display:none} }
/* --- Menú plegable en pantalla estrecha --------------------------------- */
/* El corte está en 1330 por una razón medida, no por gusto: con diez entradas
la barra entera solo cabe en una fila a partir de ahí, y el idioma que manda
es el francés, que tiene las palabras más largas. Por debajo aparece el
botón. Antes de subir «Perfiles» aguantaba hasta 860.
Se prefiere el botón a una barra de dos filas porque es justo lo que el
botón vino a evitar. */
/* Interruptor y etiqueta, no : un cerrado no pinta su
contenido aunque se le fuerce el display —su propia caja queda a cero—,
así que no sirve para tener los enlaces siempre visibles en ancho. Con una
casilla oculta se controla el display del panel directamente.
Sin una línea de JavaScript: navegar no puede depender de que cargue un
guion. */
.menu-interruptor{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menu-boton{display:none}
.enlaces{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
@media (max-width:1330px){
/* La barra vuelve a una sola fila: marca, botón de menú e idioma. */
.topbar .wrap{flex-wrap:nowrap;gap:10px}
.topbar nav{margin-left:auto;flex-wrap:nowrap}
.menu-boton{
display:flex;align-items:center;gap:9px;cursor:pointer;
padding:8px 12px;border:1px solid var(--rule);border-radius:8px;
font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;
}
.menu-interruptor:checked ~ .menu-boton{border-color:var(--brand);color:var(--brand)}
/* El foco tiene que verse: la casilla está oculta, así que el anillo lo
pinta la etiqueta o no lo pinta nadie. */
.menu-interruptor:focus-visible ~ .menu-boton{outline:2px solid var(--brand);outline-offset:2px}
/* Las tres barras, dibujadas: un carácter de hamburguesa se ve distinto en
cada teléfono y alguno lo pinta como emoji de colores. */
.barras{display:block;width:17px;height:2px;border-radius:2px;background:currentColor;position:relative}
.barras::before,.barras::after{
content:"";position:absolute;left:0;width:17px;height:2px;
border-radius:2px;background:currentColor;
}
.barras::before{top:-6px}
.barras::after{top:6px}
/* Cerrado no ocupa; abierto cae SOBRE el contenido en vez de empujarlo,
así la barra no cambia de alto al abrirse. */
.enlaces{display:none}
.menu-interruptor:checked ~ .enlaces{
position:absolute;left:0;right:0;top:100%;z-index:40;
display:flex;flex-direction:column;align-items:stretch;gap:2px;
padding:10px 20px 16px;
background:var(--surface);border-bottom:1px solid var(--rule);
box-shadow:var(--shadow);
}
.menu-interruptor:checked ~ .enlaces > a{width:100%;padding:11px 12px;font-size:15.5px}
.menu-interruptor:checked ~ .enlaces form{width:100%}
.menu-interruptor:checked ~ .enlaces .btn{width:100%;margin-top:8px}
/* La ayuda deja de ser un círculo: en una lista es una entrada más, y un
interrogante suelto entre palabras no se entiende. */
/* En vertical, un icono suelto entre palabras no se entiende: la ayuda y
la cuenta vuelven a llamarse por su nombre. */
.menu-interruptor:checked ~ .enlaces a.icono-boton{
width:100%;height:auto;border:0;border-radius:8px;justify-content:flex-start;
gap:10px;padding:11px 12px;
}
.menu-interruptor:checked ~ .enlaces a.icono-boton::after{content:attr(title);font-weight:600;font-size:15.5px}
.menu-interruptor:checked ~ .enlaces a.ayuda-boton{font-size:0}
}
/* --- Pares de cifras que se estrechan de más ---------------------------- */
/* Dos columnas de «16 / 250 · Personas» a 390 px quedan pegadas entre sí.
Por debajo de 480 se apilan, que es lo que hace el resto de la página. */
@media (max-width:480px){
.grid-5{grid-template-columns:1fr}
.cards{grid-template-columns:1fr}
}
@media (max-width:1330px){
/* El interrogante sobra cuando al lado va la palabra: se apaga el texto
del enlace y se deja solo el que inyecta el pseudoelemento. */
.menu-interruptor:checked ~ .enlaces a.ayuda-boton{font-size:0;border:0;padding:11px 12px}
.menu-interruptor:checked ~ .enlaces a.ayuda-boton::after{font-size:15.5px}
/* En vertical, el filete de la entrada activa parecía una línea divisoria
entre dos elementos. Marcada al margen se lee como lo que es. */
.menu-interruptor:checked ~ .enlaces > a.on{
box-shadow:none;border-radius:8px;
border-left:3px solid var(--brand);background:var(--brand-soft);
}
}
/* --- Documentos que acreditan una competencia --------------------------- */
.documentos{
display:grid;gap:14px;margin:0 0 30px;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}
.documento h3{margin:0 0 10px;font-size:.95rem}
.documento .campos{display:grid;gap:10px;margin:0 0 12px}
.documento label{display:block;font-size:.8rem;color:var(--muted);font-weight:600}
.documento label span{display:block;margin-bottom:3px}
.documento input[type=text]{width:100%}
.documento input[type=file]{width:100%;font-size:.84rem}
.documento .tiene{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;
margin:0 0 12px;font-size:.86rem;
}
button.enlace.peligro{color:var(--danger)}
/* --- Registro de la aplicación ------------------------------------------ */
.registro{display:flex;flex-direction:column;gap:10px;margin:0 0 30px}
.entrada{
border:1px solid var(--rule);border-left-width:3px;border-radius:8px;
padding:12px 14px;background:var(--surface);
}
.entrada.error{border-left-color:var(--danger)}
.entrada.warning{border-left-color:var(--warn)}
.entrada.info{border-left-color:var(--rule-strong)}
.entrada .cabecera{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.entrada time{font-size:.8rem;color:var(--muted)}
/* La traza va monoespaciada y se desplaza dentro de su caja: una ruta de
archivo larga no puede arrastrar la página entera. */
.entrada pre{
margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.8rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;
}
/* --- Esperando al asistente --------------------------------------------- */
/* La barra se mueve pero NO mide: no sabemos por dónde va el modelo, y una
que avanzara sola a un ritmo inventado estaría mintiendo. Dice que hay algo
en marcha, no cuánto queda. El segundero de al lado sí es real. */
.esperando{margin:14px 0 0;max-width:52ch}
.esperando .barra{
height:4px;border-radius:2px;overflow:hidden;
background:var(--surface-2);
}
.esperando .barra span{
display:block;height:100%;width:38%;border-radius:2px;
background:var(--brand);
animation:vaiven 1.5s ease-in-out infinite;
}
@keyframes vaiven{
0% {transform:translateX(-100%)}
100% {transform:translateX(300%)}
}
.esperando .que-pasa{margin:10px 0 2px;font-size:.9rem;line-height:1.5}
.esperando .cuanto{margin:0;font-size:.8rem;color:var(--muted)}
/* Sin animación, la barra se queda llena y quieta: sigue diciendo «hay algo
en marcha» sin moverse, que es lo que pide quien la desactiva. */
@media (prefers-reduced-motion:reduce){
.esperando .barra span{width:100%;animation:none}
}
/* --- Aviso de necesidades desfasadas ------------------------------------ */
/* Con la acción al lado: decirle a alguien que su lista está vieja y dejarle
buscando el botón sería la mitad del favor. */
.alert.desfase{
display:flex;flex-wrap:wrap;align-items:center;gap:14px;
justify-content:space-between;
}
.alert.desfase > div{flex:1;min-width:260px}
.alert.desfase .hint{margin:4px 0 0}
/* --- Tabla de requisitos editable --------------------------------------- */
/* Los campos van sin marco hasta que se tocan: una tabla con veinte cajas
dibujadas se lee como un formulario y no como una lista. */
table.editable input[type=number],
table.editable input[type=text]{
width:100%;border-color:transparent;background:transparent;
padding:5px 7px;
}
table.editable input:hover{border-color:var(--rule)}
table.editable input:focus{border-color:var(--brand);background:var(--surface)}
table.editable input.mini{width:62px;text-align:right}
table.editable td{vertical-align:middle}
table.editable .negativo{font-size:.76rem;line-height:1.4;margin-top:3px;max-width:34ch}
/* --- Selector de ámbito de los perfiles ---------------------------------- */
/* Presente en todas las pantallas de perfiles: pasar de «Producción» a «Toda
la empresa» costaba volver al índice y elegir otra vez. Con , como
el selector de idioma: moverse por la aplicación no puede depender de que
cargue un guion. */
.selector-ambito{
display:flex;flex-wrap:wrap;align-items:center;gap:8px;
margin:0 0 26px;padding:0 0 16px;border-bottom:1px solid var(--rule);
}
.selector-ambito .ambito-directo,
.selector-ambito .ambito-menu > summary{
display:inline-flex;align-items:center;gap:8px;cursor:pointer;
padding:8px 13px;border:1px solid var(--rule);border-radius:9px;
background:var(--surface);
font-size:14px;font-weight:600;color:var(--muted);
text-decoration:none;list-style:none;white-space:nowrap;
}
.selector-ambito .ambito-menu > summary::-webkit-details-marker{display:none}
.selector-ambito .ambito-directo:hover,
.selector-ambito .ambito-menu > summary:hover{border-color:var(--rule-strong);color:var(--ink)}
.selector-ambito .ambito-directo.on,
.selector-ambito .ambito-menu.on > summary{
border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:700;
}
.selector-ambito .flecha{font-size:10px;opacity:.75}
/* La cuenta de requisitos al lado: mirando el selector ya se ve dónde hay
algo declarado y dónde no, sin entrar a comprobarlo. */
.selector-ambito .cuenta{
min-width:20px;padding:1px 6px;border-radius:999px;text-align:center;
font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.selector-ambito .cuenta.con{background:var(--brand-soft);color:var(--brand)}
.selector-ambito .cuenta.sin{background:var(--surface-2);color:var(--muted)}
.selector-ambito .ambito-directo.on .cuenta.con,
.selector-ambito .ambito-menu.on > summary .cuenta.con{background:var(--surface);}
.selector-ambito .ambito-menu{position:relative}
.selector-ambito .lista{
position:absolute;left:0;top:calc(100% + 6px);z-index:30;
min-width:250px;max-height:340px;overflow-y:auto;padding:6px;
background:var(--surface);border:1px solid var(--rule);border-radius:10px;
box-shadow:var(--shadow);
}
.selector-ambito .lista a{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:7px 10px;border-radius:7px;
font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;
}
.selector-ambito .lista a:hover{background:var(--surface-2);color:var(--ink)}
.selector-ambito .lista a.on{color:var(--brand)}
.selector-ambito .ambito-indice{
margin-left:auto;font-size:13.5px;font-weight:600;
color:var(--muted);text-decoration:none;
}
.selector-ambito .ambito-indice:hover{color:var(--brand);text-decoration:underline}
@media (max-width:640px){
.selector-ambito .ambito-indice{margin-left:0}
.selector-ambito .lista{position:static;box-shadow:none;margin-top:6px;max-height:260px}
}
/* =====================================================================
Informe de auditoria
---------------------------------------------------------------------
Se lee en pantalla para prepararse y se imprime para entregar, asi que
manda la jerarquia: cada bloque es la respuesta a una pregunta, y la
pregunta se ve antes que las cifras.
===================================================================== */
.membrete{
display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between;
padding:18px 22px;margin:22px 0 8px;
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
}
.membrete > div{min-width:min(100%,260px)}
.membrete h2{font-size:19px;font-weight:700;margin:0}
.membrete p{margin:4px 0 10px}
.membrete .k + p{margin-bottom:14px}
.membrete > div + div .k:first-child{margin-top:0}
.bloque{
margin:30px 0;padding-top:20px;border-top:2px solid var(--rule);
break-inside:avoid;
}
.bloque > h2{font-size:18px;font-weight:600;margin:0}
/* La pregunta del auditor, entrecomillada: es el hilo del informe. */
.bloque .pregunta{
margin:6px 0 2px;font-size:15px;font-style:italic;color:var(--ink);
}
.bloque .clausulas{
margin:0 0 16px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);
}
/* Rejilla de cifras. Sin ancho fijo: en un movil caben dos y en papel, cinco. */
.datos{
display:grid;gap:12px;margin:0 0 18px;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
.dato{
padding:12px 14px;background:var(--surface-2);
border:1px solid var(--rule);border-radius:var(--radius);
}
.dato .k{
font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
margin:0 0 4px;
}
.dato .n{
font-size:22px;font-weight:700;line-height:1.15;color:var(--ink);
font-variant-numeric:tabular-nums;
}
.dato .suave{font-size:12px;margin-top:2px}
/* Hallazgos. Solo en pantalla: la lista de las no conformidades propias no
se le entrega al auditor. */
.hallazgos{margin-top:34px;padding-top:22px;border-top:2px solid var(--rule)}
.hallazgo{
margin:14px 0;padding:14px 16px;background:var(--surface);
border:1px solid var(--rule);border-left:4px solid var(--rule-strong);
border-radius:var(--radius);
}
.hallazgo.grave{border-left-color:var(--danger)}
.hallazgo.leve{border-left-color:var(--gold)}
.hallazgo header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hallazgo h3{font-size:15px;font-weight:600;margin:0}
.hallazgo p{margin:6px 0 8px;font-size:13.5px}
.hallazgo .lista-personas{margin:0 0 12px}
.hallazgo .btn{margin-top:2px}
.pie-informe{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule)}
@media (max-width:640px){
.membrete{padding:14px 16px}
.datos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.dato .n{font-size:19px}
}
/* Un valor que es texto —el nombre de una escala, una fecha larga— no se
lee como una cifra y no debe ocupar como una cifra. */
.dato .n.texto{font-size:14px;font-weight:600;line-height:1.35}
/* =====================================================================
Eficacia de la formacion
---------------------------------------------------------------------
Cada revision pendiente es una tarjeta con su propio formulario: se
despacha una y se sigue con la siguiente sin perder lo tecleado en las
demas. Lo vencido se marca en el borde, que es lo que hace que se mire
antes.
===================================================================== */
.revision{
margin:14px 0;padding:16px 18px;background:var(--surface);
border:1px solid var(--rule);border-left:4px solid var(--rule-strong);
border-radius:var(--radius);
}
.revision.vencida{border-left-color:var(--gold)}
.revision > header{
display:grid;gap:14px;align-items:start;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--rule);
}
.revision > header .k{margin-bottom:2px}
.revision .suave{font-size:12.5px}
/* El juicio: los tres botones grandes primero, el detalle despues. */
.juicio{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.juicio fieldset{border:0;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.juicio legend{
font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
padding:0;margin-bottom:6px;float:left;width:100%;
}
.juicio .field{margin:0;min-width:170px}
.juicio .field.ancho{flex:1 1 220px}
.juicio .btn{flex:none}
/* Cada opcion es una etiqueta que se pinta al marcarla: el radio suelto es
demasiado pequeno para acertarle desde un movil. */
.opcion{
display:inline-flex;align-items:center;gap:7px;cursor:pointer;
padding:8px 13px;border:1px solid var(--rule);border-radius:999px;
background:var(--surface-2);font-size:13.5px;line-height:1;
}
.opcion:hover{border-color:var(--rule-strong)}
.opcion:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.opcion input{margin:0;accent-color:var(--brand)}
.opcion.eficaz:has(input:checked){background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.opcion.parcial:has(input:checked){background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.opcion.no_eficaz:has(input:checked){background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.corto{width:5.5em}
@media (max-width:640px){
.juicio{gap:10px}
.juicio .field,.juicio .field.ancho{min-width:100%;flex-basis:100%}
.juicio .btn{width:100%}
}
/* =====================================================================
Páginas sueltas: el cuestionario de autoevaluación
---------------------------------------------------------------------
Quien entra por un enlace personal no es un usuario de la aplicación:
no tiene menú, ni ajustes, ni nada que pulsar por error. Y lo va a
contestar desde el móvil, así que los niveles son botones grandes con
su descriptor al lado, no un desplegable de números.
===================================================================== */
body.pagina-suelta{padding:26px 0 60px;background:var(--paper)}
.wrap.estrecho{max-width:720px}
.cabecera-suelta{margin-bottom:26px}
.cabecera-suelta .marca{
margin:0 0 10px;font-weight:700;letter-spacing:.02em;color:var(--brand);
}
.cabecera-suelta h1{margin:0 0 4px}
.cabecera-suelta .suave{margin:0}
.pregunta-auto{
margin:18px 0;padding:18px 20px;background:var(--surface);
border:1px solid var(--rule);border-radius:var(--radius);
}
.pregunta-auto h2{font-size:16px;font-weight:600;margin:0 0 2px}
.pregunta-auto > .suave{margin:0 0 14px;font-size:13px}
.pregunta-auto input[type=text]{width:100%;margin-top:12px}
.niveles{display:flex;flex-direction:column;gap:8px}
.nivel{
display:flex;align-items:flex-start;gap:12px;cursor:pointer;
padding:11px 14px;border:1px solid var(--rule);border-radius:var(--radius);
background:var(--surface-2);line-height:1.45;
}
.nivel:hover{border-color:var(--rule-strong)}
.nivel:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.nivel input{position:absolute;opacity:0;width:0;height:0}
.nivel .cifra{
flex:none;width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--rule);color:var(--ink);font-weight:700;font-size:14px;
}
.nivel .descriptor{font-size:14px;color:var(--muted)}
.nivel:has(input:checked){
background:var(--brand-soft);border-color:var(--brand);
}
.nivel:has(input:checked) .cifra{background:var(--brand);color:#fff}
.nivel:has(input:checked) .descriptor{color:var(--ink)}
.pie-suelto{margin-top:26px}
.pie-suelto .btn{width:100%;padding:14px;font-size:16px}
.pie-suelto .hint{margin-top:14px;text-align:center}
/* El enlace personal, listo para copiar. Ancho completo y en monoespaciada:
un token de sesenta y cuatro caracteres cortado a la mitad no sirve. */
.enlace-copiar{
width:100%;min-width:260px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:12px;padding:6px 9px;
}
/* =====================================================================
Expedientes: la carpeta de una acción y la de una persona
---------------------------------------------------------------------
Los separadores se pintan todos, también los vacíos: una carpeta que
sólo enseña las pestañas con algo dentro no dice lo que falta.
===================================================================== */
.separadores{
display:grid;gap:12px;margin:14px 0 26px;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.separador{
padding:14px 16px;background:var(--surface);
border:1px solid var(--rule);border-radius:var(--radius);
}
.separador h3{font-size:13.5px;font-weight:600;margin:0 0 8px;color:var(--muted)}
.separador > .suave{margin:0;font-size:13px}
.papeles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.papeles li{font-size:14px;line-height:1.45}
.papeles .suave{font-size:12px}
.papeles.en-linea{flex-direction:row;flex-wrap:wrap;gap:8px 16px}
/* Quitar un papel es raro y no debe competir con abrirlo. */
.enlace-boton{
background:none;border:0;padding:0;margin-top:2px;cursor:pointer;
color:var(--muted);font-size:12px;text-decoration:underline;
}
.enlace-boton:hover{color:var(--danger)}
.anio-formacion{margin:22px 0}
.anio-formacion > h3{
font-size:15px;font-weight:700;margin:0 0 10px;padding-bottom:6px;
border-bottom:2px solid var(--rule);color:var(--brand);
}
.curso-hecho{
margin:10px 0;padding:14px 16px;background:var(--surface);
border:1px solid var(--rule);border-radius:var(--radius);break-inside:avoid;
}
.curso-hecho > header{
display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
align-items:flex-start;margin-bottom:10px;
}
.curso-hecho > header .suave{font-size:12.5px}
.curso-hecho .k{margin-bottom:4px}
.curso-hecho p{margin:8px 0 0}
/* =====================================================================
Importar
---------------------------------------------------------------------
Los tipos van numerados porque el orden importa de verdad: los puestos
necesitan departamentos y las cualificaciones necesitan gente. Uno
abierto a la vez, que es como se hace: de arriba abajo.
===================================================================== */
.tipos-importables{display:flex;flex-direction:column;gap:10px;margin:14px 0 30px}
details.tipo{
background:var(--surface);border:1px solid var(--rule);
border-radius:var(--radius);overflow:hidden;
}
details.tipo > summary{
display:flex;align-items:flex-start;gap:14px;cursor:pointer;
padding:14px 18px;list-style:none;
}
details.tipo > summary::-webkit-details-marker{display:none}
details.tipo[open] > summary{border-bottom:1px solid var(--rule)}
details.tipo > summary:hover{background:var(--surface-2)}
details.tipo .orden{
flex:none;width:26px;height:26px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--brand);color:#fff;font-weight:700;font-size:13px;
}
details.tipo > summary .suave{font-size:13px;margin-top:2px}
details.tipo > *:not(summary){margin-left:18px;margin-right:18px}
details.tipo > *:last-child{margin-bottom:18px}
details.tipo .k{margin-top:14px}
.columnas{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 30px}
.columnas li{display:flex;align-items:center;gap:7px;font-size:13px}
.columnas .muestra{color:var(--muted);font-style:italic}
.columnas code{
background:var(--surface-2);border:1px solid var(--rule);
border-radius:5px;padding:2px 7px;font-size:12.5px;
}
/* =====================================================================
La guía de elaboración del plan
---------------------------------------------------------------------
Al lado del contenido en pantalla ancha y encima en la estrecha, donde
una columna de 260 px dejaría el contenido en un canalón. Se queda
pegada al hacer scroll: quien está a mitad de la priorización sigue
viendo por dónde va.
===================================================================== */
.con-guia{display:grid;gap:30px;align-items:start;grid-template-columns:minmax(0,1fr) 270px}
.con-guia-contenido{min-width:0}
.guia-lateral{position:sticky;top:16px}
.guia-pasos{
padding:16px 18px;background:var(--surface);
border:1px solid var(--rule);border-radius:var(--radius);
}
.guia-pasos h2{font-size:14px;font-weight:600;margin:0 0 10px}
.guia-pasos .avance{margin:0 0 14px;font-size:12px;color:var(--muted)}
.guia-pasos .barra{display:block;margin-bottom:5px}
.guia-pasos .terminado{
margin:0 0 14px;font-size:12.5px;color:var(--ok);font-weight:600;
}
.pasos{list-style:none;margin:0;padding:0;counter-reset:none}
.pasos li{position:relative;padding-left:0}
.pasos li + li{margin-top:2px}
.pasos a{
display:flex;gap:11px;align-items:flex-start;
padding:9px 10px;border-radius:var(--radius);
text-decoration:none;color:var(--ink);
}
.pasos a:hover{background:var(--surface-2)}
/* El número, o el visto cuando está hecho. */
.pasos .marca{
flex:none;width:22px;height:22px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--surface-2);border:1px solid var(--rule-strong);
color:var(--muted);font-size:12px;font-weight:700;line-height:1;
}
.pasos .hecho .marca{background:var(--ok);border-color:var(--ok);color:#fff}
.pasos .toca .marca{background:var(--brand);border-color:var(--brand);color:#fff}
.pasos .cuerpo{display:flex;flex-direction:column;gap:2px;min-width:0}
.pasos .nombre{font-size:13.5px;font-weight:600;line-height:1.3}
.pasos .apunte{
font-weight:400;font-size:11px;color:var(--muted);
text-transform:lowercase;
}
.pasos .detalle{font-size:12px;color:var(--muted);line-height:1.35}
.pasos .detalle.sin{font-style:italic}
.pasos .ayuda{
font-size:12px;color:var(--muted);line-height:1.45;
margin-top:4px;padding-left:9px;border-left:2px solid var(--rule);
}
/* Dónde estás: se marca el bloque entero, no sólo el texto. */
.pasos .aqui > a{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--brand)}
.pasos .aqui .nombre{color:var(--brand)}
.etiqueta-toca{
display:block;margin:6px 0 1px 43px;
font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--brand);font-weight:700;
}
@media (max-width:1080px){
.con-guia{grid-template-columns:1fr}
.guia-lateral{position:static;order:-1}
.pasos{display:grid;gap:2px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pasos .ayuda{display:none}
}
/* Un desplegable cuyo resumen ya es un botón no necesita el triángulo del
navegador encima. Lo usa «el resto de la plantilla» al convocar; estaba
junto al ajuste de puntuación y se fue con él cuando aquel pasó a ser una
fila de la tabla. */
details.ajuste > summary{list-style:none;cursor:pointer;display:inline-block}
details.ajuste > summary::-webkit-details-marker{display:none}
details.ajuste > .lista-personas{margin-top:12px}
/* --- Inicio: el recorrido del año ------------------------------------ */
/* Tres zonas en fila —preparar, plan del año, seguimiento— con sus pasos.
Hecho en verde con su marca, el que toca en oro y lo que viene despues,
solo con el borde: el mismo codigo que la guia lateral, a lo ancho. */
.recorrido{display:grid;grid-template-columns:1fr 2.3fr 1.5fr;gap:12px;margin:0 0 18px}
.zona{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;min-width:0;
}
.zona h2{
margin:0;font-size:14px;font-weight:700;display:flex;justify-content:space-between;
align-items:baseline;gap:8px;
}
.zona h2 span{font-family:'Nunito Sans',system-ui,sans-serif;font-size:12px;font-weight:700;color:var(--muted)}
.zpasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.zpasos li{min-width:0}
.zpasos a{
display:flex;flex-direction:column;gap:2px;height:100%;padding:9px 11px;border-radius:8px;
text-decoration:none;color:var(--ink);background:var(--surface-2);
}
.zpasos a:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.zpasos b{font-size:14px;display:flex;align-items:center;gap:6px}
.zpasos span{font-size:12.5px;color:var(--muted);line-height:1.35}
.zpasos b::before{content:'';width:15px;height:15px;border-radius:50%;flex-shrink:0;box-sizing:border-box}
.zpasos .hecho b::before{
background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.zpasos .toca a{background:var(--gold-soft);box-shadow:inset 0 0 0 1.5px var(--gold)}
.zpasos .toca b{color:var(--gold-ink)}
.zpasos .toca b::before{border:2px solid var(--gold);background:radial-gradient(circle,var(--gold) 0 3px,transparent 3.5px)}
.zpasos .luego a{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
.zpasos .luego a:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.zpasos .luego b::before{border:2px solid var(--rule-strong)}
.zpasos .opcional b::before{border-style:dashed}
.inicio-dos{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start;margin:0 0 30px}
.siguiente-paso{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
box-shadow:var(--shadow);padding:22px 24px;
}
.siguiente-paso .eyebrow{
margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-ink);
}
.siguiente-paso h2{margin:0 0 8px;font-size:21px}
.siguiente-paso p{margin:0 0 14px;color:var(--muted);max-width:62ch}
.siguiente-paso p:last-child{margin-bottom:0}
.pendientes{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:14px 0 6px}
.pendientes h2{margin:0 20px 6px;font-size:15px}
.pendientes .hint{margin:0 20px 10px}
.pendientes ul{list-style:none;margin:0;padding:0}
.pendientes li{display:flex;gap:12px;align-items:flex-start;padding:11px 20px;border-top:1px solid var(--rule)}
.pendientes li:first-child{border-top:0}
.pendientes .punto{width:9px;height:9px;border-radius:50%;margin-top:7px;flex-shrink:0;background:var(--rule-strong)}
.pendientes .peligro .punto{background:var(--danger)}
.pendientes .oro .punto{background:var(--gold)}
.pendientes .texto{flex:1;min-width:0;display:flex;flex-direction:column}
.pendientes .texto b{font-size:14.5px}
.pendientes .texto span{font-size:13px;color:var(--muted)}
.pendientes li > a{font-size:13.5px;font-weight:700;white-space:nowrap;text-decoration:none}
.titulillo{
font-family:'Nunito Sans',system-ui,sans-serif;font-size:12px;font-weight:800;
letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:10px 0 14px;
}
@media (max-width:900px){
.recorrido,.inicio-dos{grid-template-columns:1fr}
}
/* --- Preparar: los cimientos, en orden -------------------------------- */
.preparar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.preparar > li{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
padding:16px 20px;display:grid;grid-template-columns:34px 1fr auto;gap:16px;align-items:center;
}
.preparar > li.toca{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.preparar .orden{
width:30px;height:30px;border-radius:50%;display:grid;place-items:center;align-self:start;
font-family:'Comfortaa',sans-serif;font-weight:700;background:var(--surface-2);color:var(--muted);
}
.preparar .hecho .orden{background:var(--ok-soft);color:var(--ok)}
.preparar .toca .orden{background:var(--gold-soft);color:var(--gold-ink)}
.preparar h2{margin:0;font-size:16px}
.preparar h2 a{color:inherit;text-decoration:none}
.preparar h2 a:hover{color:var(--brand)}
.preparar .cuerpo p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.preparar .cifras{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px!important}
.preparar .chip{padding:2px 9px;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--surface-2);border-color:transparent}
.preparar .chip:hover{color:var(--ink);border-color:transparent}
.preparar .chip.vacio{background:var(--warn-soft);color:var(--warn)}
@media (max-width:640px){
.preparar > li{grid-template-columns:34px 1fr}
.preparar > li > .btn{grid-column:2;justify-self:start}
}
/* --- Pasos del plan numerados en la subnavegacion --------------------- */
.subnav.pasos-plan a{display:inline-flex;align-items:center;gap:7px}
.subnav.pasos-plan .num{
width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;
font-size:11.5px;font-weight:800;background:var(--surface-2);color:var(--muted);
}
.subnav.pasos-plan a.on .num{background:var(--brand);color:var(--brand-ink)}
/* --- Selector de ejercicio en la cabecera ----------------------------- */
/* Uno para toda la aplicacion, junto al logotipo. Desplegable y no fichas:
asi llega a cualquier año con datos, no solo al que se ejecuta y al
siguiente. Sin JavaScript, con , como el idioma. */
.anio-cab{position:relative;flex-shrink:0}
.anio-cab summary{
list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
padding:5px 10px 5px 12px;border:1px solid var(--rule-strong);border-radius:8px;
font-weight:700;font-size:14px;background:var(--surface);
}
.anio-cab summary::-webkit-details-marker{display:none}
.anio-cab summary::after{
content:'';width:0;height:0;border:4px solid transparent;border-top-color:currentColor;
margin-top:4px;opacity:.6;
}
.anio-cab[open] summary::after{transform:rotate(180deg);margin-top:-4px}
.anio-cab summary:hover,.anio-cab[open] summary{border-color:var(--brand)}
.anio-cab .a{font-family:'Comfortaa',sans-serif;font-variant-numeric:tabular-nums}
.anio-cab .estado{
font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:99px;
background:var(--surface-2);color:var(--muted);white-space:nowrap;
}
.anio-cab .estado.ejecucion{background:var(--ok-soft);color:var(--ok)}
.anio-cab .estado.elaboracion{background:var(--gold-soft);color:var(--gold-ink)}
.anio-cab .menu{
position:absolute;left:0;top:calc(100% + 6px);z-index:40;min-width:210px;
max-height:min(420px,70vh);overflow-y:auto;
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
box-shadow:var(--shadow);padding:5px;display:flex;flex-direction:column;gap:2px;
}
.anio-cab .menu a{
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:7px 10px;border-radius:7px;text-decoration:none;color:var(--ink);font-weight:700;
}
.anio-cab .menu a:hover{background:var(--surface-2)}
.anio-cab .menu a.on{background:var(--brand-soft);color:var(--brand)}
@media print{.anio-cab{display:none}}
/* Sin el selector de ejercicio en la barra, cada boton con margen automatico
se repartia el hueco y quedaban separados: solo el primero empuja. */
.toolbar > .btn ~ .btn{margin-left:0}
/* En el movil no cabian logotipo, año con su estado y el boton del menu: la
etiqueta del estado se queda en el desplegable, que es donde se elige. */
@media (max-width:640px){
.topbar .wrap{gap:10px}
.anio-cab summary .estado{display:none}
.anio-cab summary{padding:5px 9px}
}
/* --- Modelo de formacion (Ajustes › Empresa) --------------------------- */
.modelo-formacion{margin-top:28px}
.opciones-modelo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:6px 0 12px}
.opcion-modelo{
display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid var(--rule-strong);
border-radius:var(--radius);cursor:pointer;background:var(--surface);font-weight:400;margin:0;
}
.opcion-modelo:hover{border-color:var(--brand)}
.opcion-modelo.elegida,.opcion-modelo:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.opcion-modelo input{margin-top:4px;accent-color:var(--brand)}
.opcion-modelo .cuerpo{display:flex;flex-direction:column;gap:4px}
.opcion-modelo strong{font-size:16px}
.opcion-modelo em{font-style:normal;font-weight:700;color:var(--ink);font-size:14px}
.opcion-modelo .cuerpo > span{font-size:13.5px;color:var(--muted)}
/* --- Rubrica por indicadores ------------------------------------------ */
.rubrica .nivel-rubrica{border:1px solid var(--rule);border-radius:var(--radius);padding:12px 16px 14px;margin:0 0 12px}
.rubrica .nivel-rubrica.sin-guardar{border-style:dashed}
.rubrica legend{display:flex;align-items:center;gap:8px;font-weight:700;padding:0 6px}
.rubrica legend .num{
width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;
font-size:12px;background:var(--brand-soft);color:var(--brand);
}
.rubrica textarea{font-size:14.5px;line-height:1.55}
.descriptor-nivel{margin:0 0 8px;font-size:13.5px;color:var(--muted)}
.descriptor-nivel summary{cursor:pointer;font-weight:600}
.descriptor-nivel p{margin:6px 0 0;max-width:80ch}
a.pill{text-decoration:none;white-space:nowrap}
/* --- Matriz de polivalencia -------------------------------------------- */
/* La tabla es el producto: filas de personas, columnas de competencias y una
celda que se entiende de un vistazo. Los titulos van girados porque con
treinta competencias no hay ancho que valga, y la primera columna se queda
fija al desplazar: sin el nombre a la vista, una celda de color no dice
nada. */
.leyenda-cobertura{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px;font-size:13px;color:var(--muted)}
.leyenda-cobertura span{display:inline-flex;align-items:center;gap:6px}
.leyenda-cobertura i{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid var(--rule)}
table.polivalencia{border-collapse:separate;border-spacing:0}
table.polivalencia th.persona{
position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;
min-width:210px;border-right:1px solid var(--rule);
}
table.polivalencia thead th{vertical-align:bottom;background:var(--surface)}
table.polivalencia th.vertical{height:186px;padding:0 0 8px;width:34px;min-width:34px}
table.polivalencia th.vertical span{
display:block;writing-mode:vertical-rl;transform:rotate(180deg);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:176px;
font-size:12.5px;font-weight:700;letter-spacing:.01em;text-transform:none;color:var(--ink);
}
table.polivalencia th.persona .suave{display:block;font-size:12px;font-weight:400}
table.polivalencia td.celda{
text-align:center;width:34px;min-width:34px;padding:0;height:34px;
font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
border:1px solid var(--surface);
}
.celda-supera{background:var(--ok);color:var(--brand-ink)}
.celda-cumple{background:var(--ok-soft);color:var(--ok)}
.celda-caduca{background:var(--warn-soft);color:var(--warn)}
.celda-caducada{background:var(--danger);color:#fff}
.celda-corto{background:var(--danger-soft);color:var(--danger)}
.celda-sin{background:var(--surface-2);color:var(--muted)}
.celda-na{color:var(--rule-strong);text-align:center}
.riesgo-cobertura{list-style:none;margin:0 0 26px;padding:0;
background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.riesgo-cobertura li{display:flex;gap:12px;align-items:center;padding:11px 18px;border-top:1px solid var(--rule)}
.riesgo-cobertura li:first-child{border-top:0}
.riesgo-cobertura .punto{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--gold)}
.riesgo-cobertura .nadie .punto{background:var(--danger)}
.riesgo-cobertura .texto{flex:1;min-width:0;display:flex;flex-direction:column}
.riesgo-cobertura .texto b{font-size:14.5px}
.riesgo-cobertura .texto span{font-size:13px;color:var(--muted)}
@media print{
table.polivalencia th.persona{position:static}
.leyenda-cobertura{display:flex}
}
/* --- Encuesta de satisfaccion ------------------------------------------ */
.encuesta .pregunta{border:0;padding:0;margin:0 0 22px}
.encuesta legend{font-weight:700;font-size:15.5px;padding:0;margin-bottom:8px}
.encuesta .escala{display:grid;grid-template-columns:44px repeat(5,1fr);gap:8px}
.encuesta .escala label{
cursor:pointer;display:block;text-align:center;
border:1px solid var(--rule-strong);border-radius:9px;padding:12px 0;font-weight:800;font-size:17px;
}
.encuesta .escala label:hover{border-color:var(--brand)}
.encuesta .escala input{position:absolute;opacity:0;width:0;height:0}
.encuesta .escala label:has(input:checked){background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.encuesta .escala label.ninguna{color:var(--muted);font-weight:400}
.encuesta .extremos{display:flex;justify-content:space-between;margin:6px 2px 0;font-size:12.5px;color:var(--muted)}
.anonima{background:var(--brand-soft);color:var(--brand);border-radius:var(--radius);padding:10px 14px;font-size:14px}
.encuesta-caja .enlace-encuesta input{font-size:13.5px;font-family:ui-monospace,Menlo,Consolas,monospace}
.resultado-encuesta{margin-top:18px;border-top:1px solid var(--rule);padding-top:14px}
.resultado-encuesta .medias{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.resultado-encuesta .media{
flex:1 1 92px;background:var(--surface-2);border-radius:var(--radius);padding:10px 12px;text-align:center;
}
.resultado-encuesta .media.destacada{background:var(--brand-soft)}
.resultado-encuesta .media .n{
display:block;font-family:'Comfortaa',sans-serif;font-size:22px;font-weight:700;
color:var(--brand);font-variant-numeric:tabular-nums;
}
.resultado-encuesta .media .k{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.resultado-encuesta .comentarios{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.resultado-encuesta .comentarios li{
background:var(--surface-2);border-radius:var(--radius);padding:9px 13px;font-size:14px;
}
/* La opcion que devuelve una pregunta a «sin contestar»: se distingue de las
demas para que se vea que no es una respuesta mas. */
.opcion.ninguna,.nivel.ninguno{border-style:dashed;color:var(--muted)}
.preparar .atajos{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px!important;font-size:13.5px;font-weight:700}
.preparar .atajos a{text-decoration:none}
.paginacion{display:flex;align-items:center;gap:12px;margin:14px 0 0;font-size:13.5px}
/* --- Hoja de firmas ---------------------------------------------------- */
/* Un documento, no una pantalla: se disena para el folio y para el boligrafo,
con celdas altas donde quepa una firma de verdad. */
table.datos-firmas{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
table.datos-firmas th{
text-align:left;width:14%;padding:7px 10px;background:var(--surface-2);
font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
border:1px solid var(--rule);
}
table.datos-firmas td{padding:7px 10px;border:1px solid var(--rule)}
table.firmas{width:100%;border-collapse:collapse;font-size:14px}
table.firmas th{
padding:8px 10px;border:1px solid var(--rule-strong);background:var(--surface-2);
font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;
}
table.firmas td{border:1px solid var(--rule-strong);padding:8px 10px;height:42px;vertical-align:middle}
table.firmas td.num{width:34px;text-align:right;color:var(--muted)}
table.firmas td .suave{display:block;font-size:12px}
table.firmas th.dia{width:110px;text-align:center}
table.firmas td.firma{width:110px}
table.firmas td.firma-dni{width:120px}
table.firmas td.firma-nombre{min-width:200px}
.pie-firmas{display:flex;gap:26px;margin:26px 0 12px}
.pie-firmas > div{flex:1}
.pie-firmas .k{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.pie-firmas .caja-firma{height:74px;border:1px solid var(--rule-strong);border-radius:6px}
.pie-firmas .suave{margin:5px 0 0;font-size:12.5px}