.panel{display:none;padding-top:20px}
.panel.active{display:block}
.btn{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--brand2)} .btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{background:rgba(255,255,255,.14)}
/* Encabezado único de pestaña (comun/encabezado.js). Reemplaza los cinco patrones distintos con los
   que abrían las 26 pestañas. El h2 es el primer encabezado real que tiene el tablero: el h1 sigue
   siendo la cooperativa, así queda una jerarquía que un lector de pantalla puede recorrer. */
.pest-hd{margin:0 0 var(--sp-7);padding-bottom:11px;border-bottom:1px solid var(--line)}
/* La pregunta ES el h2 de la pestaña. No hay título aparte: el nombre ya está en la navegación.
   display:flex para que el "?" quede alineado al lado y no arrastre la línea base. */
.pest-hd .pest-q{margin:0;font-size:19px;font-weight:650;letter-spacing:-.2px;color:var(--brand-ink);
  line-height:1.25;display:flex;align-items:center;gap:2px}
/* Período deshabilitado: se muestra apagado en las 15 pestañas que lo ignoran, en vez de ofrecer un
   control que no hace nada. */
.period.inactivo{opacity:.45}
.period.inactivo select{cursor:not-allowed}
@media(max-width:760px){.pest-hd .pest-q{font-size:16.5px}}
.sec-title{font-size:16px;font-weight:650;color:var(--ink);margin:var(--sp-9) 0 var(--sp-5);display:flex;align-items:center;gap:var(--sp-4)}
.sec-title:first-child{margin-top:6px}
/* Título que titulosAfuera() sacó de su tarjeta (comun/chasis.js). Al quedar afuera pierde el padding
   de la tarjeta, así que necesita su propio margen inferior chico: el aire de arriba lo pone el
   margen de .sec-title y el de abajo tiene que ser menor, para que el título quede pegado a lo que
   titula y no flotando entre dos tarjetas. */
.sec-title.t-afuera{margin-bottom:var(--sp-3)}
.sub{font-size:13px;color:var(--muted);margin:-4px 0 12px}
/* gap 14 -> 16: los 14px estaban justo en el medio de dos pasos y se elige el de arriba, que es el
   mismo ritmo que el margen de las tarjetas. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-7);margin-bottom:var(--sp-4)}
.pk-chip{border-radius:20px;padding:1px 7px;font-size:11px;font-weight:700;color:#fff}
/* Chip de filtro / conmutador de vista. Estaba declarado ACÁ y además inyectado desde proyectos.js
   con los mismos valores: el que se veía era siempre el inyectado, así que tocar este archivo no
   hacía nada. Ahora hay uno solo, y el verde del activo es el del acento como el resto. */
.pv-chip{cursor:pointer;border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:13px;background:var(--card)}
.pv-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-7);box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;transition:box-shadow .15s,border-color .15s}
.kpi.hashint:hover{border-color:#cfe6dc;box-shadow:0 6px 20px rgba(20,60,45,.10)}
.kpi .lab{font-size:13px;color:var(--muted);font-weight:600;line-height:1.35;display:flex;align-items:flex-start;gap:5px}
.modov{position:fixed;inset:0;background:rgba(12,26,20,.42);display:none;align-items:flex-start;justify-content:center;padding:4vh 18px;z-index:60;overflow:auto}
.modov.open{display:flex}
.modbox{width:min(680px,100%)}
.modbox>div>.card{margin:0;border-radius:14px;box-shadow:0 18px 50px rgba(10,25,18,.28)}
.pk-card{min-height:118px;display:flex;flex-direction:column}
.pk-card .pk-meta{margin-top:auto}
/* Componentes compartidos por Proyectos, Tareas y Comunicación */
.selstd{padding:7px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:var(--card);color:var(--ink);font-family:inherit}
.selstd:hover{border-color:#cfdad3}
.selstd:focus{outline:2px solid var(--accent);outline-offset:-1px}
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px;margin:14px 0 18px}
.pst{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.pst .l{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:11px}
.pst .duo{display:flex;gap:24px;align-items:flex-start}
.pst .big{font-size:27px;font-weight:600;line-height:1;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.pst .cap{font-size:12px;color:var(--muted);margin-top:5px}
.pst .split{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pring{width:72px;height:42px;flex:none}.pring path{fill:none;stroke-linecap:round}
/* .btnp era un tercer botón verde ("＋ Nuevo proyecto" y compañía, 5 usos) con su propio verde a
   mano, distinto del de .goto.pri. Se absorbió: esos 5 pasaron a .goto.pri.accion, que es el mismo
   botón principal más el margen y la alineación que necesita cuando cuelga de un título. */
.goto.pri.accion{margin-left:8px;vertical-align:middle}
/* .goto se usaba en 30 lugares (Guardar/Cancelar de todos los modales, acciones de tabla) SIN
   ninguna regla CSS: eran botones nativos del sistema, con borde "outset" y 21px de alto.
   Base = secundario; .pri = acción principal del formulario. */
/* CÍRCULO DE INICIALES. Lo usan DOS lugares: el «quién sos» de la barra clara (comun/chasis.js) y los
   responsables de las tarjetas de proyecto. Vino de 09-gestion.css cuando dejó de ser de un solo
   subsistema. No hay fotos en el padrón y no va a haberlas: dos letras alcanzan para distinguir de un
   vistazo. El fondo es el verde de acento al 14% sobre blanco —el mismo recurso que .cncm-gen— y la
   tinta es --brand-ink: medido con getComputedStyle sobre el elemento real, 8,82:1. */
.pav{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;
  border-radius:50%;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--brand-ink)}

.goto{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:8px 14px;font-size:13px;font-weight:600;font-family:inherit;line-height:1.2;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.goto:hover{background:var(--brand-bg);border-color:var(--accent);color:var(--accent)}
.goto:active{transform:scale(.98)}
.goto.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.goto.pri:hover{background:var(--brand2);border-color:var(--brand2);color:#fff}
.goto[disabled]{opacity:.5;cursor:default;transform:none}
/* Acción destructiva (borrar, quitar, dar de baja). Reemplaza los 13 style="color:#b3261e" que se
   escribían a mano en el botón: el mismo rojo, ahora desde el token, y con un hover que además
   confirma lo que va a pasar en vez de virar al verde del hover normal. */
.goto.danger{color:var(--st-alta)}
.goto.danger:hover{background:var(--neg-bg);border-color:#e8b4b0;color:var(--st-alta)}
/* Acción destructiva que además es la PRINCIPAL del formulario (el "Quitar" de un diálogo de
   confirmación). Sin esta regla, .pri ponía fondo verde y .danger texto rojo encima: rojo sobre
   verde, ilegible. Acá el rojo pasa a ser el fondo, con texto blanco — 6,54:1, cumple AA. */
.goto.pri.danger{background:var(--st-alta);border-color:var(--st-alta);color:#fff}
.goto.pri.danger:hover{background:#8f1e18;border-color:#8f1e18;color:#fff}
/* Control segmentado: dos opciones excluyentes que comparten una caja. Existía solo en Margen
   (Devengado / Percibido) dibujado con 6 valores de color a mano en el HTML. El activo va con el
   verde de la marca, igual que .cchip.on y el resto de los conmutadores del tablero. */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:2px 0 var(--sp-7)}
.seg button{padding:7px 16px;border:0;cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;
  background:var(--card);color:var(--brand-ink);transition:background .15s,color .15s}
.seg button:hover:not(.on){background:var(--brand-bg)}
.seg button.on{background:var(--brand);color:#fff}
/* Diálogo de motivo / confirmación (pedirMotivo en comun/ui.js). Usa la misma caja que el resto de
   los modales del tablero —.modov + .modbox + .card + .mfoot con botones .goto—, así que lo único
   propio es el cuerpo explicativo y el campo. */
.pedir-cuerpo{font-size:13.5px;color:var(--muted);line-height:1.55;margin:2px 0 12px}
.pedir-cuerpo b{color:var(--ink)}
.pedir-cuerpo .dato{display:block;margin-top:6px;color:var(--ink);font-weight:600}
.pedir-lab{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.pedir-txt{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:14px;line-height:1.45;color:var(--ink);background:var(--card);resize:vertical}
.pedir-txt:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
/* Botón flotante para cargar una tarea desde cualquier pestaña. Abajo a la derecha y no en el
   encabezado, donde ya hay cinco controles y ninguno sirve en las 26 pestañas. z-index por debajo
   del modal (60) para que el formulario lo tape cuando se abre. */
.fab{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:7px;
  background:var(--accent);color:#fff;border:none;border-radius:var(--r-pill);
  padding:12px 18px;font-size:14px;font-weight:650;font-family:inherit;cursor:pointer;
  box-shadow:0 6px 20px rgba(10,60,42,.28);transition:background .15s,box-shadow .15s,transform .12s}
.fab span{font-size:17px;line-height:1}
.fab:hover{background:var(--brand2);box-shadow:0 8px 26px rgba(10,60,42,.34)}
.fab:active{transform:scale(.97)}
.fab[disabled]{cursor:wait}
/* display:inline-flex le gana al display:none que el navegador le pone a [hidden]. Sin esta regla,
   `fab.hidden = !proyCanWrite()` no escondía nada y el botón de nueva tarea le aparecía a gente que
   no puede crear tareas. El atributo estaba puesto; el botón se veía igual. */
.fab[hidden]{display:none}
/* En celular queda solo el ＋: el texto se come media pantalla y la acción ya se entiende. */
@media(max-width:620px){
  .fab{right:14px;bottom:14px;padding:0;width:52px;height:52px;justify-content:center;font-size:0;gap:0}
  .fab span{font-size:24px}
}
/* Aviso breve, no bloqueante. Acompaña al botón: aparece del mismo lado y se va solo. */
.aviso{position:fixed;right:20px;bottom:84px;z-index:70;max-width:min(380px,calc(100vw - 40px));
  background:var(--brand-ink);color:#fff;border-radius:var(--r);padding:11px 15px;font-size:13.5px;
  box-shadow:var(--shadow-pop);opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s}
.aviso.on{opacity:1;transform:none}
.aviso.mal{background:var(--neg)}
@media(max-width:620px){.aviso{right:14px;left:14px;bottom:78px;max-width:none}}
/* Pie de modal: reemplaza los   que separaban los botones por un gap real. */
.mfoot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
@media(pointer:coarse){.goto{min-height:44px}}
.toolrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.fcount{background:#fff;color:#1d7a4d;border-radius:20px;padding:0 6px;margin-left:2px}
.phead{margin:2px 0 14px}
.crumb{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:5px}
.phead h2{margin:0;font-size:24px;font-weight:600;letter-spacing:-.3px;line-height:1.15}
.psub{color:var(--muted);font-size:14px;margin-top:3px}
.iconbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.iconbtn:hover{border-color:#cfdad3;color:var(--ink);background:#f7faf8}
.iconbtn.danger:hover{border-color:#e8b4b0;color:#b3261e;background:#fdf5f4}
.iconbtn i{font-style:normal;font-size:13px;line-height:1}
.acts{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;opacity:.72;transition:opacity .15s}
.proy-card:hover .acts,.pk-card:hover .acts,.acts:focus-within{opacity:1}
.deflist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.defrow{border-bottom:1px solid #eef2ee;background:var(--card)}
.defrow:last-child{border-bottom:none}
.defrow.open{background:#fbfdfb}
.defhead{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;font-size:14px}
.defhead:hover{background:#f4f8f5}
.defar{color:var(--muted);font-size:12px;transition:transform .15s;flex:none}
.defrow.open .defar{transform:rotate(90deg)}
.deftit{font-weight:600;flex:1;min-width:0}
.defmeta{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34%}
.defcom{color:var(--muted);font-size:12px;white-space:nowrap;flex:none}
.defest{font-size:12px;font-weight:700;white-space:nowrap;flex:none}
.deffec{color:var(--muted);font-size:12px;white-space:nowrap;flex:none;width:76px;text-align:right}
.defbody{padding:2px 16px 14px 30px}
@media(max-width:720px){.defmeta,.deffec{display:none}.defbody{padding-left:16px}}
/* "Ver como": la barra de que estás mirando el tablero con otro perfil. Va fija arriba y empuja el
   contenido, no lo tapa: un cartel que se puede scrollear fuera de vista no sirve para avisar de un
   estado en el que uno está. */
#verComoBar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px 16px; font-size:13px;
  background:var(--warn); color:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
}
#verComoBar .vcrol{ opacity:.85; font-size:12px; border:1px solid rgba(255,255,255,.5);
  border-radius:99px; padding:1px 8px; margin-left:4px }
#verComoBar .vcnota{ opacity:.9; font-size:12px; flex:1; min-width:200px }
#verComoBar .goto{ background:#fff; border-color:#fff; color:var(--ink); font-weight:600 }
body.vercomo{ padding-top:42px }
@media (max-width:700px){ body.vercomo{ padding-top:76px } }

/* Aviso de que la foto diaria está vieja. Va en el encabezado, al lado de la hora de actualización,
   porque es ahí donde alguien busca si el número que está mirando es de hoy. */
.fotovieja{ display:inline-block; margin-top:2px; padding:1px 7px; border-radius:99px;
  background:var(--neg); color:#fff; font-size:11px; font-weight:650; cursor:help }