/* Directorio de escuelas (/escuelas/…). Se carga después de estilos.css y paginas.css,
   así que usa los mismos colores y sirve igual en tema claro y oscuro. */

/* lo que lleva el atributo hidden no se ve, aunque más abajo tenga display:grid o flex */
.pg-main [hidden]{display:none !important}

/* buscador y filtros */
.esc-filtros{margin:1.2rem 0 .4rem; display:grid; gap:.6rem}
.esc-filtros input, .esc-buscador input, .esc-form input:not([type=checkbox]), .esc-form textarea{
  width:100%; padding:.72rem .9rem; border-radius:11px; border:1px solid var(--linea);
  background:var(--sup); color:var(--txt); font:inherit; box-shadow:var(--s1);
  transition:border-color .15s, box-shadow .15s;
}
.esc-filtros input:focus, .esc-buscador input:focus, .esc-form input:not([type=checkbox]):focus, .esc-form textarea:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent);
}
.esc-fs{display:flex; flex-wrap:wrap; gap:.4rem}
.esc-f{
  font:inherit; font-size:.86rem; font-weight:600; padding:.42rem .8rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--linea); background:var(--sup); color:var(--txt2);
}
.esc-f:hover{border-color:var(--acc); color:var(--acc)}
.esc-f.activo{background:var(--acc); border-color:var(--acc); color:#fff}
.esc-cuenta{margin:0; color:var(--txt2); font-size:.86rem; min-height:1.2em}

.esc-buscador{margin:1.2rem 0 .4rem}
.esc-buscador input{font-size:1.02rem; padding:.85rem 1rem}
.esc-resultados{margin-top:.7rem}
.esc-resultados:empty{display:none}

/* saltos a cada comuna */
.esc-comunas{display:flex; flex-wrap:wrap; gap:.35rem; margin:1rem 0 .4rem}
.esc-comunas a{
  font-size:.84rem; padding:.3rem .65rem; border-radius:999px; text-decoration:none;
  border:1px solid var(--linea); background:var(--sup); color:var(--txt);
}
.esc-comunas a:hover{border-color:var(--acc); color:var(--acc)}
.esc-comunas small{color:var(--txt3); font-weight:600; margin-left:.15rem}

/* mapa de la región (Leaflet, se carga al tocar «Ver mapa») */
.esc-mapa-caja{margin:1rem 0 .4rem}
.esc-mapa{height:400px; margin-top:.7rem; border:1px solid var(--linea); border-radius:var(--r2); overflow:hidden;
  position:relative; z-index:0}   /* contiene los z-index de Leaflet: el mapa no tapa el encabezado fijo */
.esc-mapa-caja .esc-nota{margin-top:.45rem}
.esc-pin{display:block; width:14px; height:14px; border-radius:50%; background:var(--acc); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.45)}
.esc-mapa .leaflet-popup-content{font:inherit; font-size:.86rem; line-height:1.4; margin:.7rem .85rem}
.esc-mapa .leaflet-popup-content a{color:var(--acc); font-weight:600}

/* comunas y escuelas */
.esc-comuna{margin-top:1.8rem; scroll-margin-top:5rem}
.esc-comuna h2{margin:0 0 .7rem}
.esc-comuna h2 small{color:var(--txt3); font-size:.8rem; font-weight:600; margin-left:.35rem}
.esc-lista{display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
article.esc{padding:1rem 1.05rem; display:flex; flex-direction:column; gap:.45rem; scroll-margin-top:5rem}
article.esc:target{border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent), var(--s2)}
article.esc h3{margin:0; font-size:1.02rem; line-height:1.3; letter-spacing:-.01em}
.esc-dir{margin:0; color:var(--txt2); font-size:.9rem}
.esc-datos{list-style:none; margin:0; padding:0; display:grid; gap:.2rem; font-size:.86rem; color:var(--txt2)}
.esc-datos b{color:var(--txt); font-weight:650; margin-right:.2rem}
.esc-acc{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.25rem}
.esc-acc .btn{padding:.5rem .8rem; font-size:.86rem; border-radius:10px}
.esc-acc .esc-wa{background:#128c4a; box-shadow:0 1px 2px rgba(18,140,74,.3)}
.esc-acc .esc-wa:hover{background:#0e7a40; box-shadow:0 6px 16px -6px rgba(18,140,74,.6)}
.esc-nota{margin:0; font-size:.8rem; color:var(--txt3)}
.esc-ok{margin:0; font-size:.8rem; font-weight:600; color:color-mix(in srgb,var(--ok) 70%,var(--txt))}
.esc-corr{margin-top:auto; padding-top:.25rem; font-size:.8rem; color:var(--txt3); text-decoration:underline; text-underline-offset:2px}
.esc-corr:hover{color:var(--acc)}
.esc-vacio{margin:1.5rem 0; padding:1rem; border:1px dashed var(--linea2); border-radius:var(--r2); color:var(--txt2); text-align:center}
.esc-fuente{margin-top:2rem}

/* «antes de inscribirte» */
.esc-guia{margin-top:2rem}
.esc-guia ul{padding-left:1.2rem; line-height:1.6}

/* formulario de corrección */
.esc-form{padding:1.2rem; display:grid; gap:.8rem; margin-top:1rem}
.esc-form label{display:grid; gap:.3rem; font-size:.86rem; font-weight:650; color:var(--txt2)}
.esc-form textarea{resize:vertical; min-height:4.5rem}
.esc-2{display:grid; gap:.8rem; grid-template-columns:1fr 1fr}
.esc-form fieldset{border:1px solid var(--linea); border-radius:var(--r2); padding:.8rem .9rem .9rem; margin:0}
.esc-form legend{font-size:.86rem; font-weight:700; color:var(--txt); padding:0 .3rem}
.esc-form label.esc-check{display:flex; align-items:flex-start; gap:.5rem; font-weight:500; color:var(--txt)}
.esc-check input{margin-top:.2rem; width:1.05rem; height:1.05rem; accent-color:var(--acc); flex:none}
.esc-cual{margin:0; font-weight:700; color:var(--txt)}
.esc-error{margin:0; padding:.6rem .8rem; border-radius:10px; background:var(--mal-sup); color:var(--mal); font-size:.9rem}
.esc-trampa{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}
.esc-form .btn{justify-self:start}
.esc-gracias{padding:1.2rem; display:grid; gap:.5rem; margin-top:1rem}
.esc-gracias span{color:var(--txt2)}
.esc-gracias .btn{justify-self:start; margin-top:.4rem}

@media (max-width:560px){
  .esc-mapa{height:320px}
  .esc-2{grid-template-columns:1fr}
  .esc-acc .btn{flex:1 1 auto}
}
@media (max-width:460px){
  .esc-comuna, article.esc{scroll-margin-top:6.5rem}   /* el encabezado tiene dos filas */
}
@media print{
  .esc-filtros, .esc-comunas, .esc-acc, .esc-corr, .pg-cta, .esc-mapa-caja{display:none}
}