/* Panel de gestión de Cajasol Educa. Lenguaje de la web de la Fundación
   (skill cajasol-design): ArgentumSans, amarillo #FDB945 como único acento,
   negro #222 y blanco, esquinas rectas, sin sombras salvo el despegue de
   los botones. Fondo claro en las pantallas de trabajo; la entrada, en
   negro, como el bloque de Educa en la web. */

@font-face{font-family:'ArgentumSans';src:url('fonts/ArgentumSans-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'ArgentumSans';src:url('fonts/ArgentumSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'ArgentumSans';src:url('fonts/ArgentumSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'ArgentumSans';src:url('fonts/ArgentumSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'ArgentumSans';src:url('fonts/ArgentumSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --blanco:#fff;--negro:#222222;--amarillo:#FDB945;
  --gris-claro:#FCFCFC;--gris:#D9D9D9;--gris-borde:#e6e6e6;
  --negro-50:rgba(34,34,34,.5);--negro-70:rgba(34,34,34,.7);
  --blanco-50:rgba(255,255,255,.5);
  --ok:#2FB457;--aviso:#F0602F;--error:#D62839;
  --fuente:'ArgentumSans','Helvetica Neue',Arial,sans-serif;
  --transicion:.35s cubic-bezier(.3,.86,.36,.95);
  --gutter:clamp(16px,4vw,67px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:16px/1.4 var(--fuente);color:var(--negro);background:var(--blanco);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
body.oscuro{background:var(--negro);color:var(--blanco)}
a{color:inherit;text-decoration:none;transition:color var(--transicion)}
a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:.5px}
h1,h2,h3{text-transform:uppercase;font-weight:600;line-height:1.1;margin:0 0 22px}
h1{font-size:clamp(26px,3.4vw,44px)}
h2{font-size:clamp(20px,2.4vw,30px)}
.h-dos-pesos .ligero{font-weight:300}
.h-seccion{margin-top:48px}
.antetitulo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--negro-50);margin:0 0 8px}
.oscuro .antetitulo{color:var(--amarillo)}
.muted{color:var(--negro-50)}
.pequeno{font-size:13px}
.atenuada{opacity:.5}

/* Cabecera: blanca, hilo amarillo debajo, como la de la web */
.cabecera{display:flex;align-items:center;gap:32px;padding:14px var(--gutter);border-bottom:1px solid var(--amarillo);background:var(--blanco);position:sticky;top:0;z-index:5}
.cabecera-logo{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--negro-50)}
.cabecera-logo img{height:34px;display:block}
.cabecera-logo:hover{text-decoration:none}
.cabecera-nav{display:flex;gap:22px;margin-left:auto;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.cabecera-nav a{padding:6px 0;border-bottom:2px solid transparent;transition:border-color var(--transicion),opacity var(--transicion)}
.cabecera-nav a:hover{text-decoration:none;opacity:.6}
.cabecera-nav a.activo{border-bottom-color:var(--amarillo)}
.cabecera-usuario{display:flex;align-items:center;gap:14px;font-size:13px;margin:0}
.cabecera-usuario strong{font-weight:600}

.contenido{flex:1;padding:40px var(--gutter) 60px;width:100%;max-width:1400px;margin:0 auto}
.pie{padding:18px var(--gutter);font-size:12px;color:var(--negro-50);border-top:1px solid var(--gris-borde)}
.oscuro .pie{color:var(--blanco-50);border-top-color:#3a3a3a}

/* Entrada e invitación: tarjeta sobre negro */
.tarjeta-acceso{max-width:420px;margin:6vh auto 0;padding:0 8px}
.logo-acceso{height:52px;display:block;margin-bottom:28px}
.tarjeta-acceso p{color:var(--blanco-50);line-height:1.5}
.tarjeta-acceso h1{color:var(--blanco)}
.tarjeta-acceso .nota{font-size:13px;margin-top:28px}

/* Formularios: inputs con solo línea inferior, como la newsletter de la web */
label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--negro-50);margin:0 0 18px}
.oscuro label{color:var(--blanco-50)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  display:block;width:100%;margin-top:6px;padding:10px 0;border:0;border-bottom:1px solid var(--gris);background:transparent;
  font:16px var(--fuente);color:inherit;border-radius:0;outline:0;transition:border-color var(--transicion)}
.oscuro input,.oscuro select{border-bottom-color:#3a3a3a;color:var(--blanco)}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--amarillo)}
select{cursor:pointer}
.error{color:var(--amarillo);font-weight:500;margin:-6px 0 18px}
body:not(.oscuro) .error{color:var(--error)}
.formulario-fila{display:grid;grid-template-columns:1.2fr 1.4fr .8fr auto;gap:24px;align-items:end;max-width:1000px}
.formulario-fila label{margin:0}
.en-linea{display:inline;margin:0}
.en-linea select{display:inline-block;width:auto;margin:0;padding:4px 0;font-size:14px}
@media (max-width:800px){.formulario-fila{grid-template-columns:1fr}}

/* Botones: planos, cuadrados; levitan en hover. El amarillo es el CTA sobre negro. */
.btn{display:inline-block;padding:13px 26px;border:2px solid var(--negro);background:var(--negro);color:var(--blanco);
  font:600 13px/1 var(--fuente);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:0;
  transition:transform var(--transicion),box-shadow var(--transicion),background var(--transicion),color var(--transicion)}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.22)}
.btn:active{transform:translateY(-1px)}
.btn-negro:hover{background:var(--blanco);color:var(--negro)}
.btn-amarillo{background:var(--amarillo);border-color:var(--amarillo);color:var(--negro);width:100%;padding:15px 26px}
.btn-amarillo:hover{background:var(--blanco);border-color:var(--blanco);box-shadow:0 4px 20px rgba(253,185,69,.5)}
.btn-min{padding:7px 12px;font-size:11px;background:transparent;color:var(--negro);border-color:var(--gris)}
.btn-min:hover{border-color:var(--negro);box-shadow:none}
.btn[disabled]{background:var(--gris);border-color:var(--gris);color:var(--blanco);cursor:default;transform:none;box-shadow:none}

/* Tablas: hilos horizontales, sin cajas */
.tabla{width:100%;border-collapse:collapse;font-size:15px}
.tabla th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--negro-50);padding:0 12px 10px 0;border-bottom:1px solid var(--negro)}
.tabla td{padding:12px 12px 12px 0;border-bottom:1px solid var(--gris-borde);vertical-align:middle}
.tabla .acciones{text-align:right;white-space:nowrap}
.tabla .acciones form{margin-left:6px}

/* Etiquetas de estado y avisos */
.etiqueta{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:4px 8px;border:1px solid var(--gris);color:var(--negro-50)}
.etiqueta-ok{border-color:var(--ok);color:var(--ok)}
.etiqueta-aviso{border-color:var(--amarillo);color:#8a5a00;background:rgba(253,185,69,.14)}
.aviso{padding:14px 18px;margin:0 0 24px;border-left:4px solid var(--amarillo);background:rgba(253,185,69,.12);font-size:15px;word-break:break-all}
.aviso-error{border-left-color:var(--error);background:rgba(214,40,57,.08)}
.oscuro .aviso{background:rgba(253,185,69,.16);color:var(--blanco)}
.bloque{margin-top:40px}

/* ---------- Fase 2: actividades ---------- */
.cabecera-pagina{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cabecera-pagina h1{margin-bottom:12px}
.barra-pendientes{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;margin:8px 0 24px;background:var(--negro);color:var(--blanco);font-size:14px}
.barra-pendientes .muted{color:var(--blanco-50)}

/* Gama por área (skill cajasol-design): solo marca el área */
.area-expresiones-culturales{--area:#F0602F;--area-texto:#222}
.area-comunicacion-linguistica{--area:#2FB457;--area-texto:#222}
.area-educacion-financiera{--area:#1E9BD3;--area-texto:#222}
.area-habilidades-sociales{--area:#D62839;--area-texto:#fff}
.area-cajasol-lab{--area:#8A4FC8;--area-texto:#fff}
.marca-area{display:inline-block;width:.55em;height:.55em;background:var(--area,var(--gris));margin-right:.4em;vertical-align:baseline}

/* Filtro: píldoras de área con marca amarilla, como la agenda */
.filtro{margin:0 0 28px}
.pildoras{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pildora{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--gris);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;transition:background var(--transicion),border-color var(--transicion)}
.pildora:hover{text-decoration:none;border-color:var(--negro)}
.pildora.activa{background:var(--amarillo);border-color:var(--amarillo)}
.pildora .cuadro{width:9px;height:9px;background:var(--area)}
.filtro-fila{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.filtro-fila select,.filtro-fila input[type=search]{width:auto;margin:0;padding:8px 0;font-size:14px;min-width:220px}
.casilla{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--negro);margin:0}
.casilla input{width:auto;margin:0}

/* Grupos y filas */
.grupo{margin:0 0 40px}
.grupo-titulo{font-size:15px;letter-spacing:.14em;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--area,var(--negro))}
.tabla-actividades td{padding:10px 8px 10px 0}
.fila-actividad{cursor:pointer;transition:background var(--transicion)}
.fila-actividad:hover{background:var(--gris-claro)}
.fila-actividad:hover td:first-child{box-shadow:inset 3px 0 0 var(--area)}
.titulo-actividad{font-weight:600;text-transform:uppercase;font-size:14px}
.col-niveles{width:170px;white-space:nowrap}
.niveles{display:inline-flex;gap:2px}
.niveles i{font-style:normal;font-size:9px;font-weight:700;width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gris);color:var(--gris)}
.niveles i.on{background:var(--negro);border-color:var(--negro);color:var(--blanco)}
.col-mes{width:48px;text-align:center;font-size:10px;letter-spacing:.08em}
td.col-mes{background:color-mix(in srgb,var(--area,#fff) 7%,transparent)}
.dia{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 3px;margin:1px;font-size:12px;font-weight:600;border:1px solid var(--negro)}
.dia.estado-agotada{background:var(--negro);color:var(--blanco)}
.dia.estado-cancelada{text-decoration:line-through;border-color:var(--gris);color:var(--negro-50)}
.dia.estado-pendiente{border-style:dashed;color:var(--negro-50)}
.col-estado{text-align:right;white-space:nowrap;width:190px}
.col-estado .etiqueta{margin-left:4px}
.etiqueta-pendiente{border-color:var(--negro);color:var(--negro)}
.etiqueta-error{border-color:var(--error);color:var(--error)}
.leyenda{margin-top:8px}
.leyenda .dia{margin:0 2px 0 6px}

/* Ficha */
.avisos{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:4px}
.avisos li{padding:8px 14px;border-left:4px solid var(--amarillo);background:rgba(253,185,69,.12);font-size:14px}
.avisos li.bloquea{border-left-color:var(--error);background:rgba(214,40,57,.07)}
.ficha{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
.ficha-acciones{grid-column:1/-1;display:flex;gap:14px;align-items:center;padding-top:8px;border-top:1px solid var(--gris-borde)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tres{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:24px}
textarea{resize:vertical;line-height:1.5;border:1px solid var(--gris)!important;padding:10px!important;margin-top:8px!important}
fieldset{border:0;padding:0;margin:0 0 22px}
legend{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--negro-50);padding:0;margin-bottom:10px}
.niveles-form{display:flex;flex-wrap:wrap;gap:6px}
.niveles-form legend{width:100%}
.casilla-nivel{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:8px 10px;border:1px solid var(--gris);cursor:pointer;min-width:62px;text-transform:none;letter-spacing:0}
.casilla-nivel input{position:absolute;opacity:0;width:0;height:0}
.casilla-nivel span{font-weight:700;font-size:13px;color:var(--negro)}
.casilla-nivel small{font-size:10px;color:var(--negro-50);white-space:nowrap}
.casilla-nivel:has(input:checked){background:var(--amarillo);border-color:var(--amarillo)}
.casilla-nivel:has(input:checked) small{color:var(--negro-70)}
.foto-actual{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:10px}
.foto-vacia{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--gris-claro);border:1px solid var(--gris);color:var(--negro-50);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
input[type=file]{font-size:13px;margin:6px 0}
.tabla-sesiones td{padding:6px 8px 6px 0}
.tabla-sesiones input,.tabla-sesiones select{margin:0;padding:6px 0;font-size:14px}
.tabla-sesiones input[type=date]{width:150px}
.tabla-sesiones input[type=month]{width:130px}
.tabla-sesiones input[name=s_pases]{width:110px}
.tabla-sesiones select{width:auto;min-width:130px}
.tabla-sesiones input[name=s_nota]{width:150px}
.tabla-sesiones .acciones{white-space:nowrap}
.tabla-sesiones .acciones .btn{margin-left:4px}
.btn-agotar{border-color:var(--negro);background:var(--negro);color:var(--blanco)}
.btn-agotar:hover{background:var(--blanco);color:var(--negro)}
.oculto{display:none}
.ficha-pie{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.historial-corto{list-style:none;padding:0;margin:0;font-size:14px}
.historial-corto li{padding:8px 0;border-bottom:1px solid var(--gris-borde);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.estado-ficha{padding-top:10px}
@media (max-width:1000px){.ficha,.ficha-pie{grid-template-columns:1fr}.tres{grid-template-columns:1fr 1fr}.col-mes{display:none}.col-niveles{display:none}}

/* ---------- Fase 3: publicar ---------- */
.publicar{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start}
.h-lista{font-size:15px;letter-spacing:.12em;margin:22px 0 8px}
.lista-cambios{list-style:none;padding:0;margin:0 0 10px}
.lista-cambios li{padding:8px 0;border-bottom:1px solid var(--gris-borde);font-size:14px}
.caja-publicar{padding:24px;background:var(--negro);color:var(--blanco)}
.caja-publicar .antetitulo,.caja-publicar .muted{color:var(--blanco-50)}
.caja-publicar .destino{font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.caja-publicar .btn{width:100%}
.caja-publicar .btn-negro{border-color:var(--blanco);background:var(--blanco);color:var(--negro)}
.caja-publicar .btn-negro:hover{box-shadow:0 4px 20px rgba(253,185,69,.5)}
.caja-publicar a{color:var(--amarillo)}
.caja-publicar.produccion{background:var(--error)}
.caja-publicar.produccion .antetitulo,.caja-publicar.produccion .muted{color:rgba(255,255,255,.75)}
.pasos{list-style:none;padding:0;margin:0 0 24px;display:flex;gap:28px;flex-wrap:wrap}
.pasos li{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--negro-50)}
.pasos .punto{width:14px;height:14px;border:2px solid var(--gris);display:inline-block}
.pasos .paso-ok{color:var(--negro)}
.pasos .paso-ok .punto{background:var(--negro);border-color:var(--negro)}
.pasos .paso-en_curso{color:var(--negro)}
.pasos .paso-en_curso .punto{border-color:var(--amarillo);background:var(--amarillo);animation:latido 1s infinite alternate}
.pasos .paso-error{color:var(--error)}
.pasos .paso-error .punto{border-color:var(--error);background:var(--error)}
@keyframes latido{from{opacity:.4}to{opacity:1}}
.registro{background:var(--gris-claro);border:1px solid var(--gris-borde);padding:16px;font:12px/1.6 Consolas,monospace;white-space:pre-wrap;max-height:420px;overflow:auto;margin:0 0 24px}
.ajustes{max-width:720px}
.ajustes .casilla{display:flex;margin-bottom:8px}
.barra-pendientes a{color:var(--amarillo);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
@media (max-width:900px){.publicar{grid-template-columns:1fr}}
.globo{display:inline-block;min-width:18px;padding:2px 5px;margin-left:4px;background:var(--amarillo);color:var(--negro);font-size:10px;text-align:center;letter-spacing:0}

/* ---------- Fase 4: importar ---------- */
.cambio{padding:10px 0 14px;border-bottom:1px solid var(--gris-borde)}
.tabla-diff{margin-top:6px;font-size:13px}
.tabla-diff th{width:110px;padding:4px 10px 4px 0;border:0;font-weight:500;letter-spacing:.08em;font-size:11px}
.tabla-diff td{padding:4px 10px 4px 0;border:0;vertical-align:top}
.tabla-diff .antes{color:var(--negro-50);text-decoration:line-through;text-decoration-color:rgba(34,34,34,.3)}
.tabla-diff .flecha{color:var(--amarillo);font-weight:700;width:20px}
.vista-previa .casilla{display:flex}

/* ---------- Fase 5: acabado ---------- */
.ayuda{max-width:760px;display:grid;gap:26px}
.ayuda p{line-height:1.55;margin:0 0 10px;font-size:15px}
.ayuda .h-lista{margin:0 0 8px}
:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
.oscuro :focus-visible{outline-color:var(--blanco)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Tablet y móvil: la cabecera se parte, las tablas se desplazan de lado */
@media (max-width:900px){
  .cabecera{flex-wrap:wrap;gap:12px 20px;padding:12px var(--gutter)}
  .cabecera-nav{margin-left:0;width:100%;order:3;gap:16px;overflow-x:auto;white-space:nowrap;padding-bottom:2px}
  .cabecera-usuario{margin-left:auto}
  .cabecera-logo span{display:none}
  .contenido{padding:24px var(--gutter) 40px}
  .tabla{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabla thead,.tabla tbody,.tabla tr{display:table;width:100%;table-layout:auto}
  .tabla-actividades .col-estado{width:auto}
  .cabecera-pagina .btn{width:100%;text-align:center}
  .pasos{gap:14px}
}
@media (max-width:600px){
  h1{font-size:24px}
  .tabla td,.tabla th{padding-right:8px}
  .tabla-sesiones input[type=date]{width:130px}
  .ficha-acciones{flex-wrap:wrap}
  .ficha-acciones .btn{width:100%;text-align:center}
}

/* Las columnas de la ficha y de publicar no pueden ensancharse por una tabla: la tabla se desplaza dentro */
.ficha-col,.publicar>*,.ficha-pie>*{min-width:0}