/*
Theme Name: DIGEF
Theme URI: https://www.mineduc.gob.gt/digef
Author: ITECEL SYSTEMS, S.A.
Author URI: https://www.itecel.com
Description: Tema institucional para la Dirección General de Educación Física -DIGEF- del Ministerio de Educación de Guatemala. Desarrollado bajo el contrato NOG 31807259.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: digef
*/

/* ------------------------------------------------------------------
   COLORES INSTITUCIONALES
   Provisionales. Sustituir por los del Manual de Identidad del
   Ministerio de Educación en cuanto DIGEF lo envíe. Todo el tema
   toma los colores de estas variables, así que el cambio es aquí.
   ------------------------------------------------------------------ */
:root {
  /* Guía de estilos visuales "PÁG WEB DIGEF" (Canva) */
  --cian:          #1eb4eb;   /* color principal                 */
  --cian-osc:      #00a3e0;   /* cian del logotipo               */
  --azul:          #04265b;   /* azul marino (secciones, pie)    */
  --azul-osc:      #04265b;
  --azul-logo:     #192854;
  --azul-medio:    #4995ce;
  --celeste:       #b1e1f3;   /* celeste claro                   */
  --celeste-claro: #e6f5fc;
  --degradado:     linear-gradient(90deg, #b1e1f3 0%, #1eb4eb 100%);
  --amarillo:      #f2b705;   /* solo para el anillo de foco     */
  --texto:         #1f2933;
  --texto-suave:   #52606d;
  --linea:         #d9e2ec;
  --fondo:         #ffffff;
  --fondo-alt:     #f4f9fd;
  --ancho:         1360px;
  --radio:         16px;
  --radio-pastilla: 999px;
  --sombra:        0 8px 24px rgba(4, 38, 91, .10);
  --fuente:        "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulos: "Montserrat", "Figtree", system-ui, Arial, sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--fuente); font-size: 17px; line-height: 1.6;
  color: var(--texto); background: var(--fondo);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover, a:focus { color: var(--cian); text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; color: var(--azul-osc); font-weight: 800; font-family: var(--fuente-titulos); }
h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }
.contenedor { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* ---------- barra superior de gobierno ---------- */
.barra-gob {
  background: var(--azul-osc); color: #fff; font-size: .85rem;
}
.barra-gob .contenedor { display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 1rem; flex-wrap: wrap; }
.barra-gob a { color: #fff; opacity: .9; }
.barra-gob a:hover { opacity: 1; color: #fff; }
.barra-gob .redes { display: flex; gap: .8rem; }
.barra-gob .redes svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- cabecera ---------- */
.cabecera { background: var(--fondo); box-shadow: 0 2px 14px rgba(4, 38, 91, .08); position: sticky; top: 0; z-index: 50; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 96px; }
.marca { display: flex; align-items: center; gap: 1rem; color: var(--azul-osc); }
.marca:hover { text-decoration: none; }
.marca img { height: 56px; width: auto; }
.marca .marca-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca .marca-txt strong { font-size: 1.05rem; letter-spacing: .02em; }
.marca .marca-txt span { font-size: .8rem; color: var(--texto-suave); }
.marca .logo-txt {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px;
  background: var(--cian); color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: .05em;
}
/* bloque institucional: escudo · Ministerio de Educación · marca DIGEF (como el membrete oficial) */
.marca .escudo { height: 50px; width: auto; }
.marca .digef  { height: 54px; width: auto; border-radius: 8px; margin-left: .35rem; }
.marca .marca-txt strong { color: var(--azul-osc); }
/* logotipo oficial vigente (una sola imagen horizontal) */
.marca .logo-oficial { height: 66px; width: auto; max-width: 100%; border-radius: 0; }
.pie .logos { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.pie .logos img { height: 72px; width: auto; max-width: 100%; filter: none; opacity: 1; background: transparent; border-radius: 0; padding: 0; }
.pie .logos .wordmark { color: #fff; line-height: 1.1; font-size: .9rem; padding: 0 .4rem; border-left: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35); }
.pie .logos .wordmark strong { font-size: 1.05rem; }

.menu-principal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; flex-wrap: wrap; }
.menu-principal li { position: relative; }
.menu-principal a {
  display: block; padding: .6rem .75rem; font-weight: 600; font-size: 1rem; color: var(--azul-osc);
  border-radius: var(--radio-pastilla);
}
.menu-principal .menu-item-has-children > a::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .35em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.2em) rotate(45deg); }
.menu-principal a:hover, .menu-principal .current-menu-item > a, .menu-principal .current-menu-ancestor > a {
  background: var(--celeste-claro); color: var(--cian-osc); text-decoration: none;
}
.menu-principal .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff;
  box-shadow: var(--sombra); border-radius: var(--radio); padding: .4rem; flex-direction: column; gap: 0;
}
.menu-principal li:hover > .sub-menu, .menu-principal li:focus-within > .sub-menu { display: flex; }
.menu-principal .sub-menu a { font-weight: 500; border-radius: 10px; }
.menu-principal .sub-menu a::before { content: "\203A"; margin-right: .4em; color: var(--cian); }

.btn-menu {
  display: none; background: var(--azul-osc); color: #fff; border: 0; border-radius: var(--radio-pastilla);
  padding: .6rem 1rem; font-weight: 700; cursor: pointer; font-size: .95rem; font-family: var(--fuente);
}

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: calc(.8rem + 2px) calc(1.6rem + 2px); border-radius: var(--radio-pastilla); font-weight: 700;
  font-family: var(--fuente); background: var(--degradado); color: var(--azul-osc); border: 0;
  /* Sin borde transparente: con degradado y pantalla a 125 %/150 %, Chrome y Edge pintaban el redondeo izquierdo de otro color. El relleno compensa los 2 px. */
  box-shadow: 0 6px 16px rgba(30, 180, 235, .25); transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(30, 180, 235, .35); color: var(--azul-osc); text-decoration: none; }
.btn svg { width: 18px; height: 18px; fill: none; } /* los iconos del tema son de trazo; rellenarlos los convertía en manchas recortadas */
.btn.azul { background: var(--azul-osc); color: #fff; box-shadow: 0 6px 16px rgba(4, 38, 91, .25); }
.btn.azul:hover { background: var(--azul-logo); color: #fff; }
.btn.claro { background: rgba(255,255,255,.85); color: var(--azul-osc); border: 2px solid var(--cian); padding: .8rem 1.6rem; box-shadow: none; }
.btn.claro:hover { background: #fff; color: var(--cian-osc); }
.btn.blanco { background: #fff; color: var(--azul-osc); box-shadow: none; }
.btn.blanco:hover { background: var(--celeste-claro); }

/* ---------- portada: héroe ---------- */
.heroe {
  background: linear-gradient(120deg, var(--azul-osc) 0%, var(--azul) 55%, var(--cian) 100%);
  color: #fff; padding: clamp(2.5rem, 6vw, 5rem) 0;
  position: relative; overflow: hidden;
}
.heroe::after {
  content: ""; position: absolute; right: -8%; top: -30%; width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 60%);
}
.heroe .contenedor { position: relative; display: grid; gap: 1.2rem; max-width: 760px; margin-left: max(1.25rem, (100% - var(--ancho)) / 2); }
.heroe h1 { color: #fff; margin: 0; }
.heroe p { font-size: 1.15rem; opacity: .95; margin: 0; }
.heroe .acciones { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; }
.heroe .etiqueta { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; font-weight: 600; }

/* ---------- secciones ---------- */
.seccion { padding: clamp(2rem, 5vw, 3.8rem) 0; }
.seccion.alt { background: var(--fondo-alt); }
.seccion-cab { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.seccion-cab h2 { margin: 0; }
.seccion-cab h2::after { content: ""; display: block; width: 56px; height: 4px; background: var(--degradado); border-radius: 2px; margin-top: .5rem; }
.seccion-cab .ver-todo { font-weight: 700; white-space: nowrap; }

.rejilla { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ---------- tarjetas ---------- */
.tarjeta {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.tarjeta .miniatura { aspect-ratio: 16 / 10; background: var(--fondo-alt); overflow: hidden; }
.tarjeta .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta .miniatura.vacia { display: grid; place-items: center; color: var(--celeste); background: linear-gradient(135deg, var(--fondo-alt), #e3ecf7); }
.tarjeta .miniatura.vacia svg { width: 48px; height: 48px; fill: currentColor; opacity: .7; }
.tarjeta .cuerpo { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.tarjeta .meta { font-size: .82rem; color: var(--texto-suave); display: flex; gap: .6rem; flex-wrap: wrap; }
.tarjeta .meta .tipo { color: var(--cian); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.tarjeta h3 { margin: 0; font-size: 1.08rem; }
.tarjeta h3 a { color: var(--azul-osc); }
.tarjeta p { margin: 0; font-size: .95rem; color: var(--texto-suave); }
.tarjeta .pie { margin-top: auto; padding-top: .5rem; font-weight: 700; font-size: .92rem; }

/* eventos: fecha destacada */
.evento-fecha {
  display: inline-grid; place-items: center; min-width: 64px; padding: .4rem .5rem; border-radius: 8px;
  background: var(--azul); color: #fff; line-height: 1; text-align: center;
}
.evento-fecha b { font-size: 1.5rem; }
.evento-fecha small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.tarjeta.evento .cuerpo { flex-direction: row; gap: 1rem; align-items: start; }
.tarjeta.evento .cuerpo > div { display: flex; flex-direction: column; gap: .35rem; }

/* ---------- galería y videos ---------- */
.galeria-rejilla { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.galeria-rejilla a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--fondo-alt); }
.galeria-rejilla img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galeria-rejilla a:hover img { transform: scale(1.05); }
.wp-block-gallery { gap: .6rem; }
.video-rejilla { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.video-marco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #000; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-item h3 { margin-top: .7rem; font-size: 1.05rem; }

/* lightbox */
.caja-luz { position: fixed; inset: 0; background: rgba(10, 18, 35, .92); display: none; place-items: center; z-index: 200; padding: 2rem; }
.caja-luz.abierta { display: grid; }
.caja-luz img { max-width: 92vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.caja-luz button { position: absolute; top: 1rem; right: 1rem; background: #fff; border: 0; border-radius: 50%; width: 42px; height: 42px; font-size: 1.4rem; cursor: pointer; }
.caja-luz .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.9); border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 1.5rem; cursor: pointer; }
.caja-luz .nav.prev { left: 1rem; } .caja-luz .nav.next { right: 1rem; }
.caja-luz figcaption { color: #fff; text-align: center; margin-top: .8rem; font-size: .95rem; }

/* ---------- páginas interiores ---------- */
.cabecera-pagina { background: var(--fondo-alt); border-bottom: 1px solid var(--linea); padding: 2rem 0 1.6rem; }
.cabecera-pagina h1 { margin: 0; }
.migas { font-size: .85rem; color: var(--texto-suave); margin-bottom: .5rem; }
.migas a { color: var(--texto-suave); }
.contenido { padding: 2.5rem 0 3.5rem; }
.contenido.con-lateral { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) 320px; }
.entrada { max-width: 800px; }
.entrada .destacada { border-radius: var(--radio); margin-bottom: 1.5rem; overflow: hidden; }
.entrada .meta { color: var(--texto-suave); font-size: .9rem; margin-bottom: 1.2rem; }
.entrada .texto { font-size: 1.05rem; }
.entrada .texto h2, .entrada .texto h3 { margin-top: 1.6em; }
.entrada .texto img { border-radius: 8px; }
.entrada .texto blockquote { border-left: 4px solid var(--cian); margin: 1.5em 0; padding: .5em 1.2em; background: var(--fondo-alt); border-radius: 0 8px 8px 0; }
.entrada .texto table { border-collapse: collapse; width: 100%; }
.entrada .texto th, .entrada .texto td { border: 1px solid var(--linea); padding: .5rem .7rem; }
.entrada .texto th { background: var(--fondo-alt); }
.compartir { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.compartir a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border: 1px solid var(--linea); border-radius: 6px; }
.compartir svg { width: 16px; height: 16px; fill: currentColor; }

/* lateral */
.lateral .bloque { background: var(--fondo-alt); border-radius: var(--radio); padding: 1.2rem 1.3rem; margin-bottom: 1.4rem; }
.lateral .bloque h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cian); margin-bottom: .8rem; }
.lateral ul { list-style: none; margin: 0; padding: 0; }
.lateral li { padding: .45rem 0; border-bottom: 1px solid var(--linea); font-size: .95rem; }
.lateral li:last-child { border-bottom: 0; }
.lateral .wp-block-search__button { background: var(--cian); color: #fff; border: 0; }

/* documentos */
.doc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.doc-lista li { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--linea); border-radius: 8px; }
.doc-lista .ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; display: grid; place-items: center; background: #fdeceb; color: #b3261e; font-weight: 800; font-size: .7rem; }
.doc-lista .info { flex: 1; min-width: 0; }
.doc-lista .info strong { display: block; }
.doc-lista .info small { color: var(--texto-suave); }
.doc-lista .btn { padding: .45rem .9rem; font-size: .9rem; }

/* contacto */
.contacto-rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.contacto-datos li { display: flex; gap: .8rem; align-items: start; margin-bottom: .9rem; list-style: none; }
.contacto-datos ul { padding: 0; margin: 0; }
.contacto-datos svg { width: 22px; height: 22px; flex: 0 0 22px; fill: var(--cian); margin-top: .15rem; }
.mapa { aspect-ratio: 4 / 3; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); }
.mapa iframe { width: 100%; height: 100%; border: 0; }

/* paginación */
.paginacion { display: flex; gap: .4rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.paginacion .page-numbers { padding: .5rem .9rem; border: 1px solid var(--linea); border-radius: 6px; font-weight: 600; }
.paginacion .page-numbers.current { background: var(--azul); color: #fff; border-color: var(--azul); }

/* aviso vacío */
.vacio { padding: 2rem; text-align: center; color: var(--texto-suave); background: var(--fondo-alt); border-radius: var(--radio); }

/* ---------- pie ---------- */
.pie { background: var(--azul-osc); color: #dbe4f0; margin-top: 3rem; }
.pie a { color: #fff; }
.pie .columnas { display: grid; gap: 2rem 2.5rem; grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr)) minmax(140px, .9fr); padding: 3rem 0 2rem; align-items: start; }
.pie h3 { color: #fff; font-size: 1rem; font-family: var(--fuente-titulos); font-weight: 800; letter-spacing: .01em; margin-bottom: .9rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .5rem; font-size: .92rem; }
.pie li a:hover { color: var(--celeste); }
.pie .pie-marca p { font-size: .92rem; }
.pie .pie-contacto li { display: flex; gap: .55rem; align-items: flex-start; }
.pie .pie-contacto svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: .25rem; fill: var(--celeste); }
.pie .sigueme .redes { margin-top: .2rem; }
@media (max-width: 1000px) { .pie .columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pie .columnas { grid-template-columns: 1fr; } }
.pie .logos { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.pie .logos img { height: 72px; width: auto; filter: none; opacity: 1; }
.pie .logos .logo-txt { background: #fff; color: var(--azul-osc); }
.pie .redes { display: flex; gap: .7rem; margin-top: .8rem; }
.pie .redes a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.10); }
.pie .redes a:hover { background: var(--cian); }
.pie .redes svg { width: 18px; height: 18px; fill: #fff; }
.pie .legal { border-top: 1px solid rgba(255,255,255,.15); padding: 1.1rem 0; font-size: .82rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .contenido.con-lateral { grid-template-columns: 1fr; }
  .btn-menu { display: inline-block; }
  .menu-principal { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: var(--sombra); padding: .6rem; border-top: 1px solid var(--linea); }
  .menu-principal.abierto { display: block; }
  .menu-principal ul { flex-direction: column; gap: 0; }
  .menu-principal a { padding: .8rem 1rem; }
  .menu-principal .sub-menu { display: none; position: static; box-shadow: none; padding-left: 1rem; }
  .menu-principal li.abierto > .sub-menu { display: flex; }
  .marca .marca-txt strong { font-size: .95rem; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .marca img { height: 44px; }
  .marca .logo-oficial { height: 46px; }
  .marca .marca-txt span { display: none; }
  .heroe p { font-size: 1.02rem; }
  .tarjeta.evento .cuerpo { flex-direction: column; }
}
@media print {
  .barra-gob, .cabecera, .pie, .compartir, .btn-menu { display: none; }
  body { font-size: 12pt; }
}

/* ---------- observaciones de DIGEF (octubre 2026) ---------- */
/* Las fotos se recortan desde el tercio superior para no cortar los rostros. */
.tarjeta .miniatura img, .noticia-principal .img img, .noticia-mini img, .galeria-rejilla img { object-position: center 25%; }
/* Barra superior de gobierno: enlace de quejas, consultas o denuncias. */
.barra-gob .contenedor { min-height: 36px; }
.barra-gob .denuncias {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; opacity: 1; color: #fff;
  background: rgba(255, 255, 255, .12); padding: .22rem .85rem; border-radius: var(--radio-pastilla); white-space: nowrap;
}
.barra-gob .denuncias:hover { background: var(--cian); text-decoration: none; }
.barra-gob .denuncias svg { width: 16px; height: 16px; }
/* Listas tipo columna: títulos en negrita. */
.lateral li a { font-weight: 700; }
/* El aviso del mapa vacío no debe heredar la proporción fija del mapa (se cortaba en celular). */
.mapa.mapa-vacio { aspect-ratio: auto; min-height: 280px; }
/* Videos verticales (Shorts, Reels, TikTok). */
.video-marco.vertical { aspect-ratio: 9 / 16; max-width: 400px; margin-inline: auto; }