/* ============================================================
   CEIP Plurilíngüe de Belesar · Compoñentes base para a web de xestión
   Require tokens.css cargado antes.
   Fontes: https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--bl-fonte-texto);font-size:var(--bl-txt-base);line-height:var(--bl-lh-base);color:var(--bl-tinta);background:var(--bl-fondo);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--bl-fonte-titulo);font-weight:var(--bl-peso-semi);color:var(--bl-bosque);margin:0}
h1{font-size:var(--bl-txt-3xl);line-height:var(--bl-lh-3xl);letter-spacing:var(--bl-tracking-titular)}
h2{font-size:var(--bl-txt-2xl);line-height:var(--bl-lh-2xl)}
h3{font-size:var(--bl-txt-xl);line-height:var(--bl-lh-xl)}
h4{font-size:var(--bl-txt-lg);line-height:var(--bl-lh-lg)}
p{margin:0 0 var(--bl-e3);text-wrap:pretty}
a{color:var(--bl-foco);text-decoration:none;font-weight:var(--bl-peso-semi)}
a:hover{color:var(--bl-bosque);text-decoration:underline}
:focus-visible{outline:2px solid var(--bl-foco);outline-offset:2px;border-radius:var(--bl-r-sm)}

/* ---------- Etiqueta de seccion ---------- */
.bl-etiqueta{font-family:var(--bl-fonte-titulo);font-weight:var(--bl-peso-semi);font-size:var(--bl-txt-xs);letter-spacing:var(--bl-tracking-etiqueta);text-transform:uppercase;color:var(--bl-terracota)}

/* ---------- Botons ---------- */
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--bl-e2);min-height:var(--bl-tap-min);padding:0 var(--bl-e5);border:1px solid transparent;border-radius:var(--bl-r-md);font-family:var(--bl-fonte-titulo);font-size:var(--bl-txt-sm);font-weight:var(--bl-peso-semi);cursor:pointer;transition:background var(--bl-dur-rapida) var(--bl-easing),border-color var(--bl-dur-rapida) var(--bl-easing)}
.bl-btn--primario{background:var(--bl-bosque);color:var(--bl-crema)}
.bl-btn--primario:hover{background:#12503d}
.bl-btn--secundario{background:var(--bl-papel);color:var(--bl-bosque);border-color:var(--bl-borde)}
.bl-btn--secundario:hover{background:var(--bl-crema)}
.bl-btn--fantasma{background:transparent;color:var(--bl-bosque)}
.bl-btn--fantasma:hover{background:rgba(79,174,126,.12)}
.bl-btn--perigo{background:var(--bl-erro);color:#fff}
.bl-btn:disabled{opacity:.45;cursor:not-allowed}
.bl-btn--sm{min-height:34px;padding:0 var(--bl-e3);font-size:var(--bl-txt-xs)}

/* ---------- Campos de formulario ---------- */
.bl-campo{display:flex;flex-direction:column;gap:var(--bl-e1)}
.bl-campo>label{font-size:var(--bl-txt-sm);font-weight:var(--bl-peso-semi);color:var(--bl-bosque)}
.bl-campo>.axuda{font-size:var(--bl-txt-xs);color:var(--bl-texto-suave)}
.bl-input,.bl-select,.bl-textarea{width:100%;min-height:var(--bl-tap-min);padding:var(--bl-e2) var(--bl-e3);font-family:var(--bl-fonte-texto);font-size:var(--bl-txt-base);color:var(--bl-tinta);background:#fff;border:1px solid var(--bl-borde);border-radius:var(--bl-r-sm)}
.bl-textarea{min-height:96px;padding:var(--bl-e3);resize:vertical}
.bl-input::placeholder{color:var(--bl-texto-tenue)}
.bl-input:focus,.bl-select:focus,.bl-textarea:focus{outline:none;border-color:var(--bl-folla);box-shadow:var(--bl-anel-foco)}
.bl-input[aria-invalid="true"]{border-color:var(--bl-erro)}
.bl-erro-campo{font-size:var(--bl-txt-xs);color:var(--bl-erro);font-weight:var(--bl-peso-semi)}

/* ---------- Tarxeta / panel ---------- */
.bl-tarxeta{background:var(--bl-superficie);border:1px solid var(--bl-borde);border-radius:var(--bl-r-lg);padding:var(--bl-e6);box-shadow:var(--bl-sombra-sm)}
.bl-tarxeta__cab{display:flex;align-items:center;justify-content:space-between;gap:var(--bl-e4);margin-bottom:var(--bl-e4)}

/* ---------- Taboa de datos ---------- */
.bl-taboa{width:100%;border-collapse:collapse;background:var(--bl-superficie);font-size:var(--bl-txt-sm)}
.bl-taboa thead th{text-align:left;font-family:var(--bl-fonte-titulo);font-size:var(--bl-txt-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--bl-texto-suave);background:var(--bl-crema);padding:var(--bl-e3) var(--bl-e4);border-bottom:1px solid var(--bl-borde);white-space:nowrap}
.bl-taboa tbody td{padding:var(--bl-e3) var(--bl-e4);border-bottom:1px solid var(--bl-borde)}
.bl-taboa tbody tr:hover{background:#FDF9F0}
.bl-taboa .num{font-variant-numeric:tabular-nums;text-align:right}

/* ---------- Insignias de estado ---------- */
.bl-insignia{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--bl-r-full);font-family:var(--bl-fonte-titulo);font-size:var(--bl-txt-xs);font-weight:var(--bl-peso-semi)}
.bl-insignia--exito{background:rgba(47,143,98,.14);color:#1F6B47}
.bl-insignia--aviso{background:rgba(226,169,78,.20);color:#8A5F12}
.bl-insignia--erro{background:rgba(192,86,62,.14);color:#8E3826}
.bl-insignia--info{background:rgba(62,124,140,.14);color:#2C5B67}
.bl-insignia--neutra{background:var(--bl-crema);color:var(--bl-texto-suave)}

/* ---------- Avisos ---------- */
.bl-aviso{display:flex;gap:var(--bl-e3);padding:var(--bl-e4);border-radius:var(--bl-r-md);border:1px solid var(--bl-borde);background:var(--bl-superficie-alt);font-size:var(--bl-txt-sm)}
.bl-aviso--exito{border-color:rgba(47,143,98,.4);background:rgba(47,143,98,.08)}
.bl-aviso--aviso{border-color:rgba(226,169,78,.5);background:rgba(226,169,78,.12)}
.bl-aviso--erro{border-color:rgba(192,86,62,.4);background:rgba(192,86,62,.08)}

/* ---------- Navegacion lateral ---------- */
.bl-lateral{width:var(--bl-lateral);background:var(--bl-bosque);color:var(--bl-crema);padding:var(--bl-e5) var(--bl-e3);display:flex;flex-direction:column;gap:var(--bl-e1)}
.bl-nav-item{display:flex;align-items:center;gap:var(--bl-e3);min-height:var(--bl-tap-min);padding:0 var(--bl-e3);border-radius:var(--bl-r-md);font-family:var(--bl-fonte-titulo);font-size:var(--bl-txt-sm);font-weight:var(--bl-peso-medio);color:#CFE0D3;text-decoration:none}
.bl-nav-item:hover{background:rgba(250,241,222,.10);color:var(--bl-crema);text-decoration:none}
.bl-nav-item[aria-current="page"]{background:var(--bl-crema);color:var(--bl-bosque);font-weight:var(--bl-peso-semi)}
.bl-nav-grupo{font-size:var(--bl-txt-xs);letter-spacing:var(--bl-tracking-etiqueta);text-transform:uppercase;color:var(--bl-dourado);font-family:var(--bl-fonte-titulo);padding:var(--bl-e4) var(--bl-e3) var(--bl-e1)}

/* ---------- Cabeceira ---------- */
.bl-cabeceira{height:var(--bl-cabeceira);display:flex;align-items:center;justify-content:space-between;gap:var(--bl-e4);padding:0 var(--bl-e6);background:var(--bl-papel);border-bottom:1px solid var(--bl-borde)}

/* ---------- Migas e lapelas ---------- */
.bl-migas{display:flex;gap:var(--bl-e2);font-size:var(--bl-txt-xs);color:var(--bl-texto-suave)}
.bl-lapelas{display:flex;gap:var(--bl-e1);border-bottom:1px solid var(--bl-borde)}
.bl-lapela{min-height:40px;padding:0 var(--bl-e4);display:inline-flex;align-items:center;font-family:var(--bl-fonte-titulo);font-size:var(--bl-txt-sm);font-weight:var(--bl-peso-medio);color:var(--bl-texto-suave);border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.bl-lapela[aria-selected="true"]{color:var(--bl-bosque);border-bottom-color:var(--bl-folla);font-weight:var(--bl-peso-semi)}

/* ---------- Baleiro ---------- */
.bl-baleiro{text-align:center;padding:var(--bl-e12) var(--bl-e6);color:var(--bl-texto-suave)}
.bl-baleiro h4{margin-bottom:var(--bl-e2)}

/* ---------- Grella de aplicacion ---------- */
.bl-app{display:grid;grid-template-columns:var(--bl-lateral) 1fr;min-height:100vh}
.bl-contido{padding:var(--bl-e8);max-width:var(--bl-contido-max)}
@media (max-width:900px){
  .bl-app{grid-template-columns:1fr}
  .bl-lateral{display:none}
  .bl-contido{padding:var(--bl-e4)}
}