/* =========================================================================
   base.css — reset, utilidades y piezas compartidas por las dos marcas.
   Lo único que hermana visualmente a colegio y jardín es IBM Plex Mono
   en los rótulos utilitarios: fechas, cotas, metadatos y accesos internos.
   ========================================================================= */

:root {
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tinta-admin: #101820;
  --gris-admin: #7E8B96;
  --envoltura: 1240px;
  --aire: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; }

:focus-visible { outline: 3px solid #D5312A; outline-offset: 3px; }
.tema-jardin :focus-visible { outline-color: #2A44C4; }

.salto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #101820; color: #fff; padding: 12px 18px;
  font-family: var(--mono); font-size: 13px;
}
.salto:focus { left: 8px; top: 8px; }

.envoltura { max-width: var(--envoltura); margin: 0 auto; }

/* --- Placeholders de fotografía ----------------------------------------
   Rayado diagonal + nombre de archivo visible: el hueco dice qué va ahí. */
.ph { background-repeat: repeat; }
.ph--gris   { background-image: repeating-linear-gradient(135deg, #DDE4E9 0 8px, #EAEFF2 8px 16px); border: 1px solid #B9C4CC; }
.ph--azul   { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 7px, rgba(255,255,255,.04) 7px 14px); border: 1px solid rgba(255,255,255,.28); }
.ph--papel  { background-image: repeating-linear-gradient(135deg, #EFE7D6 0 8px, #F8F2E5 8px 16px); box-shadow: 0 6px 0 rgba(35,32,43,.15); }
.ph--verde  { background-image: repeating-linear-gradient(135deg, #E3EAD9 0 8px, #F0F4EA 8px 16px); box-shadow: 0 6px 0 rgba(35,32,43,.15); }
.ph--celeste{ background-image: repeating-linear-gradient(135deg, #DCE7F3 0 8px, #EEF4FA 8px 16px); box-shadow: 0 6px 0 rgba(35,32,43,.15); }
.ph--blanco { background-image: repeating-linear-gradient(135deg, rgba(255,251,242,.55) 0 8px, rgba(255,251,242,.9) 8px 16px); box-shadow: 0 6px 0 rgba(35,32,43,.18); }
.ph--foto-realizado { background-image: repeating-linear-gradient(135deg, #DDE4E9 0 8px, #EAEFF2 8px 16px); border: 1px solid #C7D0D7; }
.ph--foto-proximo   { background-image: repeating-linear-gradient(135deg, #F1F4F6 0 8px, #F7F9FA 8px 16px); border: 1px solid #C7D0D7; }
.tema-jardin .ph--foto-realizado { background-image: repeating-linear-gradient(135deg, #EFE7D6 0 8px, #F8F2E5 8px 16px); border: 2px solid #23202B; }
.tema-jardin .ph--foto-proximo   { background-image: repeating-linear-gradient(135deg, #F6F2E9 0 8px, #FCF9F2 8px 16px); border: 2px solid #23202B; }
.ph--16x9  { aspect-ratio: 16/9; }
.ph--16x10 { aspect-ratio: 16/10; }
.ph--4x3   { aspect-ratio: 4/3; }
.ph--1x1   { aspect-ratio: 1/1; }

/* Foto real ya subida: mismo hueco, la imagen reemplaza el rayado. */
.ph--real { width: 100%; object-fit: cover; }
.tema-colegio .ph--real { background: #fff; padding: 10px; border: 1px solid #E4E7EA; box-shadow: 0 6px 18px rgba(16,24,32,.12); }
.tema-jardin .ph--real { background: #fff; padding: 10px; border: 1px solid #E4E7EA; box-shadow: 0 6px 18px rgba(16,24,32,.12); }
figcaption { margin-top: 7px; font-family: var(--mono); font-size: 10.5px; color: #5A6470; }

.gira-izq { transform: rotate(-1.1deg); }
.gira-der { transform: rotate(1.4deg); }

/* --- Filtros de eventos ------------------------------------------------- */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro {
  cursor: pointer; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px;
}
.filtro--c { border: 1px solid #0B4F8A; background: #fff; color: #0B4F8A; }
.filtro--c.es-activo { background: #0B4F8A; color: #fff; }
.filtro--j { border: 3px solid #23202B; background: #FFFBF2; color: #23202B; padding: 11px 17px; }
.filtro--j.es-activo { background: #23202B; color: #FFFBF2; }

.estado {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  padding: 4px 9px; white-space: nowrap;
}
.estado--proximo   { background: #D9EEF9; color: #0B4F8A; border: 1px solid #1E9CD7; }
.estado--realizado { background: #EDF1F4; color: #5A6470; border: 1px solid #C7D0D7; }
.tema-jardin .estado--proximo   { background: #2A44C4; color: #FFFBF2; border: 0; }
.tema-jardin .estado--realizado { background: #EFEAE0; color: #6E6A78; border: 0; }

/* --- Botón de menú móvil ------------------------------------------------ */
.menu-btn {
  display: none; cursor: pointer; font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; padding: 10px 14px;
  background: transparent; border: 2px solid currentColor; color: inherit;
}
.sin-js .menu-btn { display: none !important; }

/* --- Barra y pie administrativos ---------------------------------------- */
.barra-admin {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 24px; flex-wrap: wrap; padding: 10px var(--aire);
  background: var(--tinta-admin); color: #C8D2DA;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
}
.barra-admin__enlaces { display: flex; gap: 18px; }
.barra-admin__item { display: inline-flex; align-items: center; gap: 6px; }
.barra-admin__icono { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pie { padding: 36px var(--aire) 26px; background: var(--tinta-admin); color: #B7C2CB; }
.pie--jardin { background: #23202B; color: #C6C2CE; }
.pie--minimo {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
  justify-content: space-between; padding: 18px var(--aire);
  color: var(--gris-admin); font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
}
.pie__grid {
  max-width: var(--envoltura); margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; align-items: start;
}
.pie__nombre { font-weight: 700; color: #fff; font-size: 16px; margin-bottom: 8px; }
.pie--jardin .pie__nombre { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; color: #FFFBF2; }
.pie__datos { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: #8B98A3; }
.pie__dato { display: inline-flex; align-items: center; gap: 6px; }
.pie__icono { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pie__rotulo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: #5F6B75; margin-bottom: 8px; }
.pie__hermana { font-weight: 700; color: #fff; }
.pie__col-interna { justify-self: end; text-align: right; }
/* Acceso interno: utilitario, gris, sin peso. No compite con nada público. */
.pie__interno { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-family: var(--mono); font-size: 12px; }
.pie--minimo .pie__interno { flex-direction: row; gap: 18px; }
.pie__interno a { color: var(--gris-admin); }
.pie__copyright {
  max-width: var(--envoltura); margin: 24px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: #5F6B75;
}

/* --- Botones flotantes de redes (solo colegio.php y jardin.php) --------- */
.redes-flotantes {
  position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px);
  z-index: 60; display: flex; flex-direction: column; gap: 12px;
}
.redes-flotantes__btn {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  box-shadow: 0 4px 14px rgba(16,24,32,.3);
  transition: transform .15s ease;
}
.redes-flotantes__btn:hover { transform: scale(1.08); text-decoration: none; }
.redes-flotantes__btn svg { width: 26px; height: 26px; fill: #fff; }
.redes-flotantes__btn--whatsapp { background: #25D366; }
.redes-flotantes__btn--facebook { background: #1877F2; }
@media (max-width: 560px) {
  .redes-flotantes__btn { width: 46px; height: 46px; }
  .redes-flotantes__btn svg { width: 22px; height: 22px; }
}

/* --- Página de acceso administrativo ------------------------------------ */
.acceso {
  min-height: 100vh; display: grid; place-items: center; padding: 56px var(--aire);
  background-color: #F3F6F8;
  background-image: linear-gradient(#E4EAEF 1px, transparent 1px), linear-gradient(90deg, #E4EAEF 1px, transparent 1px);
  background-size: 32px 32px;
  font-family: Archivo, system-ui, sans-serif; color: #101820;
}
.acceso__caja { width: min(460px, 100%); background: #fff; border: 1px solid #C7D0D7; padding: 32px 30px 28px; }
.acceso__titulo { font-size: 30px; font-weight: 800; letter-spacing: -.025em; margin: 8px 0 12px; }
.acceso__texto { font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; line-height: 1.55; color: #3B4650; }
.acceso__texto a { color: #0B4F8A; text-decoration: underline; }
.acceso__error {
  margin-top: 18px; padding: 10px 14px; background: #FBE7E6; border: 1px solid #E4A6A1;
  color: #A3231C; font-size: 14px;
}
.acceso__form { margin-top: 24px; display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: #5A6470; }
.campo input, .campo select, .campo textarea {
  font: 400 16px/1.45 Archivo, system-ui, sans-serif;
  padding: 11px 12px; border: 1px solid #8E9AA4; background: #fff; color: #101820; width: 100%;
}
.campo textarea { resize: vertical; }
.tema-jardin .campo label { color: #6E6A78; }
.tema-jardin .campo input, .tema-jardin .campo select, .tema-jardin .campo textarea {
  font-family: Karla, system-ui, sans-serif; border: 2px solid #23202B; color: #23202B;
}

/* Categoría de la fecha: qué parte del programa es. */
.categoria { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: #5A6470; }

/* --- Acuse del formulario de informes ----------------------------------- */
.acuse { min-height: 60vh; display: grid; place-items: center; padding: 64px var(--aire); }
.acuse__caja { width: min(560px, 100%); }
.acuse__rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; margin-bottom: 10px; }
.acuse__titulo { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.acuse__texto { font-size: 18px; line-height: 1.55; }
.acuse__errores { margin: 8px 0 0; display: grid; gap: 6px; font-size: 17px; line-height: 1.5; }
.acuse__errores li::before { content: '· '; }
.acuse__volver { margin-top: 24px; font-family: var(--mono); font-size: 12px; }
.acuse__volver a { text-decoration: underline; }
.tema-colegio .acuse { background-color: #F3F6F8; background-image: linear-gradient(#E4EAEF 1px, transparent 1px), linear-gradient(90deg, #E4EAEF 1px, transparent 1px); background-size: 32px 32px; }
.tema-colegio .acuse__rotulo { color: #D5312A; }
.tema-colegio .acuse__texto { font-family: 'Source Serif 4', Georgia, serif; }
.tema-jardin .acuse__titulo { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
.tema-jardin .acuse__rotulo { color: #6E6A78; }
.acceso__btn {
  cursor: pointer; padding: 14px 22px; background: #0B4F8A; color: #fff;
  font-weight: 700; font-size: 16px; border: 0; border-bottom: 3px solid #D5312A;
}
.acceso__pie { margin-top: 20px; font-family: var(--mono); font-size: 12px; color: #5A6470; }

@media (max-width: 760px) {
  .menu-btn { display: inline-block; }
  .pie__col-interna { justify-self: start; text-align: left; }
  .pie__interno { align-items: flex-start; }

  /* Colapso del menú a hamburguesa. Vive aquí (no en colegio.css/jardin.css)
     porque colegio.php solo carga colegio.css: si esta regla estuviera en
     jardin.css, el botón de menú del colegio quedaría sin efecto.
     El selector va prefijado con .tema-* a propósito: base.css carga ANTES
     que colegio.css/jardin.css, y esos archivos definen ".c-cab__nav / .j-cab__nav
     { display: flex }" sin media query. Con la misma especificidad (una
     clase), gana la regla que carga después — así que sin este refuerzo el
     menú nunca se ocultaría en pantallas chicas. */
  .tema-colegio .c-cab__nav, .tema-jardin .j-cab__nav {
    display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 14px; padding: 14px 0 6px;
  }
  .tema-colegio .c-cab__nav.esta-abierto, .tema-jardin .j-cab__nav.esta-abierto { display: flex; }
  .sin-js .c-cab__nav, .sin-js .j-cab__nav { display: flex; }
}

@media (max-width: 420px) {
  /* Igual que arriba: .c-evento aparece en colegio.php, que no carga jardin.css,
     y el prefijo .tema-colegio evita el mismo empate de especificidad. */
  .tema-colegio .c-evento { grid-template-columns: 1fr; }
  .tema-colegio .c-evento__fecha { flex-direction: row; gap: 10px; align-items: baseline; justify-content: flex-start; padding: 12px 16px; }
  .tema-colegio .c-evento__dia { font-size: 24px; }
}

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