/* ===========================================================================
   Sistema CEDECC · hoja de estilo unica
   ---------------------------------------------------------------------------
   Identidad: el logotipo de CEDECC es un brote verde con un punto ambar. De ahi
   sale todo: verde musgo para lo estructural, ambar SOLO para lo que reclama
   atencion o marca el ahora, y un papel salvia palido que no es gris ni crema.

   Tipografia: la grotesca del sistema para la interfaz, con escala y tracking
   deliberados; monoespaciada con cifras tabulares para todo numero, codigo y
   fecha, para que las columnas cuadren. En un ERP eso es legibilidad.

   La pieza que se recuerda: la tarjeta de proyecto. Es deliberadamente escueta
   —imagen, nombre, cliente y fechas— porque la cartera sirve para reconocer y
   abrir; el avance, las horas y el margen tienen su propio modulo.
   =========================================================================== */

:root{
  /* Identidad */
  --tinta:#101c15;      /* texto */
  --papel:#f4f6f1;      /* fondo de la aplicacion */
  --lienzo:#ffffff;     /* tarjetas */
  --niebla:#dfe5da;     /* hairlines */
  --humo:#f7f9f5;       /* zonas apagadas dentro de una tarjeta */
  --musgo:#1f6b34;      /* verde de marca */
  --musgo-cl:#2d7c33;
  --musgo-hondo:#123f21;
  --brote:#e8a13a;      /* ambar: atencion y "ahora" */

  /* Compatibilidad con los nombres que ya usan las vistas */
  --v:#1f6b34;--v2:#2d7c33;--vc:#e6f0e8;--vt:#f1f7f2;
  --am:#a8630a;--ambg:#fdf4e7;--ro:#b0271c;--robg:#fbeae8;
  --az:#1d4e6b;--azbg:#eaf1f5;--mo:#5b3a8e;--mobg:#f0eaf7;
  --bg:var(--papel);--card:var(--lienzo);--ink:var(--tinta);--mu:#66756c;--ln:var(--niebla);

  --sh:0 1px 2px rgba(16,28,21,.04),0 2px 10px rgba(16,28,21,.045);
  --sh-alta:0 2px 6px rgba(16,28,21,.07),0 14px 34px rgba(16,28,21,.10);
  --r:12px;--r-ch:9px;
  --ui:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --datos:ui-monospace,"Cascadia Mono","SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Consolas,monospace;
  --rail-w:238px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ui);background:var(--papel);color:var(--tinta);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"tnum" 1}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* Cifras tabulares en todo lo que sea dato */
.kpi .v,table.m td.h,.inf td.h,.dt,.bd,input.n,.mes-celda,.gantt-barra,.cal-num,
.dato,.sello-cod,.barra-chip,.pv{font-family:var(--datos);font-feature-settings:"tnum" 1}

/* ===================== Ingreso ===================== */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 20px;
  background:radial-gradient(120% 90% at 20% 0%,#2b7d3c 0%,#1a5b2c 45%,#0f3a1e 100%)}
.lbox{background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.32);width:100%;max-width:412px;padding:34px 32px}
.lbox .sb{font-size:12.5px;color:var(--mu);margin-bottom:22px;text-align:center;line-height:1.45}
.logo-login{display:block;max-width:216px;width:100%;height:auto;margin:0 auto 6px}

/* ===================== Estructura ===================== */
#app{display:none}
#app.on{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh}

/* --- Barra lateral --- */
.rail{background:linear-gradient(176deg,#1a5c2c 0%,#123f21 100%);color:#c6d8c9;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:60}
.rail-marca{padding:18px 16px 14px;display:flex;align-items:center;gap:10px}
.rail-logo{background:#fff;border-radius:9px;padding:6px 10px;display:block;line-height:0;
  box-shadow:0 2px 8px rgba(0,0,0,.22)}
.rail-logo img{height:26px;width:auto;display:block}
.rail-x{display:none;margin-left:auto;background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer}

.rail-nav{flex:1;overflow-y:auto;padding:4px 10px 16px;display:flex;flex-direction:column;gap:1px}
.rail-nav::-webkit-scrollbar{width:6px}
.rail-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.rail-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;
  border:none;color:#bdd2c2;font-size:13px;font-weight:600;letter-spacing:-.01em;
  padding:9px 11px;border-radius:8px;cursor:pointer;position:relative;
  transition:background .14s ease,color .14s ease}
.rail-item svg{flex:none;opacity:.7;transition:opacity .14s ease,color .14s ease}
.rail-item:hover{background:rgba(255,255,255,.06);color:#fff}
.rail-item:hover svg{opacity:1}
.rail-item.on{background:rgba(255,255,255,.11);color:#fff}
.rail-item.on svg{opacity:1;color:var(--brote)}
.rail-item.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
  background:var(--brote);border-radius:0 3px 3px 0}
.rail-item:focus-visible{outline:2px solid var(--brote);outline-offset:1px}
.rail-sep{height:1px;background:rgba(255,255,255,.08);margin:10px 11px}

.rail-pie{border-top:1px solid rgba(255,255,255,.09);padding:12px 14px 15px}
.rail-user{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.rail-user .av{background:rgba(255,255,255,.15);color:#fff}
.rail-user-txt{min-width:0;line-height:1.25}
.rail-user-txt b{display:block;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-user-txt span{font-size:10.5px;color:#8fa895;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.rail-acciones{display:flex;gap:6px}
.rail-acciones button{flex:1;background:rgba(255,255,255,.09);border:none;color:#bdd2c2;
  border-radius:7px;padding:7px 8px;font-size:11.5px;font-weight:600;cursor:pointer;transition:.14s}
.rail-acciones button:hover{background:rgba(255,255,255,.17);color:#fff}
.rail-velo{display:none;position:fixed;inset:0;background:rgba(14,41,22,.45);border:none;z-index:55}

/* --- Lienzo --- */
.lienzo{min-width:0;display:flex;flex-direction:column;background:var(--papel)}
.barra{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--niebla);display:flex;align-items:center;gap:12px;
  padding:14px 30px 13px;position:sticky;top:0;z-index:40}
.barra-menu{display:none;background:none;border:1px solid var(--niebla);border-radius:8px;
  padding:6px 8px;cursor:pointer;line-height:0}
.barra-miga{min-width:0;flex:1}
.barra-miga h1{font-size:19px;font-weight:700;letter-spacing:-.022em;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-miga p{font-size:12px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.barra-der{display:flex;align-items:center;gap:8px;flex:none}
.barra-chip{font-size:11.5px;color:var(--mu);background:var(--humo);border:1px solid var(--niebla);
  border-radius:20px;padding:5px 12px;font-weight:600;white-space:nowrap}

.pestanas{padding:14px 30px 0;position:relative}
/* La tira de pestanas se desplaza en horizontal cuando no caben. Se avisa con
   un degradado en el borde y con flechas, para que nadie se quede sin ver una
   pestana por no saber que puede arrastrar. */
.pestanas>div{display:flex;gap:3px;overflow-x:auto;scroll-behavior:smooth;
  background:var(--lienzo);border:1px solid var(--niebla);border-radius:11px;padding:4px;
  box-shadow:var(--sh);width:max-content;max-width:100%;
  scrollbar-width:thin;scrollbar-color:#c8d5cb transparent}
.pestanas>div::-webkit-scrollbar{height:5px}
.pestanas>div::-webkit-scrollbar-thumb{background:#c8d5cb;border-radius:3px}
.pestanas>div::-webkit-scrollbar-track{background:transparent}
.pestanas>div:empty{display:none}
.pestanas.desborda::before,.pestanas.desborda::after{content:"";position:absolute;top:14px;bottom:0;
  width:34px;pointer-events:none;z-index:2;opacity:0;transition:opacity .15s}
.pestanas.desborda::before{left:30px;border-radius:11px 0 0 11px;
  background:linear-gradient(90deg,var(--lienzo) 25%,rgba(255,255,255,0))}
.pestanas.desborda::after{right:30px;border-radius:0 11px 11px 0;
  background:linear-gradient(270deg,var(--lienzo) 25%,rgba(255,255,255,0))}
.pestanas.hay-izq::before{opacity:1}
.pestanas.hay-der::after{opacity:1}
.pestanas-flecha{display:none;position:absolute;top:20px;z-index:3;width:26px;height:26px;
  border-radius:50%;border:1px solid var(--niebla);background:var(--lienzo);cursor:pointer;
  align-items:center;justify-content:center;color:var(--mu);box-shadow:var(--sh)}
.pestanas-flecha:hover{color:var(--tinta);border-color:#c2cfc4}
.pestanas-flecha.izq{left:34px}
.pestanas-flecha.der{right:34px}
.pestanas.hay-izq .pestanas-flecha.izq,
.pestanas.hay-der .pestanas-flecha.der{display:flex}
.tab{border:1px solid transparent;background:none;cursor:pointer;padding:8px 14px;color:var(--mu);
  font-size:12.5px;font-weight:600;white-space:nowrap;border-radius:8px;transition:.14s}
.tab:hover{color:var(--tinta);background:var(--humo)}
.tab.active{background:var(--vc);border-color:#bcd8c3;color:var(--musgo-hondo)}
.tab:focus-visible{outline:2px solid var(--musgo);outline-offset:1px}
.tab.volver{color:var(--az);font-weight:700;border-right:1px solid var(--niebla);
  border-radius:8px 0 0 8px;margin-right:5px;padding-right:14px}
.tab.volver{display:inline-flex;align-items:center;gap:7px}
.tab.volver:hover{background:var(--azbg)}
/* Volver: siempre azul, con flecha grande en un circulo, en todo el sistema. */
.volver-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;
  border-radius:50%;background:var(--az);color:#fff;transition:background .15s,color .15s}
.btn-volver{display:inline-flex;align-items:center;gap:9px;padding:6px 16px 6px 6px;border:1.5px solid var(--az);
  border-radius:999px;background:var(--azbg);color:var(--az);font:inherit;font-weight:700;font-size:13.5px;
  line-height:1.2;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.btn-volver:hover{background:var(--az);color:#fff;box-shadow:0 2px 8px rgba(29,78,107,.25)}
.btn-volver:hover .volver-ico{background:#fff;color:var(--az)}
.btn-volver:focus-visible{outline:2px solid var(--az);outline-offset:2px}
.fila-abrible[data-doble]{cursor:pointer}

main{flex:1;padding:22px 30px 72px;max-width:1320px;width:100%;animation:entraVista .16s ease-out}
@keyframes entraVista{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.view{display:none}.view.active{display:block}
/* Repintando la misma pantalla, lo que se ve se queda hasta que llega lo nuevo.
   Solo si tarda se atenua, y el retraso va aqui y no en el JS: con una respuesta
   rapida la clase se quita antes de que empiece, y no se ve nada. Un atenuado de
   un instante tambien seria un parpadeo. */
#vista{transition:opacity .12s ease}
#vista.actualizando{opacity:.6;transition:opacity .2s ease .3s}
.foot{color:#98a49c;font-size:11px;padding:0 30px 26px}

/* Solo esconde los segmentos de la VISTA (dentro de <main>): un modal puede
   reusar .segs para su propio interruptor y no tiene nada que ver con la
   pestana que este abierta detras. */
body.sin-segs main .segs{display:none}

/* ===================== Encabezados de vista ===================== */
.eb{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--musgo);margin-bottom:10px}
h2.sec{font-size:21px;font-weight:700;letter-spacing:-.022em;margin-bottom:3px}
.sub{color:var(--mu);font-size:12.5px;margin-bottom:16px;max-width:78ch;line-height:1.5}

/* ===================== Filtros =====================
   Una sola linea discreta. El periodo se elige en un calendario de meses; lo
   demas son menus que solo se abren cuando se usan. Lo que quede activo baja
   como chip y se quita con un clic. */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:18px}
.filtro-buscar{position:relative;flex:0 1 268px;min-width:190px}
.filtro-buscar svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:#93a099;pointer-events:none}
.filtro-buscar input{width:100%;border:1px solid var(--niebla);border-radius:var(--r-ch);
  background:var(--lienzo);padding:8px 12px 8px 33px;font-size:13px;transition:.14s}
.filtro-buscar input::placeholder{color:#98a49c}
.filtro-buscar input:focus{outline:none;border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc)}

.filtro-menu{position:relative}
.filtro-boton{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--niebla);
  background:var(--lienzo);border-radius:var(--r-ch);padding:8px 12px;font-size:12.5px;
  font-weight:600;color:var(--tinta);cursor:pointer;transition:.14s;white-space:nowrap}
.filtro-boton:hover{border-color:#c2cfc4;background:var(--humo)}
.filtro-boton:focus-visible{outline:2px solid var(--musgo);outline-offset:1px}
.filtro-boton.puesto{border-color:#bcd8c3;background:var(--vc);color:var(--musgo-hondo)}
.filtro-boton svg{color:#8b978f;flex:none}
.filtro-boton.puesto svg{color:var(--musgo)}
.filtro-boton .caret{width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.55}
.filtro-menu.abierto>.filtro-boton{border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc)}

.filtro-panel{display:none;position:absolute;z-index:50;top:calc(100% + 6px);left:0;
  background:var(--lienzo);border:1px solid var(--niebla);border-radius:12px;
  box-shadow:var(--sh-alta);padding:7px;min-width:210px;
  animation:abrePanel .13s ease-out}
.filtro-menu.abierto>.filtro-panel{display:block}
/* Un menu que ya estaba abierto antes de repintar no vuelve a animarse. */
.filtro-menu.quieto>.filtro-panel{animation:none}
@keyframes abrePanel{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.filtro-panel.der{left:auto;right:0}
.filtro-opcion{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:none;border-radius:8px;padding:8px 10px;font-size:13px;cursor:pointer;color:var(--tinta)}
.filtro-opcion:hover{background:var(--humo)}
.filtro-opcion.on{background:var(--vc);color:var(--musgo-hondo);font-weight:600}
.filtro-opcion .marca{width:14px;height:14px;flex:none;opacity:0}
.filtro-opcion.on .marca{opacity:1}

/* Calendario de meses: se elige inicio y luego fin */
.cal-per{width:290px;padding:4px}
.cal-per-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:4px 4px 10px}
.cal-per-cab b{font-size:14px;font-weight:700;font-family:var(--datos)}
.cal-per-nav{border:1px solid var(--niebla);background:var(--lienzo);border-radius:7px;
  width:28px;height:28px;display:grid;place-items:center;cursor:pointer;color:var(--mu)}
.cal-per-nav:hover{background:var(--humo);color:var(--tinta)}
.cal-per-rej{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.cal-per-mes{border:1px solid transparent;background:var(--humo);border-radius:8px;padding:9px 0;
  font-size:12px;font-weight:600;cursor:pointer;color:var(--tinta);transition:.12s;
  font-family:var(--datos)}
.cal-per-mes:hover{background:var(--vc);color:var(--musgo-hondo)}
.cal-per-mes.dentro{background:var(--vt);color:var(--musgo-hondo)}
.cal-per-mes.borde{background:var(--musgo);border-color:var(--musgo);color:#fff}
.cal-per-mes.ahora{box-shadow:inset 0 0 0 1.5px var(--brote)}
.cal-per-pie{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  border-top:1px solid var(--niebla);margin-top:9px;padding:9px 3px 3px}
.cal-per-pie .hint{margin:0;flex:1;min-width:110px}
.cal-per-atajos{display:flex;flex-wrap:wrap;gap:4px;padding:0 3px 8px}
.cal-per-atajo{border:1px solid var(--niebla);background:var(--lienzo);border-radius:20px;
  padding:5px 10px;font-size:11px;font-weight:600;color:var(--mu);cursor:pointer;transition:.12s}
.cal-per-atajo:hover{border-color:var(--musgo-cl);background:var(--vc);color:var(--musgo-hondo)}

.filtros-accion{margin-left:auto}
.meses-campos>*{min-width:78px;flex:0 1 78px}

/* Campo de portada: se ve la que hay antes de cambiarla */
.portada-campo{display:flex;gap:12px;align-items:flex-start}
.portada-vista{width:112px;height:63px;flex:none;border-radius:9px;border:1px solid var(--niebla);
  object-fit:cover;display:block;background:var(--humo)}
.portada-vista.vacia{display:grid;place-items:center;font-size:10.5px;color:#98a49c;
  font-weight:600;text-align:center;line-height:1.2}
.portada-datos{flex:1;min-width:0}
.portada-datos input[type="file"]{width:100%;font-size:12.5px;border:1px dashed var(--niebla);
  border-radius:var(--r-ch);padding:9px 10px;background:var(--humo);cursor:pointer}
.portada-datos input[type="file"]:hover{border-color:var(--musgo-cl);background:var(--vt)}
.portada-datos .hint{margin-top:6px}

/* ===================== Dictar una tarea =====================
   El bloque de voz va arriba del formulario y se distingue del resto: es una
   forma distinta de llenarlo, no un campo mas. */
.dictado{background:var(--vt);border:1px solid #cfe2d4;border-radius:12px;padding:13px 14px;margin-bottom:18px}
.dictado-cab .eb{display:flex;align-items:center;gap:6px;color:var(--musgo)}
.dictado-cab .hint{display:block;margin-top:4px}
.dictado-botones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.dictado-botones .btn{display:inline-flex;align-items:center;gap:6px}
.dictado-estado{font-size:11.5px;color:var(--mu);font-weight:600}
#tk-grabar.grabando{background:var(--ro);border-color:var(--ro);animation:pulsoGrabar 1.6s ease-in-out infinite}
/* El mismo aviso para cualquier otro bloque de dictado (js/dictado.js). */
.dictado-botones .btn.grabando,.dictado-botones .btn.grabando:hover{background:var(--ro);border-color:var(--ro);
  animation:pulsoGrabar 1.6s ease-in-out infinite}
@keyframes pulsoGrabar{0%,100%{box-shadow:0 0 0 0 rgba(176,39,28,.45)}50%{box-shadow:0 0 0 6px rgba(176,39,28,0)}}
.dictado textarea{background:#fff}

/* ===================== Importar tareas =====================
   La revision necesita ancho: son seis columnas y hasta sesenta filas. */
.modal.ancho{max-width:1040px}
.imp-tabla{max-height:52vh;overflow:auto;border:1px solid var(--niebla);border-radius:10px}
.imp-tabla table.m{font-size:12.5px}
.imp-tabla thead th{position:sticky;top:0;background:var(--lienzo);z-index:1;
  box-shadow:inset 0 -1px 0 var(--niebla)}
.imp-tabla th,.imp-tabla td{padding:7px 10px}
.imp-tabla input[type="text"],.imp-tabla input[type="date"],.imp-tabla select{
  border:1px solid var(--niebla);border-radius:7px;padding:5px 8px;font-size:12.5px;background:#fff}
.imp-tabla input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--musgo)}
.imp-tabla tbody tr:has(input[type="checkbox"]:not(:checked)){opacity:.5}

/* Lo cobrado, bajo lo programado: se lee, no se escribe */
.cobrado-mes{font-family:var(--datos);font-size:10.5px;color:var(--musgo);font-weight:700;
  margin-top:3px;letter-spacing:-.02em}

/* ===================== Factura ===================== */
.fac-lineas{border:1px solid var(--niebla);border-radius:10px;overflow:hidden}
.fac-lineas table.m{font-size:12.5px}
.fac-lineas th,.fac-lineas td{padding:7px 10px}
.fac-lineas input{border:1px solid var(--niebla);border-radius:7px;padding:5px 8px;font-size:12.5px}
.fac-totales{border:1px solid var(--niebla);border-radius:10px;padding:9px 12px;background:var(--humo)}
.fac-totales div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:2px 0}
.fac-totales div span{color:var(--mu)}
.fac-totales div b{font-family:var(--datos)}
.fac-totales .total{border-top:1px solid var(--niebla);margin-top:5px;padding-top:6px;font-size:14px}
.fac-totales .total b{color:var(--musgo)}

/* ===================== Evidencias de una tarea ===================== */
.evidencia{display:flex;gap:11px;align-items:flex-start}
.evidencia-ico{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--vc);color:var(--musgo);margin-top:1px}
.evidencia-cuerpo{flex:1;min-width:0}
.evidencia-campo{background:var(--vt);border:1px solid #cfe2d4;border-radius:10px;padding:11px 12px}
.evidencia-campo label{color:var(--musgo-hondo)}

/* ===================== Biblioteca de logos ===================== */
.logos-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px;margin-bottom:16px}
.logo-caja{background:var(--lienzo);border:1px solid var(--niebla);border-radius:12px;
  box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
/* Cuadros de tablero: un logo transparente se ve igual sobre claro y oscuro */
.logo-lienzo{height:104px;display:grid;place-items:center;padding:12px;border-bottom:1px solid var(--niebla);
  background-color:#fff;background-image:
    linear-gradient(45deg,#f1f4f0 25%,transparent 25%,transparent 75%,#f1f4f0 75%),
    linear-gradient(45deg,#f1f4f0 25%,transparent 25%,transparent 75%,#f1f4f0 75%);
  background-size:14px 14px;background-position:0 0,7px 7px}
.logo-lienzo img{max-width:100%;max-height:80px;object-fit:contain;display:block}
.logo-datos{padding:11px 13px 9px;flex:1;min-width:0}
.logo-datos b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-datos span{display:block;font-size:10.5px;color:var(--mu);font-family:var(--datos)}
.logo-datos .logo-uso{font-family:var(--ui);color:var(--musgo);font-weight:600;margin-top:3px}
.logo-pie{border-top:1px solid var(--niebla);background:var(--humo);padding:8px 13px;
  display:flex;gap:12px;font-size:12px}

/* Elegir logo dentro de la plantilla */
.logo-opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}
.logo-opcion{border:1px solid var(--niebla);border-radius:10px;background:var(--lienzo);
  padding:9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;
  font:inherit;color:inherit;transition:.14s}
.logo-opcion:hover{border-color:var(--musgo-cl);background:var(--vt)}
.logo-opcion.on{border-color:var(--musgo);background:var(--vc);box-shadow:0 0 0 2px var(--vc)}
.logo-opcion img{max-width:100%;max-height:44px;object-fit:contain}
.logo-opcion>span:last-child{font-size:11.5px;font-weight:600;text-align:center;line-height:1.2}
.logo-ninguno{height:44px;display:grid;place-items:center;font-size:10.5px;color:#98a49c;font-weight:600}
.pla-logo{margin-left:10px;font-size:12px;color:var(--mu);display:inline-flex;align-items:center;gap:6px}
.pla-logo-vista{height:22px;width:auto;max-width:64px;object-fit:contain;vertical-align:middle}
/* Cuantos registros esta viendo, junto a las tarjetas y no como titulo */
.conteo{font-size:11.5px;color:#8b978f;margin:-8px 0 14px;font-family:var(--datos);letter-spacing:-.01em}

/* Chips de lo que quedo filtrado */
.filtro-puestos{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filtro-quitar{display:inline-flex;align-items:center;gap:6px;border:1px solid #bcd8c3;
  background:var(--vc);color:var(--musgo-hondo);border-radius:20px;padding:5px 8px 5px 11px;
  font-size:11.5px;font-weight:600;cursor:pointer}
.filtro-quitar:hover{background:#daeadf}
.filtro-quitar b{font-weight:700}
.filtro-quitar i{font-style:normal;font-size:14px;line-height:.9;opacity:.6}

/* ===================== Formularios ===================== */
.f{margin-bottom:14px}
.f label{display:block;font-size:11.5px;font-weight:700;color:var(--mu);margin-bottom:5px;letter-spacing:.01em}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--niebla);border-radius:var(--r-ch);
  padding:10px 12px;font-size:14px;background:#fff;transition:.14s}
.f input[type=range]{padding:0;border:0;background:none;accent-color:var(--musgo);height:26px}
.f textarea{min-height:82px;resize:vertical;font-size:13.5px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc)}
.f2{display:flex;gap:10px;flex-wrap:wrap}.f2>*{flex:1;min-width:125px}
/* Estado y avance comparten fila. Alineados por abajo el select quedaba
   hundido, porque solo la columna del avance lleva pista debajo: se alinean
   por arriba (etiquetas a la misma altura) y la barra se estira hasta la
   altura del select para que su centro coincida con el del desplegable. */
.f2-ea{align-items:flex-start}
.f2-ea>.f{margin:0}
.f2-ea input[type=range]{height:39px}
/* Los entregables ya subidos, dentro del formulario de la tarea: una lista
   corta arriba del campo para agregar otro, no una tabla. */
.entregables-lista{margin:0 0 8px}
.entregables-lista .im{display:flex;align-items:center;gap:6px;margin:0 0 3px}
.entregables-lista .im svg{flex:none;color:var(--mu)}
.btn{background:var(--musgo);color:#fff;border:1px solid var(--musgo);border-radius:var(--r-ch);
  padding:9px 16px;font-weight:600;font-size:13.5px;cursor:pointer;transition:.14s;letter-spacing:-.005em}
.btn:hover{background:var(--musgo-cl);border-color:var(--musgo-cl)}
.btn:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.btn.block{width:100%;padding:11px}
.btn.g{background:var(--lienzo);color:var(--musgo);border-color:var(--niebla)}
.btn.g:hover{background:var(--vt);border-color:#c2cfc4}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn.az{background:var(--az);border-color:var(--az)}.btn.az:hover{background:#164056}
.btn.mo{background:var(--mo);border-color:var(--mo)}.btn.mo:hover{background:#4a2f75}
.btn.rj{background:#fff;color:var(--ro);border-color:var(--niebla)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.av{width:29px;height:29px;border-radius:50%;background:var(--musgo);color:#fff;display:grid;
  place-items:center;font-size:12px;font-weight:700;flex:none}
.av.x{background:var(--mo)}
.dn{font-size:13px;font-weight:700}.dr{font-size:11px;color:var(--mu)}

/* ===================== Indicadores ===================== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-bottom:22px}
.kpi{background:var(--lienzo);border:1px solid var(--niebla);border-radius:var(--r);
  padding:14px 15px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi .l{font-size:11px;color:var(--mu);font-weight:600;margin-bottom:6px;font-family:var(--ui);
  letter-spacing:.005em}
.kpi .v{font-size:23px;font-weight:700;letter-spacing:-.035em;line-height:1}
.kpi .v small{font-size:11.5px;font-weight:600;color:var(--mu);letter-spacing:0}
.kpi.hi .v{color:var(--musgo)}
.kpi.rj .v{color:var(--ro)}
.kpi.rj::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ro)}
.kpi.mo .v{color:var(--mo)}

/* ===================== Tarjetas ===================== */
.card{background:var(--lienzo);border:1px solid var(--niebla);border-radius:var(--r);
  box-shadow:var(--sh);margin-bottom:14px;overflow:hidden}
.bar{height:7px;background:#e9ede8;border-radius:5px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:5px;transition:width .3s ease}
.ph{display:flex;align-items:flex-start;gap:11px;padding:15px 18px;border-left:3px solid var(--niebla);flex-wrap:wrap}
.ph.ALTA{border-left-color:var(--ro)}.ph.MEDIA{border-left-color:var(--brote)}.ph.BAJA{border-left-color:var(--musgo-cl)}
.pt{flex:1;min-width:170px}
.pt h3{font-size:15.5px;font-weight:700;letter-spacing:-.018em}
.pt .cl{font-size:12.5px;color:var(--mu)}
.bd{font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:20px;
  white-space:nowrap;text-transform:uppercase}
.bd.ALTA,.bd.rojo,.bd.vencida{background:var(--robg);color:var(--ro)}
.bd.MEDIA,.bd.amarillo,.bd.proceso{background:var(--ambg);color:var(--am)}
.bd.BAJA,.bd.verde,.bd.finalizada,.bd.vigente{background:var(--vc);color:var(--musgo)}
.bd.iniciada,.bd.ext,.bd.integracion{background:var(--azbg);color:var(--az)}
.bd.int,.bd.planilla{background:var(--vt);color:var(--musgo)}
.bd.serv{background:var(--mobg);color:var(--mo)}
.bd.n{background:#eceee9;color:var(--mu)}
.pm{display:flex;flex-wrap:wrap;gap:5px 18px;padding:0 18px 13px 21px;font-size:12.5px;color:var(--mu)}
.pm b{color:var(--tinta);font-weight:600}
.prog{padding:11px 18px;border-top:1px solid var(--niebla);display:flex;align-items:center;gap:14px}
.prog .pl{font-size:11.5px;color:var(--mu);font-weight:600;white-space:nowrap}
.prog .pbx{flex:1}
.prog .pv{font-size:16px;font-weight:700;min-width:44px;text-align:right;letter-spacing:-.03em}

/* ===================== Cajitas de proyecto =====================
   La miniatura es dato: el campo se tinta segun el semaforo, el codigo va en
   monograma y al pie corre la cinta de meses rellena hasta el avance. Cuando
   exista una imagen del proyecto, ocupa el campo y la cinta se queda encima. */
.proyectos-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:12px;margin-bottom:22px}
.proy{display:flex;flex-direction:column;text-align:left;background:var(--lienzo);
  border:1px solid var(--niebla);border-radius:14px;box-shadow:var(--sh);overflow:hidden;
  cursor:pointer;font:inherit;color:inherit;width:100%;padding:0;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.proy:hover{transform:translateY(-2px);box-shadow:var(--sh-alta);border-color:#c8d5cb}
.proy:focus-visible{outline:2px solid var(--musgo);outline-offset:2px}

/* El campo de la tarjeta. Bajo a proposito: la cartera se recorre con la vista,
   y una imagen alta obliga a bajar la pagina para ver cuatro proyectos. */
.sello{position:relative;height:92px;overflow:hidden;display:block;
  border-bottom:1px solid var(--niebla);background:linear-gradient(140deg,#e4ece3,#f2ece0)}
/* El logo se muestra COMPLETO, no recortado: un logotipo cortado deja de servir
   para reconocer el proyecto, que es justo lo unico que hace en la tarjeta. Se
   escala hasta caber y se centra sobre fondo claro, como una ficha. */
.sello img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;padding:9px 12px}
.sello.verde{background:linear-gradient(140deg,#dbead9 0%,#eef4e8 100%)}
.sello.amarillo{background:linear-gradient(140deg,#f7e7c9 0%,#fbf3e3 100%)}
.sello.rojo{background:linear-gradient(140deg,#f4d9d5 0%,#fbeceb 100%)}
.sello.gris{background:linear-gradient(140deg,#e6eae5 0%,#f3f5f1 100%)}
/* Con logo manda el fondo neutro: un logotipo esta disenado para blanco, y
   sobre el tinte del semaforo se ensucia. Va despues de los tintes a proposito. */
.sello.con-img{background:#fff}
.sello.con-img .sello-cod{background:var(--humo);border:1px solid var(--niebla);opacity:1}
.sello-cod{position:absolute;left:9px;top:8px;font-size:9.5px;font-weight:700;z-index:2;
  letter-spacing:.13em;text-transform:uppercase;color:var(--musgo-hondo);opacity:.72;
  background:rgba(255,255,255,.8);border-radius:5px;padding:1px 6px}
.sello-mono{position:absolute;right:12px;bottom:6px;font-size:34px;font-weight:800;
  letter-spacing:-.06em;color:var(--musgo-hondo);opacity:.2;line-height:.9}
.sello-est{position:absolute;right:8px;top:7px;z-index:2}

.proy-cuerpo{padding:11px 13px 4px;flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.proy-cuerpo h3{font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proy-cliente{font-size:11.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* De cual de las dos empresas es el proyecto (ADEC o CEDECC): una marca chica
   delante del cliente, que es donde se lee "de quien y para quien". */
.proy-empresa{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--musgo);background:var(--vc);border-radius:5px;padding:1px 5px;margin-right:6px;vertical-align:1px}
.barra-chip-empresa{margin-left:6px}
/* Un dato que ocupa las dos columnas de la ficha. */
.pf-ancho{grid-column:1/-1}
.proy-fechas{font-family:var(--datos);font-size:10.5px;color:#8b978f;margin-top:3px;letter-spacing:-.02em}

/* Dos acciones y nada mas, en una linea delgada al pie. */
.proy-acciones{display:flex;gap:5px;padding:2px 11px 11px;margin-top:auto}
.proy-acciones .btn{padding:4px 10px;font-size:11.5px}

/* ===================== Tablas ===================== */
table.m{width:100%;border-collapse:collapse;font-size:13px}
table.m th,table.m td{text-align:left;padding:9px 18px;border-top:1px solid var(--niebla);vertical-align:top}
table.m th{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--mu);font-weight:700}
table.m td.h{text-align:right;font-weight:600;white-space:nowrap}
table.m td.neg,table.m th.neg{color:var(--ro)}
table.m tbody tr:hover{background:var(--humo)}
table.m tr.sub td{background:var(--humo);font-weight:700}
/* Encabezado de grupo dentro de una tabla larga (categoria de servicio,
   profesion). Un catalogo de treinta lineas planas no se lee: el corte por el
   que uno busca tiene que estar dibujado. */
table.m tr.grupo td{background:var(--vt);font-size:10px;font-weight:700;color:var(--musgo);
  text-transform:uppercase;letter-spacing:.09em;padding-top:7px;padding-bottom:7px}
table.m tr.grupo:hover td{background:var(--vt)}
/* Una fila desactivada sigue ahi —su precio sostiene cotizaciones viejas— pero
   deja de competir por la atencion. */
table.m tr.apagada td{opacity:.55}
table.m tr.apagada:hover td{opacity:1}
.acts{padding:11px 18px;border-top:1px solid var(--niebla);display:flex;gap:8px;flex-wrap:wrap;
  background:var(--humo);align-items:center}
/* La nota al pie de una barra de acciones: dice por que el boton de al lado
   hace lo que hace. Empuja a la derecha lo que quede libre. */
.acts .pie{font-size:12px;color:var(--mu);line-height:1.4;flex:1;min-width:190px}
.subh{padding:10px 18px;background:var(--humo);border-top:1px solid var(--niebla);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--mu);
  display:flex;align-items:center;gap:8px}
/* Bloque plegable, al estilo del razonamiento de un modelo: cerrado deja una
   linea con lo esencial y no estorba; abierto muestra todo el detalle. */
.plegable .pleg-cab{display:flex;align-items:center;gap:9px;padding:11px 18px;cursor:pointer;
  background:var(--humo);border-top:1px solid var(--niebla);user-select:none;transition:background .12s}
.plegable .pleg-cab:hover{background:var(--vt)}
.plegable .pleg-flecha{display:flex;color:var(--musgo);transition:transform .16s}
.plegable.on .pleg-flecha{transform:rotate(90deg)}
.plegable .pleg-tit{font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  color:var(--tinta);white-space:nowrap}
.plegable .pleg-res{font-size:12px;color:var(--mu);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.plegable .pleg-mas{font-size:11.5px;color:var(--musgo);font-weight:600;white-space:nowrap}
/* Hijo directo, no descendiente: con un plegable dentro de otro, el selector
   de descendencia abria los de adentro en cuanto se abria el de afuera. El
   cuerpo siempre es hijo directo de su plegable (ver `plegable()` en ui.js),
   asi que acotarlo es exacto y deja anidar. */
.plegable > .pleg-cuerpo{display:none}
.plegable.on > .pleg-cuerpo{display:block;animation:abrePleg .16s ease-out}
/* Ni un plegable que ya estaba abierto: se anima solo el que se acaba de abrir. */
.plegable.on.quieto > .pleg-cuerpo{animation:none}
@keyframes abrePleg{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media(max-width:640px){.plegable .pleg-res{display:none}}

.it{padding:12px 18px;border-top:1px solid var(--niebla)}

/* ---- Fuente de precios encontrada en la web ----
   Es una lista para elegir, no para leer: toda la fila marca, y lo marcado se
   distingue de un vistazo por el filo verde y la casilla llena. El enlace a la
   fuente sigue siendo un enlace y se abre aparte. */
.it.fuente{cursor:pointer;transition:background .12s,box-shadow .12s}
.it.fuente:hover{background:var(--humo)}
.it.fuente.on{background:var(--vt);box-shadow:inset 3px 0 0 var(--musgo)}
/* Sobre el fondo verde de la marcada, el gris de los textos secundarios cae a
   4,47:1 y deja de leerse. Se tinta desde el mismo verde en vez de oscurecer
   el gris: 5,7:1 y la fila sigue siendo de una pieza. */
.it.fuente.on .im{color:#52655a}
.caja{flex:none;width:16px;height:16px;border:1.5px solid #b6c3b8;border-radius:4px;
  background:var(--lienzo);position:relative;transition:background .12s,border-color .12s}
.it.fuente:hover .caja{border-color:var(--musgo)}
.caja.on{background:var(--musgo);border-color:var(--musgo)}
.caja.on::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* Filas que se abren con doble clic: el cambio de fondo es el unico aviso de
   que ahi hay algo que abrir, porque el gesto no se ve. */
.fila-abrible{cursor:default;transition:background .12s}
/* Las que se abren con un solo clic lo dicen con la mano. */
.fila-abrible[data-accion]{cursor:pointer}
.fila-abrible:hover{background:var(--humo)}
.it .ih{display:flex;align-items:center;gap:9px;margin-bottom:4px;flex-wrap:wrap}
.it .ih b{font-size:13.5px}
.it .ih .dt{font-size:11px;color:var(--mu);margin-left:auto}
.it .id{font-size:13px;color:#3c4740;white-space:pre-wrap;line-height:1.5}
.it .im{font-size:11.5px;color:var(--mu);margin-top:5px}
/* Las acciones de una fila, en botones y no en enlaces sueltos al margen. */
/* Avance de una tarea en la lista: una barrita fina y su numero. Ocupa un
   renglon de 5 px para que se lea la columna entera sin recargar la fila. */
.it-avance{display:flex;align-items:center;gap:8px;margin-top:7px}
.it-avance .bar{flex:1;height:5px;max-width:340px}
.it-avance span{font-family:var(--datos);font-feature-settings:"tnum" 1;font-size:10.5px;
  color:var(--mu);min-width:30px;text-align:right}
.it-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.it-acts .btn{text-decoration:none}
.btn.g.rj{color:var(--ro)}
.btn.g.rj:hover{background:var(--robg);border-color:var(--ro)}

/* ===================== Modal ===================== */
.ov{display:none;position:fixed;inset:0;background:rgba(16,28,21,.46);z-index:100;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.ov.on{display:flex;animation:abrePanel .15s ease-out}
/* Lo que se desplaza es el cuerpo: la cabecera con la × y el pie con los
   botones quedan siempre a la vista, como en una ventana de Office. La ventana
   no se cierra con un clic afuera ni con Escape, solo con esos botones. */
.modal{background:#fff;border-radius:16px;width:100%;max-width:620px;max-height:90vh;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.32)}
.modal .mh{padding:13px 14px 13px 22px;border-bottom:1px solid var(--niebla);display:flex;align-items:center;
  gap:10px;flex:none}
.modal .mh h3{font-size:16px;font-weight:700;flex:1;letter-spacing:-.018em}
.modal .mh .x{border:none;background:none;font-size:24px;color:var(--mu);cursor:pointer;line-height:1;
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  transition:background .14s ease,color .14s ease}
.modal .mh .x:hover{background:var(--humo);color:var(--tinta)}
.modal .mh .x:focus-visible{outline:2px solid var(--musgo);outline-offset:1px}
.modal .mb{padding:19px 22px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.modal .mf{padding:13px 22px;border-top:1px solid var(--niebla);display:flex;gap:9px;
  justify-content:flex-end;background:var(--humo);flex:none}
.ov.bloqueante .mh .x,.ov.bloqueante .mf .btn.g{display:none}

/* ===================== Piezas sueltas ===================== */
.rad{display:flex;gap:8px;flex-wrap:wrap}
.rad label{flex:1;min-width:90px;border:1px solid var(--niebla);border-radius:var(--r-ch);padding:9px;
  text-align:center;cursor:pointer;font-size:13px;font-weight:600;transition:.14s}
.rad label.on-v{border-color:var(--musgo);background:var(--vc);color:var(--musgo)}
.rad label.on-a{border-color:var(--am);background:var(--ambg);color:var(--am)}
.rad label.on-r{border-color:var(--ro);background:var(--robg);color:var(--ro)}
.rad label.on-z{border-color:var(--az);background:var(--azbg);color:var(--az)}
.rad label.on-m{border-color:var(--mo);background:var(--mobg);color:var(--mo)}
/* La misma pieza en columna, para una pregunta que se lee antes de decidir:
   en fila las tres opciones se aprietan y ninguna se lee de un vistazo. */
.rad-alto{flex-direction:column;gap:6px}
.rad-alto label{flex:none;text-align:left;padding:11px 13px}
/* Sin ninguna marcada de entrada, el aviso de que se puede pulsar lo tiene
   que dar el cursor encima: si no, las tres se ven como un texto quieto. */
.rad-alto label:hover{border-color:var(--musgo-cl);background:var(--vc)}
/* Los dos extremos de un tramo de fechas, debajo de la barra de filtros. */
/* El interruptor de "varios a la vez", arriba de las opciones del menu. */
.filtro-varios{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;
  padding:7px 10px;margin-bottom:4px;border-bottom:1px solid var(--niebla);cursor:pointer;
  font-size:11.5px;font-weight:700;color:var(--mu);letter-spacing:.01em;text-align:left}
.filtro-varios:hover{color:var(--musgo)}
.filtro-varios .marca{opacity:0;color:var(--musgo);display:flex}
.filtro-varios.on{color:var(--musgo)}
.filtro-varios.on .marca{opacity:1}
.filtros-rango{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:-4px 0 12px}
.filtros-rango label{display:flex;align-items:center;gap:7px;font-size:11.5px;
  font-weight:700;color:var(--mu);letter-spacing:.01em}
.filtros-rango input{border:1px solid var(--niebla);border-radius:var(--r-ch);
  padding:7px 10px;font-size:13px;background:#fff;color:inherit}
.filtros-rango input:focus{outline:none;border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc)}
.empty{padding:34px 22px;text-align:center;color:var(--mu);font-size:13px;line-height:1.55}
.empty b{display:block;color:var(--tinta);font-size:15px;margin-bottom:5px;letter-spacing:-.015em}
.note{background:var(--ambg);border:1px solid #f2ddbf;border-left:3px solid var(--brote);
  border-radius:10px;padding:13px 15px;font-size:12.5px;color:#7a5a1e;margin-bottom:16px;line-height:1.55}
.note b{display:block;margin-bottom:3px;color:#6b4d16}
.info{background:var(--azbg);border:1px solid #d5e3ec;border-left:3px solid var(--az);
  border-radius:10px;padding:13px 15px;font-size:12.5px;color:#26485c;margin-bottom:16px;line-height:1.55}
.info b{display:block;margin-bottom:3px}
.togs{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:9px;padding:14px 18px;border-top:1px solid var(--niebla)}
/* Interruptor. Ojo con la especificidad: dentro de un campo de formulario,
   `.f label{display:block}` le ganaba a `.tog{display:flex}` y el interruptor se
   colapsaba encima del texto — se veia un punto blanco tapando la primera
   palabra. Por eso la regla se escribe tambien para `.f label.tog`. */
.tog,.f label.tog{display:flex;align-items:center;gap:11px;border:1px solid var(--niebla);
  border-radius:10px;padding:10px 12px;cursor:pointer;margin:0;
  font-size:13px;font-weight:400;color:var(--tinta);letter-spacing:0;text-transform:none}
.tog:hover{border-color:var(--musgo-cl)}.tog.on{background:var(--vt);border-color:var(--musgo-cl)}
.tog-ico{display:flex;color:#93a099;flex:none;transition:color .16s}
.tog.on .tog-ico{color:var(--musgo)}
.sw{display:block;width:36px;height:20px;border-radius:12px;background:#d5dcd6;position:relative;flex:none;transition:.18s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tog.on .sw{background:var(--musgo)}.tog.on .sw::after{transform:translateX(16px)}
.tog .tt{min-width:0}
.tog .tt b{font-size:13px;display:block;font-weight:700;color:var(--tinta)}
.tog .tt span{font-size:11px;color:var(--mu);display:block;line-height:1.35}
.acu{border-left:3px solid var(--az);padding:9px 12px;background:var(--azbg);border-radius:0 9px 9px 0;margin-bottom:7px}
.acu.ced{border-left-color:var(--musgo);background:var(--vt)}
.acu .ah{display:flex;gap:8px;font-size:11px;font-weight:700;margin-bottom:3px;flex-wrap:wrap;align-items:center}
.acu p{font-size:12.5px;color:#2c3f4a;margin-bottom:3px}
.acu .am2{font-size:11px;color:var(--mu)}
.part{display:inline-block;font-size:11.5px;background:#eceee9;border-radius:6px;padding:3px 9px;margin:2px 3px 2px 0;color:#3c4740}
.part.e{background:var(--azbg);color:var(--az)}
.cmt{border-top:1px solid var(--niebla);padding:10px 18px;background:var(--humo)}
.cmt .c1{display:flex;gap:9px;margin-bottom:8px}
.cmt .c1 .av{width:24px;height:24px;font-size:11px}
.cmt .cb{flex:1}.cmt .cb .cn{font-size:12px;font-weight:700}
.cmt .cb .cn span{font-weight:400;color:var(--mu);font-size:11px;margin-left:6px}
.cmt .cb .ct{font-size:12.5px;color:#3c4740}
.cmt .cin{display:flex;gap:7px}
.cmt .cin input{flex:1;border:1px solid var(--niebla);border-radius:8px;padding:7px 10px;font-size:13px}
.pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
select.i,input.i{border:1px solid var(--niebla);border-radius:var(--r-ch);padding:8px 11px;
  background:#fff;font-size:13px}
select.i{font-weight:600}
input.n{width:104px;text-align:right;border:1px solid var(--niebla);border-radius:7px;padding:5px 8px;font-size:12.5px}
input.n:focus{outline:none;border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc)}
.scroll,.tabla-scroll{overflow-x:auto}

/* Constructor de tablas comparativas. La configuracion queda en una sola
   tarjeta: se entiende como una pregunta (filas, columnas y medida), no como
   un formulario tecnico de tabla dinamica. */
.comp-config{padding:0;overflow:visible}
.comp-config-cab{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:15px 18px 12px;border-bottom:1px solid var(--niebla);background:var(--humo)}
.comp-config-cab b,.comp-titulo{display:block;font-size:14px;font-weight:700}
.comp-config-cab span,.comp-subtitulo{display:block;font-size:11.5px;color:var(--mu);line-height:1.45;margin-top:3px}
.comp-config-cab>.bd{margin-top:1px}
.comp-grid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr)) minmax(150px,auto);gap:10px;
  align-items:end;padding:14px 18px}
.comp-grid label,.comp-nombre{display:flex;flex-direction:column;gap:5px;min-width:0}
.comp-grid label>span,.comp-nombre>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mu);font-weight:700}
.comp-grid .i{width:100%;min-width:0}
.comp-botones{display:flex;gap:7px;align-items:center;flex-wrap:wrap;min-height:35px}
.comp-plantillas{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:10px 18px 13px;
  border-top:1px solid var(--niebla);background:#fbfcfa}
.comp-plantillas>span{font-size:11.5px;color:var(--mu);margin-right:1px}
.comp-tabla{margin-bottom:16px}
.comp-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 18px;
  border-bottom:1px solid var(--niebla);background:var(--humo)}
.comp-acciones{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.comp-matriz th.h{text-align:right}
.comp-matriz td,.comp-matriz th{white-space:nowrap}
.comp-mixta{color:var(--am);font-size:11px;font-weight:700;white-space:normal;display:inline-block;max-width:92px}
.comp-pie{padding:9px 18px;border-top:1px solid var(--niebla);font-size:11.5px;color:var(--mu)}
.comp-separador{margin-top:26px}
.comp-fuente{margin-bottom:22px}
.comp-nombre{padding:3px 0}.comp-nombre input{border:1px solid var(--niebla);border-radius:var(--r-ch);
  padding:9px 11px;font:inherit;color:var(--tinta)}
.comp-nombre input:focus{outline:none;border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc)}
.comp-ia-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 15px;padding:13px 16px;border:1px solid #c8d9e5;border-radius:var(--r);background:var(--azbg)}.comp-ia-cta b,.comp-ia-cta span{display:block}.comp-ia-cta b{font-size:13px}.comp-ia-cta span{margin-top:3px;font-size:11.5px;line-height:1.4;color:var(--mu)}.comp-ia-resumen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:9px 0}.comp-ia-resumen>div{padding:7px 8px;border-radius:6px;background:#fff}.comp-ia-resumen span,.comp-ia-resumen b{display:block}.comp-ia-resumen span{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mu)}.comp-ia-resumen b{margin-top:2px;font-size:10.5px;line-height:1.35;overflow-wrap:anywhere}
@media(max-width:900px){.comp-grid{grid-template-columns:repeat(2,minmax(170px,1fr))}.comp-botones{grid-column:1/-1}}
@media(max-width:560px){.comp-config-cab,.comp-cab,.comp-ia-cta{flex-direction:column;align-items:flex-start}.comp-acciones{justify-content:flex-start}.comp-grid{grid-template-columns:1fr}.comp-botones{grid-column:auto}.comp-ia-resumen{grid-template-columns:1fr}}

/* Indicadores configurables: tarjetas legibles y un constructor que conserva
   el vocabulario de tabla dinámica sin exponer consultas SQL. */
.ind-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:13px;margin-bottom:22px}
.ind-tarjeta{padding:0;overflow:hidden;min-height:188px}.ind-cab{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:13px 15px 10px;background:var(--humo);border-bottom:1px solid var(--niebla)}
.ind-cab b{font-size:13.5px;display:block}.ind-cab span{font-size:11.5px;line-height:1.35;color:var(--mu);display:block;margin-top:3px}.ind-cab .comp-acciones{gap:4px}.ind-valor{font-size:28px;font-weight:750;letter-spacing:-.035em;padding:14px 15px 0;color:var(--musgo)}
.ind-error{color:var(--ro)}.ind-unidad{font-size:11px;color:var(--mu);padding:1px 15px 0}.ind-formula{font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#48534c;background:#f5f7f4;border-top:1px solid var(--niebla);margin-top:14px;padding:8px 15px;overflow-wrap:anywhere}
.ind-form{min-width:0}.ind-ayudas{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:-2px 0 12px}.ind-ayudas span{font-size:11.5px;color:var(--mu);margin-right:2px}.ind-filtro{display:grid;grid-template-columns:minmax(150px,2fr) minmax(125px,1fr) minmax(110px,1fr) auto;gap:7px;align-items:center;margin:0 0 7px}.ind-filtro .i{width:100%;min-width:0}.ind-pre{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:15px;padding-top:12px;border-top:1px solid var(--niebla);font-size:11.5px;color:var(--mu)}
.ind-guia{margin:-3px 0 13px;padding:9px 11px;border:1px solid var(--niebla);border-radius:8px;background:#fbfcfa;color:var(--mu);font-size:11.5px;line-height:1.55}.ind-guia summary{cursor:pointer;font-weight:700;color:var(--tinta)}.ind-guia>div{margin-top:7px}.ind-guia code{font-size:10.5px;color:#3d5443}
.ind-chat{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto;margin:0 0 12px}.ind-msg{padding:9px 11px;border-radius:9px;font-size:12.5px;line-height:1.42;max-width:90%;white-space:pre-wrap}.ind-msg.ia{background:var(--azbg);align-self:flex-start}.ind-msg.usuario{background:var(--vc);align-self:flex-end}
.ind-grafico{width:100%;margin-top:12px;padding:13px;background:#fff;border:1px solid var(--niebla);border-radius:9px}.ind-grafico-cab{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:9px}.ind-grafico-cab b{font-size:12.5px}.ind-grafico-cab span{font-size:10.5px;color:var(--mu);text-align:right}.ind-grafico-linea svg{width:100%;height:185px;display:block;background:linear-gradient(to bottom,#fbfcfa,#fff);border-bottom:1px solid var(--niebla)}.ind-grafico-linea svg path{stroke:#dce3db;stroke-width:1;fill:none}.ind-grafico-linea svg polyline{stroke:var(--musgo);stroke-width:2.5;fill:none;vector-effect:non-scaling-stroke}.ind-grafico-linea svg polygon{fill:rgba(62,111,73,.16)}.ind-grafico-linea>div{display:flex;justify-content:space-between;gap:5px;overflow:hidden;margin-top:5px}.ind-grafico-linea span{font-size:10.5px;color:var(--mu);white-space:nowrap}.ind-grafico-barras{height:205px;display:flex;align-items:end;gap:7px;padding:0 2px;border-bottom:1px solid var(--niebla)}.ind-grafico-barras>div{height:100%;min-width:30px;flex:1;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:5px}.ind-grafico-barras i{display:block;width:min(32px,100%);min-height:3px;background:var(--musgo);border-radius:4px 4px 0 0}.ind-grafico-barras i.neg{background:var(--ro)}.ind-grafico-barras span{font-size:10px;color:var(--mu);white-space:nowrap}.ind-grafico-tarjeta{padding:25px 18px;text-align:center;background:var(--humo);border-radius:8px}.ind-grafico-tarjeta b{display:block;font-size:32px;letter-spacing:-.035em;color:var(--musgo)}.ind-grafico-tarjeta span{display:block;margin-top:5px;font-size:11px;color:var(--mu)}
@media(max-width:680px){.ind-rejilla{grid-template-columns:1fr}.ind-cab{flex-direction:column}.ind-filtro{grid-template-columns:1fr 1fr}.ind-filtro input{grid-column:1/3}}

/* Carga de trabajo. Contrato, estimadas e invertidas en horas, sobre UNA
   escala para todo el equipo: lo que se pasa del contrato (rojo) o de lo
   estimado (ambar) se dibuja como un tramo aparte y ademas se dice con texto.
   Las tres series son pasos de un mismo verde (claro, medio, oscuro), para
   que el unico color que grite sea el del exceso. Paleta validada: ordinal
   #8fbf9a/#4f9960/#1f6b34 sobre blanco; exceso #b0271c y #c2790f. */
.cg-contrato{background:#8fbf9a}.cg-estimadas{background:#4f9960}.cg-invertidas{background:#1f6b34}
.cg-exceso-contrato{background:#b0271c}.cg-exceso-estimado{background:#c2790f}
.cg-cab{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px 22px;padding:14px 18px 12px}
.cg-cab b{display:block;font-size:13.5px;letter-spacing:-.01em}
.cg-cab .cg-sub{display:block;font-size:11.5px;color:var(--mu);margin-top:2px}
.cg-leyenda{display:flex;flex-wrap:wrap;gap:5px 14px;max-width:600px;font-size:11px;color:var(--mu)}
.cg-leyenda span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cg-leyenda i{width:14px;height:9px;border-radius:0 3px 3px 0;flex:none}
.cg-leyenda i.ref{width:2px;height:13px;border-radius:1px;background:var(--tinta);opacity:.75}
.cg-fila{display:grid;grid-template-columns:minmax(140px,200px) minmax(0,1fr);gap:8px 20px;align-items:start;
  padding:12px 18px;border-top:1px solid var(--niebla)}
.cg-ejes{padding-block:6px 4px}
.cg-persona{--cg-fondo:var(--lienzo);cursor:pointer;transition:background .12s}
.cg-persona:hover{--cg-fondo:var(--humo);background:var(--humo)}
.cg-persona:focus-visible{outline:2px solid var(--musgo);outline-offset:-2px}
.cg-nombre{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px}
.cg-nombre b{font-size:13px;letter-spacing:-.01em}
.cg-quien .cg-cargo{display:block;margin-top:2px;font-size:11px;color:var(--mu)}
.cg-ver{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:600;color:var(--musgo)}
.cg-persona:hover .cg-ver{text-decoration:underline}
.cg-medidas{display:grid;grid-template-columns:minmax(0,1fr) 62px;column-gap:10px;align-items:start}
.cg-medidas.rotulos{grid-template-columns:100px minmax(0,1fr) 62px}
.cg-regla{position:relative;height:14px}
.cg-regla span{position:absolute;top:0;transform:translateX(-50%);font:10px/14px var(--datos);color:var(--mu);white-space:nowrap}
.cg-regla span:first-child{transform:none}.cg-regla span:last-child{transform:translateX(-100%)}
.cg-pista{position:relative;border-left:1px solid #c9d3cb;box-shadow:inset -1px 0 0 #e9eee7;
  background:linear-gradient(to right,#e9eee7 1px,transparent 1px) 0 0/25% 100%}
.cg-linea{position:relative;height:16px}
.cg-seg{position:absolute;top:3px;height:10px;min-width:2px}
.cg-seg.fin{border-radius:0 4px 4px 0}
.cg-seg.cg-exceso-contrato,.cg-seg.cg-exceso-estimado{box-shadow:-2px 0 0 var(--cg-fondo,#fff)}
.cg-ref{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--tinta);opacity:.75;pointer-events:none}
.cg-valores span,.cg-rotulos span{display:block;height:16px;line-height:16px;font-size:11.5px;white-space:nowrap}
.cg-valores span{text-align:right;font-family:var(--datos);font-weight:600}
.cg-rotulos span{color:var(--mu)}
.cg-alertas{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:6px}
.cg-alerta{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;line-height:1.3}
.cg-alerta svg{flex:none}.cg-alerta.rojo{color:var(--ro)}.cg-alerta.ambar{color:#8a5608}
.cg-aviso .btn{margin-left:6px;vertical-align:middle}
.cg-pie{margin:-4px 0 20px}
.cg-tip{position:fixed;z-index:300;pointer-events:none;max-width:290px;padding:7px 10px;border-radius:8px;
  background:var(--tinta);color:#fff;box-shadow:var(--sh-alta);font-size:11.5px;line-height:1.35}
.cg-tip b{display:block;font:700 13px/1.3 var(--datos)}.cg-tip span{display:block;color:#cfd9d1}
/* Ficha de una persona, en la ventana ancha. */
.cd{--cg-fondo:#fff}.cd .kpis{margin-bottom:14px}.cd .eb{margin:18px 0 8px}
.cd-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:14px}
.cd-ficha>div{min-width:0;padding:8px 11px;border:1px solid var(--niebla);border-radius:9px;background:var(--humo)}
.cd-ficha span{display:block;font-size:10.5px;font-weight:600;color:var(--mu)}
.cd-ficha b{display:block;font-size:12.5px;overflow-wrap:anywhere}
.cd-filtrada{margin:-6px 0 12px}
.cd-bloque{margin-bottom:12px;padding:12px 14px;border:1px solid var(--niebla);border-radius:var(--r)}
.cd-formula{display:flex;flex-wrap:wrap;align-items:center;gap:7px 8px;margin-bottom:6px}
.cd-formula span{padding:4px 10px;border:1px solid #d3e3d6;border-radius:8px;background:var(--vt);font-size:12px;white-space:nowrap}
.cd-formula b{font-family:var(--datos)}.cd-formula i{font-style:normal;font-weight:700;color:var(--mu)}
.cd-formula span.total{border-color:#bcd8c3;background:var(--vc);color:var(--musgo-hondo)}
.cd-reparto-cab b{display:block;font-size:12.5px}.cd-reparto-cab span{display:block;margin-top:1px;font-size:11px;color:var(--mu)}
.cd-columnas{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;margin-top:12px}
.cd-y{position:relative;height:150px}
.cd-y span{position:absolute;right:0;transform:translateY(50%);font:10px/1 var(--datos);color:var(--mu);white-space:nowrap}
.cd-desliza{overflow-x:auto;padding-bottom:2px}
.cd-lienzo{min-width:calc(var(--cortes) * 78px)}
.cd-plano{position:relative;display:flex;gap:8px;height:150px;padding:0 4px;border-bottom:1px solid #c9d3cb;
  box-shadow:inset 0 1px 0 #e9eee7;background:linear-gradient(to top,#e9eee7 1px,transparent 1px) 0 100%/100% 25%}
.cd-grupo{flex:1;display:flex;justify-content:center;gap:3px;min-width:0}
.cd-col{position:relative;flex:none;width:14px}
.cd-col i{position:absolute;left:0;right:0;min-height:2px}.cd-col i.fin{border-radius:4px 4px 0 0}
.cd-col .cg-exceso-contrato,.cd-col .cg-exceso-estimado{box-shadow:0 2px 0 var(--cg-fondo,#fff)}
.cd-x{display:flex;gap:8px;padding:5px 4px 0}
.cd-x span{flex:1;min-width:0;text-align:center;font-size:10.5px;color:var(--mu);white-space:nowrap}
.cd-x small{display:block;font-size:9.5px;font-weight:600;color:var(--musgo)}
.cd-feriados{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 7px}
.cd-feriados span{padding:2px 9px;border:1px solid var(--niebla);border-radius:12px;background:var(--humo);font-size:11px}
.cd-tabla{margin-top:10px}.cd-tabla summary{cursor:pointer;font-size:11.5px;font-weight:600;color:var(--musgo)}
.cd-tabla table.m{margin-top:6px}
.cd table.m th,.cd table.m td{padding:7px 10px}.cd table.m th.h{text-align:right}
.cd-apagado{color:var(--mu);font-weight:400}
.carga-tareas{margin-bottom:20px}
/* Administración › Feriados: el año se cambia con flechas; lo quitado queda a
   la vista, tachado, para poder restaurarlo. */
.fer-anio{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.fer-anio b{min-width:64px;text-align:center;font:700 22px/1 var(--datos);letter-spacing:-.02em}
.fer-anio .btn{font-family:var(--datos)}
tr.fer-quitado td{color:var(--mu)}tr.fer-quitado td b{font-weight:600;text-decoration:line-through}
.fer-tabla td .hint{display:block;margin-top:2px}
.fer-cambiar{display:block;margin-top:3px;font-size:11.5px;white-space:nowrap}
/* Vacaciones: un saldo de derecho. En Administración, las modalidades como
   tarjetas (la regla en grande), su reparto por rol y el saldo de cada persona;
   en el expediente, el saldo, cómo se calcula, lo que viene y el registro. */
.vac-sub{margin:-4px 0 12px}
.vac-como{padding:15px 18px;margin-bottom:22px}
.vac-como-t b{display:block;font-size:15px;letter-spacing:-.015em}
.vac-como-t span{display:block;font-size:12.5px;color:var(--mu);margin-top:2px}
.vac-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:12px}
.vac-paso{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-ch);background:var(--humo)}
.vac-paso-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--vc);color:var(--musgo);font:700 12px/1 var(--datos)}
.vac-paso b{display:block;font-size:13px}
.vac-paso div span{display:block;font-size:12px;color:var(--mu);line-height:1.45;margin-top:1px}
.vac-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:24px}
.vac-rej>.card{margin-bottom:0}
.vac-mod{display:flex;flex-direction:column;padding:15px 16px 0}
.vac-mod.archivada{opacity:.72}
.vac-mod-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vac-mod-cab b{font-size:14.5px;letter-spacing:-.012em}
.vac-regla{display:flex;align-items:baseline;gap:7px;margin-top:10px}
.vac-num{font:700 30px/1 var(--ui);font-feature-settings:"tnum" 1;letter-spacing:-.03em;color:var(--musgo)}
.vac-regla span:last-child{font-size:13px;font-weight:600;line-height:1.3}
.vac-desc{font-size:12.5px;color:var(--mu);margin-top:8px;line-height:1.45}
.vac-hist{list-style:none;margin:10px 0 0;padding:8px 10px;border-radius:var(--r-ch);background:var(--humo);font-size:12px;line-height:1.5}
.vac-hist b{font-weight:600}
.vac-uso{font-size:12px;margin:10px 0 14px;line-height:1.45}
.vac-pie{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding:12px 0 14px}
.vac-mod .vac-pie{border-top:1px solid var(--niebla)}
section.card>.vac-pie{padding:12px 18px 14px;border-top:1px solid var(--niebla);margin-top:0}
.vac-campos-regla{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:10px;align-items:end}
.vac-previa{font-size:12.5px;padding:9px 11px;border-radius:var(--r-ch);background:var(--vt);margin:-4px 0 14px;line-height:1.45}
.vac-rige select{margin-bottom:6px}
.vac-rige input:disabled{opacity:.45}
.vac-tabla td .hint{display:block;margin-top:2px}
.vac-tipos{display:grid;gap:7px;margin-top:6px}
/* Dentro de un campo, `.f label{display:block}` le gana a `.opcion{display:flex}`
   y `.f input{width:100%}` estira la casilla: se devuelven los dos. */
.vac-tipos .opcion{display:flex;font-weight:400;color:var(--tinta);letter-spacing:0;margin:0}
.vac-tipos .opcion input[type=checkbox]{width:auto;margin-top:2px;flex:none}
.vac-tipos-linea{font-size:12px;color:var(--mu);margin-top:8px}
.vac-tipos-linea b{color:var(--tinta);font-weight:600}
.vac-tabla th.h{text-align:right}
.vac-tabla td.vac-accion{text-align:right;white-space:nowrap}
.vac-equipo td:first-child{min-width:190px}
.vac-sin-ingreso{margin-bottom:22px}
.vac-sin-ingreso .enl{font-weight:600}
.vac-neg{color:var(--ro)}
td.vac-pos{color:var(--musgo)}
.vac-nota{margin:-6px 0 22px}
section.card>.vac-nota{margin:0;padding:8px 18px 4px}
.vac-kpi-sub{font-size:11.5px;color:var(--mu);margin-top:6px;line-height:1.35}
.vac-kpis{margin-bottom:16px}
.vac-claves{padding:0 18px 4px}
.vac-mes{white-space:nowrap}
tr.vac-mov.acreditacion td:first-child{border-left:3px solid var(--vc)}
tr.vac-mov.vacaciones td:first-child{border-left:3px solid var(--robg)}
tr.vac-mov.ajuste td:first-child{border-left:3px solid var(--ambg)}
.vac-aviso-saldo{margin-bottom:14px}
@media (max-width:640px){.vac-tabla th,.vac-tabla td{padding:8px 10px}}
@media (max-width:480px){
  .vac-campos-regla{grid-template-columns:1fr 1fr}
  .vac-campos-regla .f:last-child{grid-column:1/-1}
  .vac-campos-regla .f:last-child label{display:none}
}
/* Calendario: los feriados son un calendario aparte que se enciende y se
   apaga, como los festivos en cualquier calendario. Van en el dia libre. */
.cal-capa{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--niebla);
  border-radius:var(--r-ch);background:var(--lienzo);font-size:12px;font-weight:600;color:var(--mu);cursor:pointer}
.cal-capa i{position:relative;flex:none;width:14px;height:14px;border:1.5px solid #9fb0a5;border-radius:4px;background:#fff}
.cal-capa.on{border-color:#b9e0d8;background:#f2faf8;color:#135c52}
.cal-capa.on i{border-color:#1b7a6c;background:#1b7a6c}
.cal-capa.on i::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cal-ev.feriado{background:#dcf1ed;color:#135c52;font-weight:700}
.cal-dia.feriado{background:#f4fbf9}.cal-dia.feriado .cal-num{color:#1b7a6c}
.bd.feriado{background:#dcf1ed;color:#135c52}
@media(max-width:640px){.cg-cab{padding:12px 14px}.cg-fila{grid-template-columns:minmax(0,1fr);padding:12px 14px}
  .cg-ejes>div:first-child{display:none}.cg-medidas.rotulos{grid-template-columns:96px minmax(0,1fr) 56px}
  .cg-medidas{grid-template-columns:minmax(0,1fr) 56px}}

/* Dashboard financiero continuo, sin depender de una biblioteca de gráficos. */
.af-selector{display:flex;align-items:center;gap:9px;margin:2px 0 15px}.af-selector span{font-size:12px;font-weight:700;color:var(--mu)}.af-selector select{min-width:210px}.af-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}.af-bloque{padding:15px 17px}.af-titulo{font-size:13px;font-weight:750;margin-bottom:10px}.af-linea svg{width:100%;height:170px;display:block;background:linear-gradient(to bottom,#fbfcfa,#fff);border-bottom:1px solid var(--niebla)}.af-linea svg path{stroke:#dce3db;stroke-width:1;fill:none}.af-linea svg polyline{stroke:var(--musgo);stroke-width:2.5;fill:none;vector-effect:non-scaling-stroke}.af-etiquetas{display:flex;justify-content:space-between;gap:6px;overflow:hidden;margin-top:5px}.af-etiquetas span{font-size:10.5px;color:var(--mu);white-space:nowrap}.af-crecimiento{height:195px;display:flex;align-items:end;gap:7px;border-bottom:1px solid var(--niebla);padding:0 2px}.af-crece{height:100%;min-width:30px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}.af-crece i{width:min(26px,100%);min-height:3px;background:var(--musgo);border-radius:4px 4px 0 0}.af-crece i.neg{background:var(--ro)}.af-crece span,.af-crece small{font-size:9.5px;color:var(--mu);white-space:nowrap}.af-crece b{font-size:10px}.af-comp{margin:11px 0}.af-comp>div{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:4px}.af-comp b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.af-comp span{font-size:11px;color:var(--mu);white-space:nowrap}.af-comp .bar{height:7px}.af-personalizados{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:0 0 14px}.af-personalizados .card{padding:13px}.af-personalizados b,.af-personalizados span{display:block;font-size:11.5px;color:var(--mu)}.af-personalizados strong{display:block;font-size:22px;color:var(--musgo);margin:7px 0}.af-personalizados span{line-height:1.35}@media(max-width:760px){.af-rejilla{grid-template-columns:1fr}.af-selector{align-items:flex-start;flex-direction:column}.af-selector select{width:100%}}
.segs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.seg{border:1px solid var(--niebla);background:#fff;border-radius:var(--r-ch);padding:7px 13px;
  font-size:12.5px;font-weight:600;cursor:pointer;color:var(--mu);transition:.14s}
.seg:hover{background:var(--humo);color:var(--tinta)}
.seg.on{background:var(--musgo);border-color:var(--musgo);color:#fff}
.hint{font-size:11.5px;color:var(--mu);margin-top:4px;line-height:1.45}
.err-campo{color:var(--ro);font-size:11.5px;margin-top:4px;display:block}
.f input[aria-invalid="true"],.f select[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:var(--ro)}
a.enl{color:var(--musgo);font-weight:600;text-decoration:none;cursor:pointer}
a.enl:hover{text-decoration:underline}
a.enl.rj{color:var(--ro)}
a.enl.az{color:var(--az)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;background:#eceee9;border-radius:6px;
  padding:3px 9px;margin:2px 3px 2px 0;color:#3c4740;cursor:pointer;border:1px solid transparent}
.pill.on{background:var(--vc);border-color:var(--musgo-cl);color:var(--musgo);font-weight:600}
.pill.e{background:var(--azbg);color:var(--az)}

/* ===================== Rejilla de meses (Gantt y cargas) ===================== */
.mes-rejilla{width:100%;border-collapse:collapse;font-size:12px}
.mes-rejilla th{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--mu);
  font-weight:700;padding:9px 4px;text-align:center;border-bottom:1px solid var(--niebla)}
.mes-rejilla th.nom{text-align:left;padding-left:18px;width:32%;min-width:196px}
.mes-rejilla td{padding:0;border-bottom:1px solid var(--niebla);vertical-align:middle}
.mes-rejilla tbody tr:hover{background:var(--humo)}
.mes-rejilla td.nom{padding:10px 10px 10px 18px}
.mes-rejilla td.nom b{font-size:13px;font-weight:700;display:block;line-height:1.3;letter-spacing:-.015em}
.mes-rejilla td.nom span{font-size:11px;color:var(--mu)}
.mes-celda{position:relative;height:38px;border-left:1px solid #eef1ec;text-align:center;
  font-size:10.5px;color:var(--mu)}
.mes-celda.hoy{background:#fdf8ee}
.mes-celda.finde{background:#f1f4ef}
.mes-rejilla th.ahora{color:var(--am)}
/* Escala de dias: columnas angostas, con el numero bajo la inicial del dia. */
.mes-rejilla.gantt-dia th{padding:6px 2px;font-size:9px;letter-spacing:0}
.mes-rejilla.gantt-dia th i{display:block;font-style:normal;font-size:11px;color:var(--tinta)}
.mes-rejilla.gantt-dia th.ahora i{color:var(--am)}
.mes-rejilla.gantt-dia th[data-finde]{color:#adb8b0}
.mes-rejilla.gantt-dia td.mes-celda{min-width:24px}
.mes-rejilla.gantt-semana th{font-size:9px;letter-spacing:0;text-transform:none}
.mes-rejilla.gantt-semana td.mes-celda{min-width:40px}
/* La barra se dibuja vacia y se rellena hasta el avance: lo que falta se ve. */
.gantt-barra{position:absolute;left:0;right:0;top:9px;height:20px;background:#dfe6dd;
  box-shadow:inset 0 1px 0 rgba(16,28,21,.06),inset 0 -1px 0 rgba(16,28,21,.06);
  color:var(--tinta);font-size:10px;font-weight:700;display:flex;align-items:center;
  justify-content:center;overflow:hidden;--gc:var(--musgo-cl)}
.gantt-barra.ini{left:4px;border-radius:4px 0 0 4px;border-left:3px solid var(--gc)}
.gantt-barra.fin{right:4px;border-radius:0 4px 4px 0}
.gantt-barra.ini.fin{border-radius:4px}
.gantt-barra.amarillo{--gc:#c8821c}
.gantt-barra.rojo{--gc:var(--ro)}
.gantt-barra.cerrado{--gc:#8d9a91}
.gantt-relleno{position:absolute;left:0;top:0;bottom:0;background:var(--gc);opacity:.85}
.gantt-barra em{position:relative;font-style:normal;mix-blend-mode:normal;
  text-shadow:0 0 3px rgba(255,255,255,.75)}
.gantt-caja .scroll{max-height:none}
/* Los segmentos propios de una vista siguen a la vista, no a la pestana. */
body.sin-segs main .segs.propio{display:flex}
.gantt-hito{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  background:var(--brote);border:1.5px solid #fff;transform:rotate(45deg);border-radius:2px}
.gantt-hito.vencida{background:var(--ro)}
.gantt-hito.sesion{background:var(--az);border-radius:50%;transform:none}
.gantt-escala{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--mu);
  padding:11px 18px;border-top:1px solid var(--niebla);background:var(--humo);align-items:center}
.gantt-escala i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* ===================== Calendario ===================== */
.cal-cab{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.cal-cab h3{font-size:17px;font-weight:700;min-width:186px;letter-spacing:-.02em}
/* «Ir a fecha»: el selector de fechas del navegador, vestido como los botones de al lado. */
.cal-ir{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:0 4px 0 10px;
  border:1px solid var(--niebla);border-radius:8px;background:var(--lienzo);color:var(--musgo);cursor:pointer;
  transition:.14s}
.cal-ir:hover{background:var(--vt);border-color:#c2cfc4}
.cal-ir:focus-within{border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc)}
.cal-ir input{border:none;background:none;padding:6px 2px;font-family:var(--datos);font-size:12px;
  color:var(--tinta);outline:none;cursor:pointer}
.cal-rej{display:grid;grid-template-columns:repeat(var(--cols,7),minmax(0,1fr));gap:1px;
  background:var(--niebla);border:1px solid var(--niebla);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh)}
.cal-dia-t{background:var(--humo);padding:9px 6px;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;color:var(--mu);text-align:center}
.cal-dia{background:#fff;min-height:106px;padding:6px 7px;display:flex;flex-direction:column;gap:3px}
.cal-dia.fuera{background:#f8faf7}
.cal-dia.hoy{background:#fdf8ee}
.cal-num{font-size:11px;font-weight:700;color:var(--mu);align-self:flex-end;border:none;
  background:none;cursor:pointer;padding:0 1px;border-radius:5px;font-family:var(--datos)}
.cal-num:hover{background:var(--vc);color:var(--musgo-hondo)}
.cal-dia.hoy .cal-num{color:var(--am)}
.cal-ev{font-size:10.5px;line-height:1.3;padding:3px 6px;border-radius:5px;cursor:pointer;
  border:none;text-align:left;width:100%;font-family:var(--ui);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.12s}
.cal-ev.evento{background:var(--vc);color:var(--musgo-hondo)}
.cal-ev.tarea{background:var(--ambg);color:#8a5a12}
.cal-ev.tarea.vencida{background:var(--robg);color:var(--ro)}
.cal-ev.sesion{background:var(--azbg);color:var(--az)}
.cal-ev.bitacora{background:var(--vt);color:var(--musgo)}
.cal-ev.acuerdo{background:var(--mobg);color:var(--mo)}
.cal-ev.avance{background:#eceee9;color:var(--mu)}
.cal-ev.contrato{background:var(--mobg);color:var(--mo)}
.cal-ev:hover{filter:brightness(.95)}
.cal-ev i{font-style:normal;font-family:var(--datos);font-size:9.5px;opacity:.7;margin-right:4px}
/* La prioridad de la tarea, en el mismo codigo de color que la cartera. */
.cal-ev.ALTA{box-shadow:inset 3px 0 0 var(--ro)}
.cal-ev.MEDIA{box-shadow:inset 3px 0 0 var(--brote)}
.cal-ev.BAJA{box-shadow:inset 3px 0 0 var(--musgo-cl)}
.cal-mas{font-size:10px;color:var(--mu);padding-left:6px;border:none;background:none;
  cursor:pointer;text-align:left;font-family:var(--ui);font-weight:600}
.cal-mas:hover{color:var(--musgo);text-decoration:underline}
/* Hora en la lista corrida de la agenda. */
.cal-hora{font-family:var(--datos);font-size:11px;font-weight:700;color:var(--am);
  min-width:42px;display:inline-block}
.cal-hora.todo{color:var(--mu);font-weight:600}
/* Leyenda de prioridades: solo aparece cuando hay prioridades que leer. */
.cal-escala{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:12px;
  padding:9px 14px;border:1px solid var(--niebla);border-radius:var(--r-ch);
  background:var(--humo);font-size:11px;color:var(--mu)}
.cal-pri::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:5px;vertical-align:-1px}
.cal-pri.ALTA::before{background:var(--ro)}
.cal-pri.MEDIA::before{background:var(--brote)}
.cal-pri.BAJA::before{background:var(--musgo-cl)}
.cal-escala-nota{flex:1;min-width:180px;text-align:right;opacity:.85}

/* ----- Semana, semana laboral y dia: la rejilla por horas, como en Google Calendar -----
   Una columna por dia y una fila por hora. Arriba, «todo el dia», con lo que no
   tiene hora; abajo, cada cosa en su franja. El alto de la hora lo pone el JS
   (--alto-hora) para que las rayas y los bloques midan lo mismo. */
.cal-t-marco{background:#fff;border:1px solid var(--niebla);border-radius:var(--r);box-shadow:var(--sh);
  overflow-x:auto}
.cal-tiempo{min-width:calc(58px + var(--cols,7) * 96px)}
.cal-t-fila{display:grid;grid-template-columns:58px repeat(var(--cols,7),minmax(0,1fr))}
.cal-t-cab{background:var(--humo);border-bottom:1px solid var(--niebla)}
.cal-t-dia{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 7px;border:none;
  border-left:1px solid var(--niebla);background:none;font-family:var(--ui);color:var(--mu)}
button.cal-t-dia{cursor:pointer}
.cal-t-dia span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cal-t-dia b{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--datos);font-size:17px;font-weight:600;color:var(--tinta);transition:.12s}
button.cal-t-dia:hover b{background:var(--vc);color:var(--musgo-hondo)}
.cal-t-dia.hoy span{color:var(--am)}
.cal-t-dia.hoy b,button.cal-t-dia.hoy:hover b{background:var(--brote);color:#fff}
.cal-t-todo{border-bottom:2px solid var(--niebla)}
.cal-t-rotulo{padding:9px 8px 0 0;text-align:right;font-size:9.5px;line-height:1.25;color:var(--mu);
  text-transform:uppercase;letter-spacing:.06em}
.cal-t-celda{min-width:0;min-height:36px;padding:5px 5px 6px;border-left:1px solid var(--niebla);
  display:flex;flex-direction:column;gap:3px}
.cal-t-cuerpo{position:relative}
.cal-t-reglas{position:relative}
.cal-t-reglas span{position:absolute;right:8px;transform:translateY(-50%);font-family:var(--datos);
  font-size:10px;color:var(--mu)}
.cal-t-col{position:relative;border-left:1px solid var(--niebla);
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--alto-hora) - 1px),
    #edf1ea calc(var(--alto-hora) - 1px) var(--alto-hora))}
.cal-t-col.hoy{background-color:#fffcf5}
/* Lo que tiene hora: un bloque en su franja. Hereda de .cal-ev el color del tipo y la raya de prioridad. */
.cal-t-ev{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:3px 6px;border:1px solid #fff;border-radius:6px;white-space:normal}
.cal-t-ev b,.cal-t-ev i{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-t-ev b{font-weight:700;line-height:1.25}
.cal-t-ev i{margin:0}
/* La raya de ahora, en ambar: es lo que marca el ahora en todo el sistema. */
.cal-t-ahora{position:absolute;left:0;right:0;z-index:2;height:2px;margin-top:-1px;background:var(--brote);
  pointer-events:none}
.cal-t-ahora::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;
  border-radius:50%;background:var(--brote)}
/* En el dia sobra ancho: cada cosa sin hora dice que es, de que proyecto y su detalle. */
.cal-ev-detalle{display:flex;align-items:baseline;gap:8px;padding:6px 10px;font-size:12px}
.cal-ev-detalle .cal-ev-tipo{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;opacity:.75}
.cal-ev-detalle b{flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis}
.cal-ev-detalle span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;opacity:.8}
.cal-t-vacio{margin-top:10px;text-align:center;font-size:12px;color:var(--mu)}
/* ----- Agenda: empieza hoy y se estira hacia atras o hacia adelante ----- */
.cal-agenda-mas{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:11px 14px;border:none;background:var(--lienzo);color:var(--musgo);cursor:pointer;
  font-family:var(--ui);font-size:12.5px;font-weight:700;transition:.12s}
.cal-agenda-mas:first-child{border-bottom:1px solid var(--niebla)}
.cal-agenda-mas:last-child{border-top:1px solid var(--niebla)}
.cal-agenda-mas:hover{background:var(--vt)}
.cal-agenda-mas span{font-weight:500;color:var(--mu);font-family:var(--datos);font-size:11px}
.cal-agenda-mas.quieto{cursor:default;color:var(--mu);font-weight:500;font-size:12px}
.cal-agenda-mas.quieto:hover{background:var(--lienzo)}
.subh.hoy{color:var(--am);background:#fdf8ee}
.cal-agenda-nada{color:var(--mu);font-size:12.5px}
/* «Hoy»: el dia de hoy destella una vez, para que se vea a donde llevo el clic. */
@keyframes destelloHoy{0%,40%{background-color:#fbe3b8;box-shadow:inset 0 0 0 2px var(--brote)}
  100%{box-shadow:inset 0 0 0 2px transparent}}
.destello{animation:destelloHoy 1.6s ease-out}
/* Donde se crea con doble clic: sin que el doble clic seleccione el texto de alrededor. */
[data-cal-crear]{user-select:none}
.subh[data-cal-crear]{cursor:default}
/* Detalle de un clic, al estilo de la tarjeta de Google Calendar. */
.cal-det-titulo{font-size:16px;font-weight:700;letter-spacing:-.01em}
.cal-det-fila{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--tinta)}
.cal-det-fila svg{color:var(--mu);flex:none}

/* ----- Formulario de evento ----- */
/* Dentro de .f para ganarle a la regla general de los campos del formulario. */
.f .ev-titulo{width:100%;border:none;border-bottom:2px solid var(--niebla);border-radius:0;padding:8px 2px;
  font-size:20px;font-weight:600;letter-spacing:-.015em;background:none;outline:none;transition:.14s}
.f .ev-titulo:focus{border-bottom-color:var(--musgo);box-shadow:none}
.ev-rango{display:flex;align-items:center;gap:8px}
.ev-rango input{flex:1;min-width:0}
.ev-rango span{color:var(--mu);font-size:12px}
.ev-invitados{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ev-invitados:empty{display:none}
.ev-pie{margin-top:6px;padding-top:12px;border-top:1px solid var(--niebla);font-size:12.5px}
.ev-pie svg{vertical-align:-2px}

/* ===================== Portada ===================== */
.portada-saludo{margin-bottom:22px}
.portada-saludo h2{font-size:26px;font-weight:700;letter-spacing:-.032em}
.portada-saludo p{color:var(--mu);font-size:13px;margin-top:3px}
.portada-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;align-items:start}
.portada-col{min-width:0}
.atajos{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:9px;margin-bottom:24px}
.atajo{display:flex;align-items:center;gap:10px;text-align:left;background:var(--lienzo);
  border:1px solid var(--niebla);border-radius:11px;box-shadow:var(--sh);padding:11px 12px;
  cursor:pointer;font:inherit;color:inherit;transition:.15s}
.atajo:hover{border-color:var(--musgo-cl);transform:translateY(-1px);box-shadow:var(--sh-alta)}
.atajo:focus-visible{outline:2px solid var(--musgo);outline-offset:2px}
.atajo-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--vc);color:var(--musgo)}
.atajo b{display:block;font-size:12.5px;font-weight:700;line-height:1.25;letter-spacing:-.015em}
.atajo span{display:block;font-size:10.5px;color:var(--mu);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===================== Informes impresos ===================== */
.inf{background:#fff;border:1px solid var(--niebla);border-radius:var(--r);box-shadow:var(--sh);padding:26px 28px;margin-bottom:18px}
.inf .ih2{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--musgo);padding-bottom:13px;margin-bottom:15px}
.inf .ih2 h3{font-size:18px;font-weight:700}.inf .ih2 p{font-size:12.5px;color:var(--mu)}
.inf .ih2 .rt{margin-left:auto;text-align:right}
.inf .ih2 .rt b{font-size:21px;font-weight:700}.inf .ih2 .rt span{font-size:11px;color:var(--mu);display:block}
.inf table{width:100%;border-collapse:collapse;font-size:13px}
.inf th,.inf td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--niebla);vertical-align:top}
.inf th{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu)}
.inf td.h{text-align:right;font-weight:600}
.inf tfoot td{border-top:2px solid var(--tinta);border-bottom:none;font-weight:700;padding-top:10px}
.inf h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--musgo);margin:18px 0 8px;font-weight:700}
.inf .nt{margin-top:14px;font-size:11.5px;color:var(--mu)}

/* ===================== Avisos y carga ===================== */
.avisos{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:370px}
.aviso{background:#fff;border:1px solid var(--niebla);border-left:3px solid var(--musgo);border-radius:10px;
  box-shadow:0 10px 32px rgba(16,28,21,.17);padding:11px 14px;font-size:12.5px;animation:entra .18s ease-out}
.aviso.err{border-left-color:var(--ro);background:var(--robg);color:#8a2c22}
.aviso.ok{border-left-color:var(--musgo);background:var(--vt)}
.aviso b{display:block;margin-bottom:2px;font-size:12px}
.aviso ul{margin:4px 0 0 16px;font-size:11.5px}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cargando{padding:46px 20px;text-align:center;color:var(--mu);font-size:13px}
.cargando::before{content:"";display:block;width:22px;height:22px;margin:0 auto 11px;border-radius:50%;
  border:2.5px solid var(--niebla);border-top-color:var(--musgo);animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ===================== Panel de permisos ===================== */
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.opcion{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--niebla);border-radius:10px;
  padding:10px 12px;cursor:pointer;background:#fff;position:relative;transition:.15s}
.opcion:hover{border-color:var(--musgo-cl);background:var(--vt)}
.opcion.on{border-color:var(--musgo);background:var(--vc)}
.opcion .marca{width:16px;height:16px;border-radius:50%;border:2px solid #c3ccc5;flex:none;margin-top:2px;transition:.15s}
.opcion.on .marca{border-color:var(--musgo);border-width:5px}
.opcion .txt{flex:1;min-width:0}
.opcion .txt b{display:block;font-size:13px;margin-bottom:2px}
.opcion.on .txt b{color:var(--musgo)}
.opcion .txt span{font-size:11.5px;color:var(--mu);line-height:1.35;display:block}
.opcion .sug{position:absolute;top:-7px;right:9px;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:var(--vt);color:var(--musgo);border:1px solid var(--vc);
  border-radius:20px;padding:2px 7px}

/* ===================== Seguimiento ===================== */
/* Los dos extremos del intervalo exacto, dentro del menu de tiempo. */
.tramo-exacto{border-top:1px solid var(--niebla);margin-top:5px;padding:9px 4px 3px;
  display:grid;gap:7px}
.tramo-exacto label{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mu)}
.tramo-exacto span{width:44px;flex:none}
.tramo-exacto input{flex:1;min-width:0;border:1px solid var(--niebla);border-radius:var(--r-ch);
  padding:6px 8px;font-size:12px;font-family:var(--datos)}
.tramo-exacto input:focus{outline:none;border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc)}

.seg-grilla tr.fila-abrible,.mes-rejilla tr.gantt-fila{cursor:pointer}
/* El proyecto de una tarea, visible arriba de su ficha. */
.tarea-proyecto{display:inline-flex;align-items:center;gap:8px;margin:0 0 6px;padding:5px 11px;
  border-radius:var(--r-ch);background:var(--vc);color:var(--musgo-hondo);font-size:13px;font-weight:600}
.tarea-proyecto span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--musgo);font-weight:700}
/* Metas y cumplimiento: una tarjeta por proyecto, sus metas en filas. */
.seg-metas{padding:0;overflow:hidden}
.seg-metas-cab{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:13px 18px;
  border-bottom:1px solid var(--niebla);background:var(--humo)}
.seg-metas-cab>div{flex:1;min-width:180px}
.seg-metas-cab b{display:block;font-size:14px;letter-spacing:-.015em}
.seg-metas-cab span{font-size:11.5px;color:var(--mu)}
.cmp-punto.n{background:#aab6ad}
.meta-barra{position:relative;overflow:visible}
.meta-barra>i{border-radius:5px}
.meta-barra>b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;
  background:var(--tinta);opacity:.55}
.meta-barra.grande{height:12px;margin:12px 0 10px}
.seg-meta-lectura{padding:16px 18px}
.seg-meta-lectura p{font-size:13px;color:var(--mu);margin:0}
.seg-meta-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--mu)}
.seg-grilla td{vertical-align:middle}
.sub-cel{font-size:11px;color:var(--mu);margin-top:2px;font-family:var(--ui);font-weight:500}
.sub-cel.rj{color:var(--ro);font-weight:600}
/* El avance de una tarea, al pie de su fila: barra y cifra en la misma linea. */
.seg-avance{display:flex;align-items:center;gap:9px;margin-top:7px}
.seg-avance .bar{flex:1;min-width:0}
.seg-avance .dato{font-size:11px;font-weight:700;color:var(--mu);width:36px;text-align:right}

/* --- Resumen ejecutivo --- */
.resumen-ia{padding:0}
.resumen-cab{padding:18px 22px 12px;border-bottom:1px solid var(--niebla);background:var(--humo)}
.resumen-cab h3{font-size:19px;font-weight:700;letter-spacing:-.025em;margin-top:8px;line-height:1.3}
.resumen-p{padding:16px 22px 4px;font-size:13.5px;line-height:1.62;max-width:76ch}
.resumen-sec{padding:14px 22px 4px}
.resumen-sec h4{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--mu);
  font-weight:700;margin-bottom:9px}
.resumen-sec ul{list-style:none;display:grid;gap:9px}
.resumen-sec li{font-size:13px;line-height:1.55;padding-left:14px;position:relative;max-width:76ch}
.resumen-sec li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--musgo-cl)}
.resumen-sec li b{font-weight:700;color:var(--musgo-hondo)}
.resumen-sec li .bd{margin-right:6px}
.resumen-sec table{margin-top:4px}
.resumen-ia .gantt-escala{margin-top:14px}
@media print{
  .resumen-ia{box-shadow:none;border:0}
  .resumen-cab{background:none}
}

/* Reportes contables: tabla y grafico comparten la misma altura visual. */
.fin-resumen-grid{display:grid;grid-template-columns:minmax(360px,1fr) minmax(320px,1fr);gap:14px;margin-bottom:18px}
.fin-grafico{min-height:280px;display:flex;flex-direction:column}
.fin-barras{height:220px;display:flex;align-items:flex-end;gap:8px;padding:22px 18px 12px;overflow-x:auto}
.fin-col{height:100%;min-width:32px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}
.fin-col>span{font-size:10.5px;color:var(--mu);white-space:nowrap}
.fin-barra{width:min(30px,70%);min-height:2px;border-radius:5px 5px 2px 2px;background:var(--v2);box-shadow:0 4px 12px rgba(41,95,71,.14)}
.fin-barra.neg{background:var(--ro)}
.fin-barras.dobles .fin-col{min-width:40px}
.fin-par{height:100%;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.fin-par i{display:block;width:12px;min-height:2px;border-radius:4px 4px 1px 1px}
.fin-par .entrada{background:var(--v2)}
.fin-par .salida{background:var(--ro)}
@media(max-width:850px){.fin-resumen-grid{grid-template-columns:1fr}.fin-grafico{min-height:240px}.fin-barras{height:180px}}

/* ===================== Responsivo ===================== */
/* ===================== Recursos Humanos ===================== */
.rrhh-barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.rrhh-barra input,.rrhh-barra select{border:1px solid var(--niebla);border-radius:8px;background:#fff;
  padding:9px 11px;font:inherit;color:var(--tinta)}
.rrhh-barra input{flex:1 1 290px}.rrhh-barra select{min-width:150px}
.rrhh-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px}
.rrhh-persona{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--niebla);
  border-radius:12px;background:#fff;padding:14px;box-shadow:var(--sh);cursor:pointer;font:inherit;color:inherit;
  transition:.15s;min-width:0}
.rrhh-persona:hover{border-color:var(--musgo-cl);transform:translateY(-1px);box-shadow:var(--sh-alta)}
.rrhh-persona:focus-visible{outline:2px solid var(--musgo);outline-offset:2px}
.rrhh-foto{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:none;
  background:var(--vc);color:var(--musgo);font-weight:800;font-size:17px;border:1px solid var(--musgo-cl)}
.rrhh-foto img{width:100%;height:100%;object-fit:cover}.rrhh-foto.grande{width:76px;height:76px;font-size:23px}
.rrhh-persona-info{min-width:0}.rrhh-persona-info b,.rrhh-persona-info span,.rrhh-persona-info small{display:block}
.rrhh-persona-info b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrhh-persona-info span{font-size:12px;color:var(--mu);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrhh-persona-info small{font-size:10.5px;color:var(--mu);margin-top:5px}
.rrhh-cab{display:flex;align-items:center;gap:15px;margin-bottom:14px}.rrhh-cab h2{font-size:21px;letter-spacing:-.025em}
.rrhh-cab p{font-size:12.5px;color:var(--mu);margin:3px 0 5px}.rrhh-cab>.acts{margin-left:auto}
.rrhh-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.rrhh-claves{margin:0}
/* Dentro de una tarjeta, la lista de datos respeta su margen lateral. */
.card>.rrhh-claves{padding:0 18px}.rrhh-claves>div{display:grid;grid-template-columns:minmax(120px,.45fr) 1fr;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--niebla)}
.rrhh-claves>div:last-child{border-bottom:0}.rrhh-claves dt{font-size:11px;color:var(--mu);font-weight:700}
.rrhh-claves dd{margin:0;font-size:12.5px;overflow-wrap:anywhere}.rrhh-texto{white-space:pre-wrap;line-height:1.58;font-size:12.5px}
.rrhh-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px;margin-top:7px}
.rrhh-checks label{font-size:12px;border:1px solid var(--niebla);border-radius:8px;padding:8px;background:#fff}
.rrhh-contrato-tabs{display:flex;gap:2px;align-items:end;overflow-x:auto;margin:0 0 12px;padding:0 2px;border-bottom:1px solid var(--niebla)}
.rrhh-contrato-tabs button{border:1px solid var(--niebla);border-bottom:0;background:var(--humo);padding:9px 14px;
  border-radius:8px 8px 0 0;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.rrhh-contrato-tabs button.on{background:#fff;color:var(--musgo);font-weight:700;box-shadow:0 2px 0 #fff}
.rrhh-contrato-tabs button.pendiente{color:var(--mu);border-style:dashed}.rrhh-contrato-tabs button.mas{font-size:18px;padding:5px 13px}
.rrhh-ia{margin-top:16px;padding-top:14px;border-top:1px solid var(--niebla)}.rrhh-ia h4{font-size:13px;margin-bottom:4px}
.rrhh-condiciones{margin-top:16px;padding-top:14px;border-top:1px solid var(--niebla)}
.rrhh-condiciones h4{font-size:13px;margin-bottom:4px}.rrhh-condiciones>.hint{margin-bottom:11px}
.rrhh-desglose td .hint{display:block;margin-top:2px}.rrhh-desglose th.h{text-align:right}
.rrhh-vigentes{margin:-6px 0 12px}
section.card>.rrhh-nota{margin:0;padding:10px 18px 0}section.card>.rrhh-nota:last-child{padding-bottom:14px}
.rrhh-dictado{display:flex;gap:5px}.rrhh-dictado input{flex:1;min-width:0}
@media(max-width:760px){.rrhh-dos{grid-template-columns:1fr}.rrhh-cab{align-items:flex-start}.rrhh-cab>.acts{width:100%;margin-left:0}.rrhh-cab{flex-wrap:wrap}.rrhh-claves>div{grid-template-columns:1fr;gap:2px}}

/* ===================== Responsivo ===================== */
@media(max-width:1000px){
  #app.on{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;width:var(--rail-w);transform:translateX(-100%);transition:transform .2s ease-out}
  .rail.abierta{transform:none;box-shadow:0 0 40px rgba(0,0,0,.32)}
  .rail-x{display:block}
  body.rail-abierta .rail-velo{display:block}
  .barra-menu{display:block}
  .barra,main,.pestanas,.foot{padding-left:16px;padding-right:16px}
}
@media(max-width:640px){
  .pm{padding-left:18px}
  .portada-saludo h2{font-size:21px}
  .atajos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .cal-dia{min-height:74px}
  .cal-ir{margin-left:0}
  .cal-t-fila{grid-template-columns:46px repeat(var(--cols,7),minmax(0,1fr))}
  .cal-tiempo{min-width:calc(46px + var(--cols,7) * 84px)}
  .cal-escala-nota{text-align:left}
  .proyectos-rej{grid-template-columns:1fr}
  .filtro-buscar{flex:1 1 100%}
  .cal-per{width:min(290px,78vw)}
}

/* ===================== Impresion ===================== */
@media print{
  body{background:#fff}
  #app.on{display:block}
  .np,.rail,.rail-velo,.barra,.pestanas,.pick,.foot,.acts,.segs,.filtros,.avisos,.ov{display:none!important}
  .inf{box-shadow:none;border:none;padding:0 0 8px;margin:0;page-break-after:always}
  .inf:last-child{page-break-after:auto}
  main{padding:0;max-width:none;animation:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ===================== Contrato mercantil ===================== */
/* Encabezado del documento: nombre a la izquierda, acciones a la derecha. */
.con-cab{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--ln)}
.con-cab-acc{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}

/* Dato de apoyo: de que seccion salio una fila, cuantas paginas tiene el PDF. */
.con-meta{font-size:11.5px;color:var(--mu);margin-top:3px}

/* Fragmento textual del contrato en que se apoya una extraccion. Es lo que
   permite comprobar un dato sin volver a abrir el documento. */
.con-cita{font-size:11.5px;color:var(--mu);font-style:italic;
  border-left:2px solid var(--niebla);padding-left:8px;margin-top:5px;line-height:1.45}

/* --- Acordeon de secciones ---
   Cerrado por defecto: un contrato tiene nueve secciones y abrirlas todas
   deja la pantalla ilegible. El cuerpo se oculta con max-height para que la
   apertura tenga transicion sin tener que medir el contenido. */
.con-lista{display:flex;flex-direction:column;gap:6px}
.con-sec{border:1px solid var(--ln);border-radius:10px;overflow:hidden;background:var(--papel)}
.con-sec-cab{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;
  transition:background .12s;flex-wrap:wrap}
.con-sec-cab:hover{background:var(--humo)}
.con-sec.on .con-sec-cab{background:var(--humo);border-bottom:1px solid var(--ln)}
.con-sec-cab b{font-size:13px}
.con-sec-flecha{color:var(--mu);font-size:11px;width:12px}
.con-sec-num{font-family:var(--datos);font-weight:700;color:var(--v2);font-size:12.5px}

/* Los botones de accion viven a la derecha del titulo, como pide el
   requerimiento. En pantalla angosta bajan a su propia linea en vez de
   apretar el titulo hasta partirlo. */
.con-sec-acc{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap}

.con-sec-cuerpo{max-height:0;overflow:hidden;font-size:12.5px;line-height:1.55;
  color:#3c4740;white-space:pre-wrap;padding:0 12px;transition:max-height .2s ease,padding .2s ease}
.con-sec.on .con-sec-cuerpo{max-height:60vh;overflow:auto;padding:11px 12px}

/* Lista de casillas del paso 3. */
.con-elige{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  cursor:pointer;flex-wrap:wrap}
.con-elige:hover{background:var(--humo)}
.con-elige b{font-size:13px}
.con-elige .con-meta{margin:0 0 0 auto}

/* La primera columna del cronograma lleva el concepto entero del contrato. */
table.tabla-pagos td:first-child{min-width:230px;max-width:420px;white-space:normal}
.acts-fila{display:flex;gap:5px;justify-content:flex-end;align-items:center;flex-wrap:wrap}

/* Avisos con color: el cuadre de la suma es lo primero que hay que ver al
   revisar un cronograma extraido. */
.info.ok{border-left-color:var(--v2);background:var(--brote)}
.info.err{border-left-color:var(--ro);background:var(--robg)}

/* Cotizaciones del proyecto que aun no se ligaron al contrato. Se ofrecen
   como fichas sueltas, no como tabla: son una sugerencia, no un registro. */
.con-sugerencias{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.con-sugerencia{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--niebla);border-radius:8px;padding:5px 6px 5px 10px;font-size:12px}

/* ---------------------------------------------------------------------------
   El facturador · campos progresivos
   ---------------------------------------------------------------------------
   Un comprobante v4.4 admite mas de cuarenta campos. Ponerlos todos en
   pantalla convierte una factura de treinta segundos en un formulario de
   contabilidad. Esconderlos tampoco sirve: cuando hacen falta, hacen falta.

   El nucleo comun (facturacion-cr) los clasifica en tres niveles y esta hoja
   solo los VISTE. Las reglas de cuando aparece cada uno no viven aqui ni en la
   vista: viven en /nucleo/formulario.js, el mismo archivo que usa el servidor
   y el mismo que usa el ERP de la clinica.
   --------------------------------------------------------------------------- */

/* El campo que aparecio porque la factura lo pidio. La barra a la izquierda
   dice «esto es nuevo y sali porque algo cambio», que es la unica forma de que
   no parezca que el formulario se movio solo. */
.campo-cond{border-left:2px solid var(--musgo);padding-left:9px;margin-left:-11px}
.campo-req{color:var(--ro);margin-left:2px;font-weight:700}
.campo-ayuda{font-size:11px;color:var(--mu);line-height:1.45;margin-top:4px}

/* El interruptor de los opcionales. Lleva el numero: «mostrar mas» no dice
   cuanto mas, y esa es justamente la pregunta que uno se hace. */
.fac-mas{display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--niebla);
  background:transparent;color:var(--mu);border-radius:var(--r-ch);
  padding:7px 13px;font-size:12.5px;cursor:pointer;margin:2px 0 14px}
.fac-mas:hover{border-color:var(--musgo);color:var(--musgo)}
.fac-mas.on{border-style:solid;background:var(--humo);color:var(--ink)}

/* Por que aparecio cada condicional. Se dice en palabras y no se deja adivinar:
   cuando alguien pregunta «¿por que me pide el plazo?», la respuesta esta en
   pantalla y no en el codigo. */
.fac-porque{font-size:11.5px;color:var(--mu);line-height:1.5;
  background:var(--humo);border-radius:var(--r-ch);padding:9px 11px;margin-bottom:12px}
.fac-porque b{color:var(--ink);font-weight:600}

/* Los campos extra de una linea: caben cuando hacen falta y desaparecen
   cuando no. Van en su propia fila para no estrechar la de la venta. */
.fac-linea-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;padding:2px 0 6px}
.fac-linea-extra label{display:block;font-size:10.5px;font-weight:700;color:var(--mu);
  margin-bottom:3px;letter-spacing:.01em}
.fac-linea-extra input,.fac-linea-extra select{width:100%;border:1px solid var(--niebla);
  border-radius:var(--r-ch);padding:7px 9px;font-size:12.5px;background:#fff}

/* Selector de modelo de IA: acompaña al boton, no compite con el.
   Se pinta solo cuando el catalogo llega; vacio no ocupa espacio. */
.ia-modelo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ia-modelo:empty{display:none}
.ia-modelo-et{font-size:10.5px;font-weight:700;color:var(--mu);letter-spacing:.02em;
  text-transform:uppercase}
.ia-modelo select{border:1px solid var(--niebla);border-radius:var(--r-ch);
  padding:5px 8px;font-size:12px;background:#fff;color:var(--ink);max-width:230px}
.ia-modelo-nota{font-size:11px;color:var(--mu)}
@media (max-width:640px){.ia-modelo-nota{display:none}}

/* Equipo de trabajo del proyecto: la lista es lo principal; las horas por mes
   van plegadas dentro del formulario. */
.equipo-tabla td{vertical-align:middle}
.eq-detalle{font-size:11.5px;color:var(--mu);margin-top:1px}
.equipo-tabla{table-layout:fixed;width:100%}
/* Las dos tablas (planilla y servicios) usan las mismas columnas: asi las
   personas y los roles quedan alineados de una tabla a la otra. */
.eq-c-persona{width:45%}.eq-c-rol{width:35%}.eq-c-acc{width:20%}
.equipo-tabla td:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-vacio{padding:14px 18px;font-size:12.5px;color:var(--mu)}
.equipo-tabla tr.fila-abrible{cursor:pointer}
.eq-quitar{margin-top:14px;padding-top:12px;border-top:1px solid var(--niebla)}
.eq-horas{margin-top:4px;border-top:1px solid var(--niebla);padding-top:10px}
.eq-horas summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink)}
.eq-horas summary span{font-weight:400;color:var(--mu)}
.eq-horas[open] summary{margin-bottom:10px}

/* ===================== Datos generales del proyecto =====================
   Se ven y se editan en la misma tarjeta, con el mismo orden. A la izquierda,
   sobre un fondo apagado, la tarjeta tal como se vera en la cartera: es una
   muestra de lo que se edita, no un contenedor mas. A la derecha, los datos en
   una rejilla de doce columnas: lo corto a la izquierda, lo largo a la derecha. */
.pf{overflow:visible}
.pf-pie .btn{display:inline-flex;align-items:center;gap:7px}
/* En edicion la tarjeta lo dice sola: una franja arriba y un filo verde. */
.pf-edicion{border-color:#bcd8c3;box-shadow:0 0 0 3px var(--vt),var(--sh)}
.pf-titulo{padding:10px 20px;border-bottom:1px solid #cfe2d4;background:var(--vt);
  border-radius:var(--r) var(--r) 0 0;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--musgo)}
.pf-cuerpo{display:grid;grid-template-columns:minmax(220px,262px) minmax(0,1fr)}
.pf-portada{padding:18px;background:var(--humo);border-right:1px solid var(--niebla);
  border-radius:var(--r) 0 0 0;display:flex;flex-direction:column;gap:10px}
.pf-edicion .pf-portada{border-radius:0}
.pf-vista .proy{cursor:default;pointer-events:none}
.pf-vista .proy-cuerpo{padding-bottom:12px}
.pf-img{display:flex;gap:6px;flex-wrap:wrap}
.pf-subir{position:relative;overflow:hidden}
.pf-subir input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.pf-subir:focus-within{outline:2px solid var(--musgo);outline-offset:2px}
.pf-portada .hint{margin:0}

/* Los datos van de a dos por fila, en dos columnas iguales: con filas de uno,
   dos y tres campos la tarjeta se leia desordenada. */
.pf-campos{padding:18px 20px 4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:20px;align-content:start}
.pf-seg{gap:5px;flex-wrap:nowrap}
/* La duracion se ve como un campo, pero no se escribe: sale de las fechas. */
.pf-calculado{display:flex;align-items:center;min-height:43px;padding:0 12px;border:1px dashed var(--niebla);
  border-radius:var(--r-ch);background:var(--humo);font-size:14px;color:var(--tinta)}
.pf-calculado.vacio{color:#8b978f;font-size:13px}
.pf-calculado.mal{color:var(--ro);border-color:#f0c9c4;background:var(--robg);font-size:13px}
.pf-seg label{margin:0;min-width:0;padding:9px 4px;color:var(--tinta);white-space:nowrap}
.pf-seg label:focus-visible,.mf-sentido label:focus-visible{outline:2px solid var(--musgo);outline-offset:2px}

.pf-pie{gap:10px}
.pf-aviso{font-size:12px;color:var(--mu)}
.pf-pie.sucio .pf-aviso{color:var(--am);font-weight:600}
.pf-der{margin-left:auto}

/* La vista: los mismos datos en el mismo lugar que el formulario, sin controles. */
.pf-lectura .pf-campos{padding-top:20px}
.pf-lectura .pf-dato{margin-bottom:16px;min-width:0}
.pf-dato dt{font-size:11.5px;font-weight:700;color:var(--mu);margin-bottom:3px;letter-spacing:.01em}
.pf-dato dd{font-size:14px;color:var(--tinta);overflow-wrap:anywhere}
.pf-lectura .pf-nombre dd{font-weight:700}

@media(max-width:860px){
  .pf-cuerpo{grid-template-columns:minmax(0,1fr)}
  .pf-portada{border-right:0;border-bottom:1px solid var(--niebla);border-radius:var(--r) var(--r) 0 0;
    flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .pf-vista{width:min(250px,100%)}
  .pf-portada .pf-img,.pf-portada .hint{flex:1 1 180px}
}
@media(max-width:560px){
  .pf-campos{padding:16px 16px 4px;grid-template-columns:minmax(0,1fr)}
}

/* ===================== Metas del proyecto =====================
   Cada meta es un tacometro: la aguja contesta si se va bien antes de leer un
   numero. La raya «META» queda un poco antes del final del arco; lo que la
   pase se pinta en azul fuerte, aparte de los colores de estado. La marca
   corta sobre el arco es lo que se esperaba llevar a hoy. */
:root{--sobre:#1a64b4;--sobrebg:#e5eefa;--sobrezona:#d8e5f6;--rozona:#f6dcd8}
.bd.encima{background:var(--sobrebg);color:var(--sobre)}
.metas{margin-top:22px}
.metas-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.metas-cab .eb{margin:0}
.metas-acciones{display:flex;gap:7px;flex-wrap:wrap}
.metas-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}

.meta{background:var(--lienzo);border:1px solid var(--niebla);border-radius:var(--r);box-shadow:var(--sh);
  padding:14px 15px 12px;display:flex;flex-direction:column;min-width:0;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.meta.abrible{cursor:pointer}
.meta.abrible:hover{border-color:#c8d5cb;box-shadow:var(--sh-alta);transform:translateY(-1px)}
.meta.abrible:focus-visible{outline:2px solid var(--musgo);outline-offset:2px}
/* El titulo reserva dos lineas: asi los tacometros de una misma fila quedan a
   la misma altura aunque un nombre sea largo y otro corto. */
.meta-titulo{min-width:0;min-height:50px}
.meta-titulo h4{font-size:13.5px;font-weight:700;letter-spacing:-.015em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta-titulo span{display:block;font-size:11px;color:var(--mu);margin-top:2px}
.meta-tac{width:100%;max-width:196px;margin:8px auto 0}
/* Se lee de arriba abajo: cuanto se lleva de la meta, en grande y en el color
   de como se va; lo obtenido y la meta en su unidad; y al pie, el estado. */
.meta-cumple{text-align:center;margin-top:2px}
.meta-cumple b{display:block;font-size:27px;font-weight:800;letter-spacing:-.04em;line-height:1.1;
  color:var(--tono,var(--tinta))}
.meta-cumple span{display:block;font-size:11px;font-weight:600;color:var(--mu);margin-top:1px}
.meta-valores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;
  grid-auto-flow:column;column-gap:10px;margin:11px 0 0;text-align:center}
.meta-valores dt{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.meta-valores dd{margin:1px 0 0;font-size:13.5px;font-weight:600;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-valores dd small{font-size:11.5px;font-weight:500;color:var(--mu)}
.meta-pie{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:auto;
  padding-top:10px;border-top:1px solid var(--niebla)}
.meta-valores+.meta-pie{margin-top:12px}
.meta-detalle{font-size:11.5px;color:var(--mu);text-align:center;line-height:1.4;min-height:16px}
.meta-detalle.error{color:var(--ro)}

.tac{display:block;width:100%;height:auto;overflow:visible}
.tac-pista,.tac-valor{fill:none;stroke-width:13;stroke-linecap:round}
.tac-pista{stroke:#e9ede8}
.tac-valor{stroke-dasharray:var(--pct) 100;animation:tacArco .9s cubic-bezier(.16,1,.3,1)}
.tac-marcas line{stroke:#c7d1c9;stroke-width:1.5;stroke-linecap:round}
.tac-esperado{stroke:var(--tinta);stroke-width:2.6;stroke-linecap:round}
/* Despues de la raya «META», la zona de «nos pasamos»: tenue mientras no se
   llega a ella (rosada, si la meta es un limite). Lo logrado de mas se pinta
   encima en el color fuerte, cuando la aguja ya paso la meta. */
.tac-zona{fill:none;stroke-width:13;stroke-linecap:butt}
.tac-exceso{fill:none;stroke-width:13;stroke-linecap:butt;animation:tacExceso .45s ease-out .7s both}
.tac-remate{stroke-linecap:round}
.tac-meta line{stroke:var(--tinta);stroke-width:2.6;stroke-linecap:round}
.tac-meta text{font-family:var(--ui);font-size:8px;font-weight:700;letter-spacing:.1em;fill:var(--tinta);
  text-anchor:middle;dominant-baseline:middle}
@keyframes tacExceso{from{opacity:0}}
.tac-aguja{transform-origin:100px 100px;transform:rotate(var(--giro));animation:tacAguja .9s cubic-bezier(.16,1,.3,1)}
.tac-aguja line{stroke:var(--tinta);stroke-width:3;stroke-linecap:round}
.tac-aguja circle{fill:var(--tinta)}
.tac-eje{fill:#c9d2cb}
.metas.quieto .tac-valor,.metas.quieto .tac-aguja,.metas.quieto .tac-exceso{animation:none}
@keyframes tacArco{from{stroke-dasharray:0 100}}
@keyframes tacAguja{from{transform:rotate(-90deg)}}

.metas-nota{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mu);margin-top:10px;line-height:1.45}
.metas-nota-marca{width:3px;height:13px;background:var(--tinta);border-radius:2px;flex:none}
.metas-vacio{padding:26px 22px;text-align:center}
.metas-vacio>b{display:block;font-size:15px;letter-spacing:-.015em;margin-bottom:5px}

/* Agregar una meta: una tarjeta mas de la fila, punteada y con su «+». Mide lo
   mismo que las demas (la rejilla las estira), asi que se lee como "aqui va la
   siguiente". Sin metas todavia, ocupa la fila y explica que es una meta. */
.meta-agregar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:230px;padding:18px;border:1.5px dashed #b9c9bd;border-radius:var(--r);background:transparent;
  font:inherit;color:var(--musgo);text-align:center;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease}
.meta-agregar:hover{background:var(--vt);border-color:var(--musgo-cl);transform:translateY(-1px)}
.meta-agregar:focus-visible{outline:2px solid var(--musgo);outline-offset:2px}
.meta-agregar-ico{width:48px;height:48px;border-radius:50%;background:var(--vc);color:var(--musgo);
  display:grid;place-items:center;transition:background .16s ease,color .16s ease}
.meta-agregar:hover .meta-agregar-ico{background:var(--musgo);color:#fff}
.meta-agregar b{font-size:14px;font-weight:700;color:var(--musgo-hondo);letter-spacing:-.01em}
.meta-agregar span:last-child{font-size:12px;color:var(--mu);line-height:1.45;max-width:230px}
.meta-agregar.primera{grid-column:1/-1;min-height:190px;padding:26px 22px}
.meta-agregar.primera span:last-child{max-width:60ch;font-size:12.5px}
.metas-vacio p{font-size:13px;color:var(--mu);max-width:62ch;margin:0 auto 14px;line-height:1.55}
.metas-vacio p:last-child{margin-bottom:0}

/* Resumen de metas en Analisis, Metas y cumplimiento */
.metas-resumen{display:inline-flex;gap:11px;align-items:center;font-family:var(--datos);
  font-size:12px;font-weight:600;white-space:nowrap}
.metas-resumen-tramo{display:inline-flex;align-items:center}
.cmp-punto{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
  vertical-align:middle;background:#aab6ad;flex:none}
.cmp-punto.verde{background:var(--musgo-cl)}
.cmp-punto.amarillo{background:var(--brote)}
.cmp-punto.rojo{background:var(--ro)}
.cmp-punto.encima{background:var(--sobre)}

/* --- Definir una meta --- */
.modal.medio{max-width:780px}
.mf-ia{background:var(--vt);border:1px solid #cfe2d4;border-radius:12px;padding:13px 14px;margin-bottom:18px}
.mf-ia-cab b{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--musgo-hondo)}
.mf-ia-cab span{display:block;font-size:11.5px;color:#52655a;margin-top:2px;line-height:1.45}
.mf-ia textarea{width:100%;margin-top:9px;border:1px solid #cfe2d4;border-radius:var(--r-ch);
  padding:9px 11px;font-size:13.5px;background:#fff;resize:vertical;min-height:58px}
.mf-ia textarea:focus{outline:none;border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc)}
.mf-ia-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.mf-ia-nota{margin:10px 0 0}
.mf-bloque+.mf-bloque{border-top:1px solid var(--niebla);padding-top:16px;margin-top:4px}
.mf-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mf-sentido label{margin:0}
.mf-sentido label b{display:block;font-size:13px;font-weight:700;color:var(--tinta)}
.mf-sentido label span{display:block;font-size:11.5px;font-weight:400;color:var(--mu);margin-top:1px}
.mf-sentido label.on-v span{color:#52655a}
.mf-alcance{margin:-4px 0 10px}
.f textarea.mf-formula{font-family:var(--datos);font-size:12.5px;min-height:62px}
.mf-mas{border:1px solid var(--niebla);border-radius:10px;padding:9px 12px;margin:2px 0 14px;background:#fbfcfa}
.mf-mas summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--tinta)}
.mf-mas[open] summary{margin-bottom:12px}
.mf-prueba{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;
  background:var(--humo);border:1px solid var(--niebla);font-size:12.5px;color:var(--mu)}
.mf-prueba b{color:var(--tinta);font-family:var(--datos)}
.mf-error{color:var(--ro)}
.mf-borrar{margin-top:16px;padding-top:14px;border-top:1px solid var(--niebla)}

/* --- Comparar con las metas --- */
.cmp-sub{margin-bottom:12px}
.cmp-tabla{border:1px solid var(--niebla);border-radius:10px;margin-bottom:6px}
.cmp-tabla table.m th,.cmp-tabla table.m td{padding:9px 12px;vertical-align:middle}
.cmp-tabla table.m thead th{border-top:0}
.cmp-como{font-size:11px;color:var(--mu);margin-top:1px}
.cmp-meta{min-width:190px;max-width:320px}
.cmp-descripcion{font-size:11.5px;color:#3c4740;margin-top:4px;line-height:1.4;white-space:normal}
.mf-opcional{font-weight:400;color:#8b978f}
.cmp-obtenido{white-space:nowrap}
.cmp-contra{color:var(--mu);font-weight:400}
.cmp-tabla td.dato{font-size:12.5px;white-space:nowrap}
.cmp-cumple{white-space:nowrap}
.cmp-barra{position:relative;display:inline-block;vertical-align:middle;width:96px;height:7px;
  background:linear-gradient(90deg,#e9ede8 var(--meta,100%),var(--sobrezona) 0);border-radius:5px;margin-right:8px}
.cmp-barra.limite{background:linear-gradient(90deg,#e9ede8 var(--meta,100%),var(--rozona) 0)}
.cmp-relleno{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.cmp-esperado,.cmp-meta-marca{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;
  background:var(--tinta);border-radius:2px}
.cmp-hasta-meta{border-radius:5px 0 0 5px}
.cmp-exceso{border-radius:0 5px 5px 0}
.cmp-cumple .dato{font-size:13px;font-weight:800}
.cmp-eb{margin-top:18px}
.cmp-vacio{margin:0}

/* Pagos del proyecto: una tabla, sin tarjetas. Lo secundario (la factura, la
   fecha en que se pago, el comprobante) va en letra chica bajo el estado. */
.pagos-proy td{vertical-align:middle}
.pagos-proy tr.fila-abrible{cursor:pointer}
.pag-sub{font-size:11.5px;color:var(--mu);margin-top:3px}
.pag-acc{white-space:nowrap}
.pag-link{margin-left:10px;font-size:12px}
.pagos-proy tfoot th{background:var(--humo);font-size:12.5px;text-transform:none;letter-spacing:0}
.pag-opc{font-weight:400;color:var(--mu)}
.pag-extras{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--niebla)}

/* Proyeccion (Contabilidad): una tabla mensual y el detalle de donde sale. */
.pick .pry-horizonte{margin:0 0 0 auto}
.pry-tabla th.pry-grupo{text-align:center;border-bottom:1px solid var(--niebla)}
.pry-tabla td{vertical-align:top}
.pry-tabla td:first-child{white-space:nowrap}
.pry-tabla tfoot th{background:var(--humo)}
.pry-sub{font-size:11px;color:var(--mu);margin-top:2px;font-weight:400}
.pry-cero{color:var(--mu)}
.pry-neg,.pry-neg b{color:var(--ro)}
.pry-pie{padding:10px 18px;font-size:12.5px;color:var(--mu);border-top:1px solid var(--niebla)}
.pry-pie b{color:var(--ink)}
.pry-opc{font-weight:400;color:var(--mu)}
.pry-metodo{font-size:13px;line-height:1.55}
.pry-metodo ul{margin:6px 0 8px 18px}
.pry-metodo li{margin-bottom:4px}
.pry-extras{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--niebla)}

/* ===================== Accesos: roles y perfiles ===================== */
/* Cuatro capacidades, cuatro colores, y siempre en el mismo orden: sin acceso,
   ver, editar, administrar. El color es lo primero que se lee —de un vistazo se
   sabe qué está cerrado y qué está abierto— y el texto lo confirma. */
.n-ninguno,.sg-ninguno{--c:#a3342a;--cf:#fbeae8;--cb:#e7b3ad}
.n-ver,.sg-ver{--c:#1d4e6b;--cf:#e8f1f7;--cb:#8db4cd}
.n-editar,.sg-editar{--c:#1f6b34;--cf:#e4f0e7;--cb:#7db58b}
.n-administrar,.sg-administrar{--c:#5b3a8e;--cf:#f0eaf8;--cb:#b39bd8}

/* El editor va en pasos numerados: rol, alcance, pantallas. */
.acc-paso{display:flex;align-items:flex-start;gap:11px;margin:24px 0 11px}
.acc-paso .num{width:26px;height:26px;border-radius:50%;background:var(--musgo);color:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:800;flex:none;margin-top:1px}
.acc-paso h3{font-size:15.5px;margin:0 0 2px;letter-spacing:-.01em}
.acc-paso p{margin:0;color:var(--mu);font-size:12.5px;line-height:1.45;max-width:880px}
.perf-cab{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 4px}

/* Paso 1 · roles, como fichas que se marcan */
.rol-fichas{display:flex;flex-wrap:wrap;gap:8px}
.rol-ficha{position:relative;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--niebla);
  border-radius:12px;padding:11px 15px 11px 12px;background:var(--lienzo);cursor:pointer;
  min-width:210px;max-width:330px;transition:border-color .15s,box-shadow .15s,background .15s}
.rol-ficha:hover{border-color:var(--musgo-cl)}
.rol-ficha input{margin-top:3px;accent-color:var(--musgo);width:15px;height:15px}
.rol-ficha.on{border-color:var(--musgo);background:var(--vt);box-shadow:0 0 0 3px var(--vc)}
.rol-ficha b{display:block;font-size:13.5px}
.rol-ficha small{display:block;font-size:11.5px;color:var(--mu);line-height:1.35;margin-top:1px}

/* Paso 2 · alcance: tres preguntas, lado a lado */
.alc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.alc-bloque{background:var(--lienzo);border:1px solid var(--niebla);border-radius:var(--r);
  padding:15px 16px 12px;box-shadow:var(--sh)}
.alc-bloque h4{margin:0 0 10px;font-size:13px;color:var(--tinta)}
.alc-op,.alc-sw{position:relative;display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.alc-op{padding:9px 10px;border-radius:10px;border:1px solid transparent;margin-bottom:5px;transition:.15s}
.alc-op:hover{background:var(--humo)}
.alc-op input,.alc-sw input{position:absolute;opacity:0;width:1px;height:1px}
.alc-marca{width:16px;height:16px;border-radius:50%;border:2px solid #c3ccc5;flex:none;margin-top:2px;
  transition:.15s;background:#fff}
.alc-op.on{background:var(--vt);border-color:var(--vc)}
.alc-op.on .alc-marca{border-color:var(--musgo);border-width:5px}
.alc-op.fijo{cursor:default}
.alc-op.fijo:not(.on){opacity:.5}
.alc-op input:focus-visible~.alc-marca,.alc-sw input:focus-visible+.alc-riel{outline:2px solid var(--musgo-cl);outline-offset:2px}
.alc-txt{min-width:0}
.alc-txt b{display:block;font-size:13px}
.alc-txt small{display:block;font-size:11.5px;color:var(--mu);line-height:1.4;margin-top:1px}
.alc-nota{margin:2px 0 0;font-size:11.5px;color:var(--musgo);font-weight:600}
.alc-sw{padding:8px 2px}
.alc-riel{position:relative;width:36px;height:21px;border-radius:999px;background:#d3dad4;flex:none;
  transition:background .15s;margin-top:1px}
.alc-riel i{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(16,28,21,.25);transition:left .15s}
.alc-sw input:checked+.alc-riel{background:var(--musgo)}
.alc-sw input:checked+.alc-riel i{left:17.5px}

/* Datos sensibles: ocupa el ancho entero de los tres bloques, porque cada
   categoría lleva escrito qué incluye y dónde aparece. Decidir si alguien va a
   ver el salario de otra persona no se hace leyendo dos palabras. */
.alc-datos{grid-column:1 / -1}
.alc-cuenta{float:right;font-size:11px;font-weight:600;color:var(--musgo);background:var(--vt);
  border-radius:999px;padding:2px 9px}
.alc-grupo{margin-top:12px}
.alc-grupo h5{margin:0;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--musgo)}
.alc-grupo>small{display:block;font-size:11.5px;color:var(--mu);margin:1px 0 7px}
.dsen{display:block;border:1px solid var(--niebla);border-radius:12px;padding:6px 12px 10px;
  margin-bottom:7px;background:#fcfdfb;transition:border-color .15s,background .15s}
.dsen.on{border-color:var(--vc);background:var(--vt)}
.dsen-det{padding-left:46px;font-size:11.5px;color:var(--mu);line-height:1.45}
.dsen-t{margin:6px 0 2px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mu)}
.dsen-det ul{margin:0;padding-left:16px}
.dsen-det li{margin-bottom:1px}
.dsen-donde{margin:0;display:flex;flex-wrap:wrap;gap:4px}
.dsen-donde em{font-style:normal;background:var(--humo);border:1px solid var(--niebla);border-radius:999px;
  padding:1px 8px;font-size:11px;color:var(--tinta)}
.dsen-propio{margin:7px 0 0;color:var(--musgo);font-weight:600}
.dsen-nunca{margin:3px 0 0;color:var(--am);font-weight:600}
@media (max-width:900px){
  .dsen-det{padding-left:0}
}

/* Paso 3 · barra de la matriz: leyenda con cuentas, búsqueda y «poner todo en» */
.acc-barra{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  background:var(--lienzo);border:1px solid var(--niebla);border-radius:var(--r);padding:11px 14px;
  box-shadow:var(--sh);margin-bottom:10px}
.acc-leyenda{display:flex;flex-wrap:wrap;gap:6px}
.acc-ley{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--c);
  background:var(--cf);border-radius:999px;padding:4px 11px}
.acc-ley i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.acc-ley b{font-variant-numeric:tabular-nums;font-weight:800}
.acc-herr{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.acc-buscar{border:1px solid var(--niebla);border-radius:999px;padding:7px 14px;font-size:12.5px;
  width:250px;max-width:100%;background:var(--humo);font-family:inherit}
.acc-buscar:focus{outline:none;border-color:var(--musgo-cl);box-shadow:0 0 0 3px var(--vc);background:#fff}
.acc-todo{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.acc-todo span{font-size:11.5px;color:var(--mu);margin-right:3px}
.acc-todo-b{border:1px solid var(--niebla);background:#fff;border-radius:999px;padding:4px 10px;
  font-size:11.5px;font-weight:600;color:var(--c);cursor:pointer;font-family:inherit;transition:.12s}
.acc-todo-b:hover{background:var(--cf);border-color:var(--cb)}

/* El mapa: todos los módulos de un vistazo, con una rayita de color por pestaña */
.acc-mapa{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.acc-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--niebla);background:var(--lienzo);
  border-radius:10px;padding:6px 10px;font-size:12px;color:var(--tinta);cursor:pointer;font-family:inherit;
  transition:border-color .15s,box-shadow .15s}
.acc-chip:hover{border-color:var(--musgo-cl);box-shadow:var(--sh)}
.acc-chip svg{color:var(--musgo);flex:none}
.acc-mini{display:inline-flex;gap:2px;margin-left:1px}
.acc-mini b{width:5px;height:14px;border-radius:2px;background:var(--c);opacity:.75}
.acc-mini b.n-ninguno{background:var(--cb);opacity:1}

/* Una tarjeta por módulo, con todas sus pestañas a la vista */
.acc-rejilla{columns:2 460px;column-gap:14px}
.acc-mod{display:block;break-inside:avoid;background:var(--lienzo);border:1px solid var(--niebla);
  border-radius:14px;box-shadow:var(--sh);margin:0 0 14px;overflow:hidden}
.acc-cab{display:flex;align-items:center;gap:12px;padding:14px 16px 4px}
.acc-ico{width:38px;height:38px;border-radius:11px;background:var(--vt);color:var(--musgo);
  display:grid;place-items:center;flex:none}
.acc-tit{flex:1;min-width:0}
.acc-tit b{display:block;font-size:14.5px;letter-spacing:-.01em}
.acc-tit small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:11.5px;color:var(--mu);line-height:1.35;margin-top:1px}
.acc-control{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.acc-mixto{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--am);
  background:var(--ambg);border-radius:999px;padding:2px 8px}
.acc-pista{margin:0;padding:2px 16px 10px 66px;font-size:11px;color:var(--mu)}
.acc-subs{list-style:none;margin:0;padding:0;border-top:1px solid var(--niebla);background:#fcfdfb}
.acc-sub{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 16px 9px 22px;border-top:1px solid #eef1ec}
.acc-sub:first-child{border-top:none}
.acc-sub::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;
  background:var(--c);opacity:.8}
.acc-sub.n-ninguno::before{background:var(--cb);opacity:1}
.acc-sub-nom{min-width:0;display:flex;flex-direction:column;gap:3px}
.acc-sub-nom>span{font-size:13px;color:var(--tinta)}
/* Las secciones de adentro (las de un proyecto abierto, las de un expediente)
   van bajo un rótulo que dice por dónde se llega, y un poco más adentro, para
   que la jerarquía se lea sin explicarla: la pestaña de la barra es la puerta. */
.acc-grupo{list-style:none;padding:12px 16px 7px 22px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--musgo);border-top:1px solid var(--niebla);background:var(--vt)}
.acc-grupo small{display:block;margin-top:2px;font-size:11px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--mu)}
.acc-sub.acc-interna{padding-left:36px}
.acc-sub.acc-interna::before{left:14px}
.tg{font-style:normal;font-size:10.5px;color:var(--mu);background:var(--humo);border-radius:999px;
  padding:1px 8px;align-self:flex-start;white-space:nowrap}
.tg-aj{color:var(--am);background:var(--ambg);font-weight:600}
/* Una advertencia no es un candado: se lee entera, así que sí parte la línea.
   Va en ámbar —llama la atención— y no en rojo, que diría «esto está mal». */
.tg-aviso{color:var(--am);background:var(--ambg);white-space:normal;line-height:1.35;
  border-radius:8px;padding:3px 8px;max-width:100%}
.acc-aviso-mod{margin:0 16px 10px;padding:7px 10px;font-size:11.5px;line-height:1.4;color:var(--am);
  background:var(--ambg);border-radius:9px}
.acc-ley-avisos{border:none;cursor:pointer;font-family:inherit;color:var(--am);background:var(--ambg)}
.acc-ley-avisos:hover{filter:brightness(.97)}
/* La ventana que las resume antes de guardar */
.m-intro{font-size:12.5px;color:var(--mu);margin:0 0 12px;line-height:1.5}
.avisos-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.avisos-lista li{border-left:3px solid var(--am);background:var(--ambg);border-radius:0 9px 9px 0;
  padding:8px 12px}
.avisos-lista b{display:block;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--am)}
.avisos-lista span{display:block;font-size:12.5px;color:var(--tinta);line-height:1.45;margin-top:2px}
@keyframes accDestello{0%{box-shadow:0 0 0 0 rgba(31,107,52,.45)}100%{box-shadow:0 0 0 14px rgba(31,107,52,0)}}
.acc-destello{animation:accDestello .9s ease-out}
.acc-vacio{text-align:center;color:var(--mu);font-size:13px;padding:24px 0}

/* El selector de cuatro: un control segmentado. El radio de verdad sigue ahí,
   invisible, y es el que recibe el teclado; la etiqueta es solo su piel. */
.seg4{display:inline-grid;grid-template-columns:repeat(4,auto);gap:2px;background:var(--humo);
  border:1px solid var(--niebla);border-radius:999px;padding:3px}
.sg{position:relative;cursor:pointer;display:block}
.sg input{position:absolute;opacity:0;width:1px;height:1px}
.sg span{display:block;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:600;
  color:var(--mu);white-space:nowrap;text-align:center;transition:background .12s,color .12s}
.seg4-sm .sg span{padding:4px 10px;font-size:11px}
.sg:hover input:not(:disabled):not(:checked)+span{color:var(--c);background:#fff}
.sg input:checked+span{color:var(--c);background:var(--cf);box-shadow:inset 0 0 0 1px var(--cb),0 1px 2px rgba(16,28,21,.07)}
.sg input:focus-visible+span{outline:2px solid var(--musgo-cl);outline-offset:1px}
.sg input:disabled{cursor:not-allowed}
.sg input:disabled+span{cursor:not-allowed;opacity:.35}
.sg input:disabled:checked+span{opacity:1}

/* Las acciones se quedan a la vista mientras se recorre la matriz. */
.acc-pie{position:sticky;bottom:0;z-index:6;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  justify-content:flex-end;background:rgba(244,246,241,.94);backdrop-filter:blur(6px);
  border-top:1px solid var(--niebla);padding:12px 0;margin-top:18px}
.acc-pie-nota{margin-right:auto;font-size:12px;color:var(--mu)}
.acc-pie-nota b{color:var(--am)}

@media(max-width:1100px){.alc{grid-template-columns:1fr}}
@media(max-width:620px){
  .acc-sub{flex-direction:column;align-items:stretch;gap:7px}
  .seg4{display:grid;width:100%;grid-template-columns:repeat(4,1fr)}
  .acc-cab{flex-wrap:wrap}
  .acc-control{width:100%;align-items:stretch}
  .acc-pista{padding-left:16px}
  .rol-ficha{max-width:none;flex:1 1 100%}
}

/* Licitaciones: el «+» de la propuesta (rubros, consultas) va a lo ancho y bajo */
.meta-agregar.lic-agregar{width:100%;min-height:0;padding:12px 16px;flex-direction:row;gap:12px;margin-top:6px}
.meta-agregar.lic-agregar .meta-agregar-ico{width:34px;height:34px;flex:0 0 34px}
.meta-agregar.lic-agregar span:last-child{max-width:none}
.lic-sub{font-size:12.5px;color:var(--mu);line-height:1.5;margin-top:2px;max-width:92ch}
.lic-nota{font-size:12px;color:var(--mu)}

/* Respaldos (Administracion) */
.resp-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.resp-cifra{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.resp-cifra span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mu)}
.resp-cifra b{font-size:22px;color:var(--ink)}
.resp-cifra small{font-size:12px;color:var(--mu)}
.resp-estado{padding:12px 18px;font-size:12.5px;color:var(--mu);border-bottom:1px solid var(--niebla)}
.resp-estado.ok{color:var(--musgo)}
.resp-pie{padding:0 18px 14px;font-size:12px;color:var(--mu)}
.resp-modal{margin:0 0 12px;font-size:13px;color:var(--mu);line-height:1.5}
.resp-descargas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:16px 18px}
.resp-boton{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--niebla);border-radius:10px;text-decoration:none;color:var(--ink);background:#fff;font:inherit;text-align:left;cursor:pointer}
.resp-boton:hover{border-color:var(--musgo);background:var(--vc)}
.resp-boton span{font-size:12px;color:var(--mu);line-height:1.45;flex:1}
.resp-boton em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--musgo)}
.resp-nota{font-size:12px;color:var(--mu)}

/* ===================================================================
   Sistema educativo del proyecto (vistas/sistema-educativo.js)
   =================================================================== */
.edu-mu{color:var(--mu);font-size:12px}
.edu-cab-in{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:14px 18px}
.edu-cab h3{font-size:17px;letter-spacing:-.02em;margin:2px 0 4px}
.edu-cab .eb{margin:0}
.edu-estado{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.edu-cab-acts{display:flex;gap:7px;flex-wrap:wrap}
.edu-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px;margin-bottom:18px}
.edu-ico{all:unset;box-sizing:border-box;cursor:pointer;background:var(--lienzo);border:1px solid var(--niebla);border-radius:var(--r);
  box-shadow:var(--sh);padding:14px 15px 13px;display:flex;flex-direction:column;gap:3px;min-width:0;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.edu-ico:hover,.edu-ico:focus-visible{border-color:#c8d5cb;box-shadow:var(--sh-alta);transform:translateY(-1px)}
.edu-ico:focus-visible{outline:2px solid var(--musgo);outline-offset:2px}
.edu-ico-sim{color:var(--musgo);margin-bottom:4px}
.edu-ico.alerta .edu-ico-sim{color:var(--am)}
.edu-ico-t{font-weight:700;font-size:14px}
.edu-ico-v{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.edu-ico-v small{font-size:12px;font-weight:600;color:var(--mu);letter-spacing:0}
.edu-ico-d{font-size:12px;color:var(--mu)}
.edu-ico.alerta .edu-ico-d{color:var(--am);font-weight:600}
.edu-ico-r{font-size:11.5px;color:var(--mu);border-top:1px solid var(--niebla);padding-top:7px;margin-top:6px;line-height:1.35}
.edu-tit{display:flex;align-items:center;gap:10px;margin:4px 0 14px;flex-wrap:wrap}
.edu-tit h3{font-size:18px;letter-spacing:-.02em}
.edu-tit-ico{color:var(--musgo);display:inline-flex}
.edu-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--mu);font-weight:700;padding:13px 18px 8px}
.edu-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:0 14px;align-items:start}
.edu-atencion ul{list-style:none;padding:0 18px 12px;margin:0;max-height:340px;overflow:auto}
.edu-atencion li{border-left:3px solid var(--niebla);padding:6px 10px;margin-bottom:6px;background:var(--humo);border-radius:0 6px 6px 0;font-size:13px}
.edu-atencion li.rj{border-left-color:var(--ro)}
.edu-atencion li.am{border-left-color:var(--brote)}
.edu-atencion li b{display:block;font-weight:600}
.edu-atencion li span{display:block;color:var(--mu);font-size:12px}
.edu-atencion.ok p{padding:0 18px 14px;color:var(--mu)}
.edu-scroll{overflow-x:auto}
.edu-tabla table.m th,.edu-tabla table.m td{padding:7px 14px}
.edu-nota{font-size:12px;color:var(--mu);padding:0 18px 12px}
.edu-pie{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 20px}
.edu-grad-in{padding:0 18px 14px}
.edu-grad-in h3{font-size:16px;margin-bottom:4px}
.edu-grad-in p{font-size:13px;margin:2px 0}
.edu-hojas{margin-bottom:10px;flex-wrap:wrap}
.edu-franja{background:#fff6e0;border:1px solid #f0d58f;color:#6d4a05;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;margin:0 0 10px}
.edu-franja.lectura{background:var(--humo);border-color:var(--niebla);color:var(--mu);font-weight:500}
.edu-filtros{display:flex;gap:8px 12px;align-items:flex-end;flex-wrap:wrap;margin:0 0 10px}
.edu-filtros label{display:flex;flex-direction:column;font-size:11px;color:var(--mu);font-weight:600;gap:3px}
.edu-filtros select,.edu-filtros input{font-size:13px;padding:5px 8px;border:1px solid var(--niebla);border-radius:7px;background:var(--lienzo);color:var(--tinta);min-width:0;max-width:220px}
.edu-buscar input{width:190px}
.edu-esp{flex:1}
.edu-per{margin:-4px 0 8px}
.edu-hoja{overflow:hidden}
.edu-hoja-scroll{overflow:auto;max-height:68vh}
table.edu-t{border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:100%}
table.edu-t th,table.edu-t td{padding:6px 10px;border-bottom:1px solid var(--niebla);border-right:1px solid #eef1ec;white-space:nowrap;vertical-align:top;text-align:left}
table.edu-t th{position:sticky;top:0;z-index:1;background:#f1f4ef;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);font-weight:700;cursor:pointer;user-select:none}
table.edu-t th.ed{color:var(--musgo)}
table.edu-t th.ed::after{content:" \270E";font-size:10px}
table.edu-t th.per{background:#f6f2ea}
table.edu-t tbody tr:hover td{background:var(--humo)}
table.edu-t td.t-entero,table.edu-t td.t-decimal,table.edu-t td.t-pct{text-align:right;font-variant-numeric:tabular-nums}
td.edu-ed{cursor:cell;box-shadow:inset 0 -2px 0 rgba(31,107,52,.18)}
td.edu-ed:hover{background:#eef6ef !important;box-shadow:inset 0 0 0 1px var(--musgo)}
.edu-lapiz{all:unset;cursor:pointer;margin-left:6px;color:var(--musgo);font-size:12px;padding:1px 4px;border-radius:4px}
.edu-lapiz:hover{background:#eef6ef}
.edu-largo{display:inline-block;max-width:320px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.edu-si{color:var(--musgo);font-weight:600}
.edu-no{color:var(--mu)}
.btn.xs{font-size:11px;padding:2px 8px;border-radius:6px}
.edu-rrhh{white-space:normal !important;min-width:220px}
.edu-rrhh-p{font-size:12px;margin-top:3px}
.edu-rrhh-b{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.edu-pag{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin:4px 0 20px;font-size:12.5px;color:var(--mu)}
.edu-pag span{margin-right:auto}
.edu-diag{border-radius:8px;padding:10px 12px;font-size:13px;margin-top:10px}
.edu-diag.ok{background:var(--vc);color:var(--musgo-hondo)}
.edu-diag.mal{background:var(--ambg);color:#6d4a05}
.edu-diag div{margin-top:3px}
.edu-diag-av{font-weight:600}
.btn.rojo{color:var(--ro)}
/* La hoja de asistencia: estudiante x sesion, como en Excel */
.edu-ley{font-size:11.5px;color:var(--mu);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.edu-ley b{display:inline-block;width:18px;text-align:center;border-radius:4px;font-size:11px}
table.edu-mat{border-collapse:separate;border-spacing:0;font-size:12px}
table.edu-mat th,table.edu-mat td{border-bottom:1px solid var(--niebla);border-right:1px solid #eef1ec;text-align:center;padding:4px 3px;min-width:30px}
table.edu-mat thead th{position:sticky;top:0;z-index:2;background:#f1f4ef;font-size:11px;color:var(--mu)}
table.edu-mat thead th small{display:block;font-size:9.5px;font-weight:500}
table.edu-mat th.est{position:sticky;left:0;z-index:1;background:var(--lienzo);text-align:left;white-space:nowrap;font-weight:600;padding:4px 10px;min-width:210px;max-width:260px;overflow:hidden;text-overflow:ellipsis}
table.edu-mat thead th.est{z-index:3;background:#f1f4ef}
table.edu-mat th.est small{color:var(--ro);font-weight:600}
table.edu-mat tr.ret th.est{color:var(--mu)}
table.edu-mat th.fut{opacity:.55}
table.edu-mat th.abierta{background:#fff1d6}
table.edu-mat td{font-weight:700}
.c-p{background:#e4f1e6;color:var(--musgo)}
.c-t{background:#fdf0d7;color:var(--am)}
.c-a{background:#fbe3e0;color:var(--ro)}
.c-j{background:#e3edf5;color:var(--az)}
.c-f,table.edu-mat td.fuera{background:#f3f4f2;color:#b3b9b4}
table.edu-mat td.sin{opacity:.8}
table.edu-mat td.fut{background:repeating-linear-gradient(45deg,#fafbf9,#fafbf9 4px,#f2f4f1 4px,#f2f4f1 8px)}
table.edu-mat td.edu-ed{cursor:pointer}
table.edu-mat td.edu-ed:hover{outline:2px solid var(--musgo);outline-offset:-2px}
table.edu-mat td.tot{font-variant-numeric:tabular-nums;background:var(--humo);min-width:48px}
table.edu-mat td.tot.alerta{color:var(--ro);background:#fbeae8}
@media (max-width:700px){
  .edu-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .edu-ico{padding:11px}
  .edu-ico-v{font-size:18px}
  .edu-ico-r{display:none}
  .edu-dos{grid-template-columns:1fr}
  .edu-filtros select,.edu-filtros input,.edu-buscar input{max-width:150px}
}

.edu-espejo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--niebla);padding:8px 18px;font-size:12px;color:var(--mu)}
.edu-espejo span{flex:1;min-width:220px}

/* ===================== Minutas ===================== */
/* Elegir varios proyectos. Antes era un <select>: al abrirlo, lo elegido se
   veia resaltado y parecia que se estaba QUITANDO. Con casillas a la vista se
   ve de un golpe cuales estan dentro y cuales no. */
.elige{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:7px;
  max-height:250px;overflow:auto;padding:8px;background:var(--humo);
  border:1px solid var(--niebla);border-radius:10px}
.elige label{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:8px;
  background:var(--card);border:1px solid var(--niebla);cursor:pointer;font-size:12.5px;line-height:1.35}
.elige label:hover{border-color:var(--musgo-cl)}
.elige label.on{border-color:var(--musgo);background:var(--vc)}
.elige input{margin:1px 0 0;width:16px;height:16px;flex:0 0 auto;accent-color:var(--musgo);cursor:pointer}
.elige b{display:block;font-weight:600;letter-spacing:-.01em}
.elige em{display:block;font-style:normal;color:var(--mu);font-size:11px;margin-top:1px}
.elige-vacio{padding:14px;color:var(--mu);font-size:12.5px}

/* La minuta ya registrada: cada cosa con su aire. Antes se leia como un solo
   bloque continuo y no se distinguia un tema de un acuerdo. */
.mn-proy{margin-bottom:26px}
.mn-proy > .card{border-left:4px solid var(--musgo-cl)}
.mn-seccion{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mu);
  font-weight:700;padding:16px 18px 0}
.mn-estado{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;padding:14px 18px 4px}
.mn-estado > div{background:var(--humo);border-radius:9px;padding:11px 13px}
.mn-estado h5{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mu)}
.mn-estado p{margin:0;font-size:13px;line-height:1.5}
.mn-tema{padding:13px 18px;border-top:1px solid var(--niebla)}
.mn-tema:first-child{border-top:0}
.mn-tema h4{margin:0 0 5px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;display:flex;gap:8px}
.mn-tema h4 i{font-style:normal;color:var(--musgo);font-variant-numeric:tabular-nums}
.mn-tema p{margin:0;font-size:13px;line-height:1.6;color:#3c4740;white-space:pre-wrap}
.mn-tema p + p{margin-top:7px}
.mn-vacia{padding:13px 18px;color:var(--mu);font-size:12.5px}
.eb.aire{margin-top:26px}