/* ==========================================================================
   SEDECYT · Consulta de reportes por área 2026
   Hoja unica para index / area / detalle.

   Misma familia visual que la aplicacion de captura (reporte_mensual_2026):
   tema oscuro, vidrio y acento glaciar. El logo institucional es blanco y la
   foto de fondo es fria; una version clara pediria otro diseno, no invertir
   los colores.

   Sustituye a Bootstrap + bootstrap-icons + main.css + AOS (unos 400 KB de
   CSS y JS que se descargaban en cada pagina para usar una rejilla y unas
   tarjetas).
   ========================================================================== */

:root{
  /* ---- color ---- */
  --abismo:#0B1118;
  --pizarra:#16202B;
  --niebla:#8FA3B5;
  --albura:#EAF1F7;
  --glaciar:#6FD9E6;
  --glaciar-hondo:#2E9DAD;

  --exito:#6EE7A8;
  --alerta:#F2C14E;
  --violeta:#A99CE8;

  /* ---- materiales ---- */
  --vidrio:rgba(22,32,43,.55);
  --vidrio-denso:rgba(13,20,28,.82);
  --vidrio-alto:rgba(38,52,68,.55);
  --borde:rgba(255,255,255,.13);
  --borde-luz:rgba(255,255,255,.28);
  --sombra:0 18px 50px -12px rgba(0,0,0,.62);

  --r-sm:10px; --r-md:16px; --r-lg:22px;

  /* ---- movimiento ---- */
  --suave:cubic-bezier(.32,.72,0,1);
  --rebote:cubic-bezier(.34,1.32,.64,1);

  --paso:clamp(16px,3vw,44px);
  --ancho:1560px;

  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Sora",var(--sans);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--albura);
  background:var(--abismo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* red de seguridad: nada debe desbordar a lo ancho */
  display:flex;
  flex-direction:column;
}

/* ---------- fondo fijo ---------- */
body::before,
body::after{content:""; position:fixed; inset:0; pointer-events:none}
body::before{
  z-index:-3;
  background-image:url('assets/img/fondo-montanas.jpg');
  background-image:image-set(url('assets/img/fondo-montanas.avif') type('image/avif'),
                             url('assets/img/fondo-montanas.jpg')  type('image/jpeg'));
  background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:saturate(.75) contrast(1.05);
}
body::after{
  z-index:-2;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(11,17,24,.32), rgba(11,17,24,.86) 62%, var(--abismo) 100%),
    linear-gradient(180deg, rgba(11,17,24,.30), rgba(11,17,24,.78));
}

/* ---------- techo ---------- */
.techo{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.7rem var(--paso);
  background:var(--vidrio-denso);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--borde);
}
.marca{display:flex; align-items:center; gap:.85rem; text-decoration:none; color:inherit; flex:none}
.marca img{display:block; height:34px; width:auto}
.marca-txt{
  font-family:var(--disp); font-size:.92rem; letter-spacing:.01em; color:var(--niebla);
  padding-left:.85rem; border-left:1px solid var(--borde);
}
.marca-txt b{color:var(--albura); font-weight:600}

.menu-btn{
  margin-left:auto; display:none;
  background:transparent; border:1px solid var(--borde); border-radius:var(--r-sm);
  color:var(--albura); width:42px; height:42px; cursor:pointer;
  align-items:center; justify-content:center;
}
.menu-btn svg{width:22px; height:22px}

.menu{margin-left:auto; display:flex; align-items:center; gap:.2rem; flex-wrap:wrap}
.menu-liga{
  display:flex; align-items:center; gap:.35rem;
  padding:.5rem .8rem; border-radius:var(--r-sm);
  color:var(--niebla); text-decoration:none; font-size:.92rem; font-weight:500;
  cursor:pointer; list-style:none; white-space:nowrap;
  transition:background .18s var(--suave), color .18s var(--suave);
}
.menu-liga::-webkit-details-marker{display:none}
.menu-liga:hover{background:rgba(255,255,255,.07); color:var(--albura)}
.menu-liga.viva{color:var(--glaciar); background:rgba(111,217,230,.1)}
.menu-liga svg{width:15px; height:15px; opacity:.7; transition:transform .22s var(--suave)}
.grupo[open] > .menu-liga svg{transform:rotate(180deg)}

.grupo{position:relative}
.submenu{
  position:absolute; top:calc(100% + .45rem); left:0; z-index:60;
  min-width:230px; display:flex; flex-direction:column; padding:.4rem;
  background:var(--vidrio-denso); backdrop-filter:blur(18px);
  border:1px solid var(--borde); border-radius:var(--r-md); box-shadow:var(--sombra);
  animation:sube .2s var(--suave);
}
.submenu a{
  padding:.5rem .7rem; border-radius:var(--r-sm);
  color:var(--niebla); text-decoration:none; font-size:.9rem;
  transition:background .16s var(--suave), color .16s var(--suave);
}
.submenu a:hover{background:rgba(255,255,255,.08); color:var(--albura)}
.submenu a.viva{color:var(--glaciar)}

/* ---------- lienzo ---------- */
.lienzo{flex:1; width:100%; max-width:var(--ancho); margin:0 auto; padding:var(--paso)}

/* entrada escalonada: cada bloque declara --i */
@keyframes sube{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.sube{animation:sube .5s var(--suave) both; animation-delay:calc(var(--i,0) * 60ms)}

h1{font-family:var(--disp); font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.2; margin:0 0 .3rem}
h2{font-family:var(--disp); font-size:clamp(1.1rem,2.2vw,1.4rem); margin:0 0 .8rem}
.tenue{color:var(--niebla)}
.micro{font-size:.8rem; color:var(--niebla)}

/* ---------- portada del area ---------- */
.rotulo{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem;
  flex-wrap:wrap; margin-bottom:1.6rem;
}
.rotulo .grupo-txt{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--glaciar); margin-bottom:.35rem;
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.55rem 1.1rem;
  border:1px solid var(--borde); border-radius:var(--r-sm);
  background:rgba(38,52,68,.45); color:var(--albura);
  font:inherit; font-size:.92rem; font-weight:500; text-decoration:none; cursor:pointer;
  transition:background .2s var(--suave), border-color .2s var(--suave),
             transform .12s var(--rebote), box-shadow .2s var(--suave);
}
.btn:hover{background:rgba(58,78,98,.6); border-color:var(--borde-luz); box-shadow:0 10px 26px -10px rgba(0,0,0,.6)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--glaciar); outline-offset:3px}
.btn svg{width:18px; height:18px; flex:none}
.btn-p{background:linear-gradient(160deg,var(--glaciar),var(--glaciar-hondo)); color:#04161A; border-color:transparent; font-weight:600}
.btn-p:hover{background:linear-gradient(160deg,#8CE6F1,#37B3C4); box-shadow:0 12px 32px -8px rgba(111,217,230,.5)}
.btn-f{background:transparent; border-color:transparent; color:var(--niebla)}
.btn-f:hover{background:rgba(255,255,255,.07); color:var(--albura)}
.btn-sm{min-height:36px; padding:.35rem .85rem; font-size:.83rem}

/* ---------- filtros ---------- */
.filtros{
  display:flex; gap:.9rem; align-items:flex-end; flex-wrap:wrap;
  padding:1.1rem; margin-bottom:1.8rem;
  background:var(--vidrio); backdrop-filter:blur(14px);
  border:1px solid var(--borde); border-radius:var(--r-md);
}
.campo{display:flex; flex-direction:column; gap:.35rem; min-width:190px; flex:1 1 190px}
.campo label{font-size:.82rem; color:var(--niebla); font-weight:500}
select,input[type=search]{
  width:100%; min-height:44px; padding:.5rem .75rem;
  background:rgba(11,17,24,.55); color:var(--albura);
  border:1px solid var(--borde); border-radius:var(--r-sm);
  font:inherit; font-size:.92rem;
  transition:border-color .18s var(--suave), box-shadow .18s var(--suave);
}
select:focus,input[type=search]:focus{
  outline:none; border-color:var(--glaciar); box-shadow:0 0 0 3px rgba(111,217,230,.16);
}
select option{background:var(--pizarra); color:var(--albura)}

/* la busqueda ocupa mas: es el filtro que mas se usa */
.campo-busca{flex:2 1 280px}
.con-lupa{position:relative; display:flex; align-items:center}
.con-lupa svg{
  position:absolute; left:.7rem; width:17px; height:17px;
  color:var(--niebla); pointer-events:none;
}
.con-lupa input{padding-left:2.3rem}
input[type=search]::-webkit-search-cancel-button{filter:invert(.6)}

/* ---------- paginacion ---------- */
.paginas{
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  flex-wrap:wrap; margin-top:2.2rem;
}
.paginas .num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 .55rem; border-radius:var(--r-sm);
  color:var(--niebla); text-decoration:none; font-size:.9rem; font-weight:500;
  border:1px solid transparent;
  transition:background .18s var(--suave), color .18s var(--suave), border-color .18s var(--suave);
}
.paginas .num:hover{background:rgba(255,255,255,.07); color:var(--albura)}
.paginas .num.viva{
  background:rgba(111,217,230,.14); color:var(--glaciar);
  border-color:rgba(111,217,230,.35); font-weight:600;
}
.paginas .puntos{color:var(--niebla); padding:0 .2rem}
.paginas .apagado{opacity:.35; pointer-events:none}

/* ---------- rejilla de tarjetas ---------- */
.rejilla{
  display:grid; gap:1.3rem;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.ficha{
  display:flex; flex-direction:column;
  background:var(--vidrio); backdrop-filter:blur(14px);
  border:1px solid var(--borde); border-radius:var(--r-lg);
  overflow:hidden; position:relative;
  transition:transform .28s var(--suave), border-color .28s var(--suave), box-shadow .28s var(--suave);
}
.ficha:hover{transform:translateY(-5px); border-color:var(--borde-luz); box-shadow:var(--sombra)}
.ficha:focus-within{border-color:var(--glaciar)}

.ficha-img{
  aspect-ratio:16/10; background:rgba(11,17,24,.6);
  overflow:hidden; position:relative;
}
.ficha-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--suave);
}
.ficha:hover .ficha-img img{transform:scale(1.05)}
.ficha-img .vacia{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--niebla); font-size:.82rem; gap:.4rem;
}
.ficha-img .vacia svg{width:30px; height:30px; opacity:.5}

.ficha-cuerpo{padding:1.1rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.ficha-meta{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--niebla);
}
.marbete{
  display:inline-block; padding:.15rem .55rem; border-radius:99px;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  background:rgba(111,217,230,.14); color:var(--glaciar);
  border:1px solid rgba(111,217,230,.28);
}
.ficha h3{
  font-family:var(--disp); font-size:1.02rem; line-height:1.35; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ficha p{
  margin:0; font-size:.88rem; color:var(--niebla);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ficha .abre{
  margin-top:auto; padding-top:.6rem;
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--glaciar); font-size:.88rem; font-weight:600; text-decoration:none;
}
.ficha .abre::after{content:""; position:absolute; inset:0}   /* toda la tarjeta es la liga */
.ficha .abre svg{width:16px; height:16px; transition:transform .22s var(--suave)}
.ficha:hover .abre svg{transform:translateX(3px)}

/* ---------- vacio ---------- */
.vacio{
  text-align:center; padding:4rem 1rem; color:var(--niebla);
  background:var(--vidrio); border:1px dashed var(--borde); border-radius:var(--r-lg);
}
.vacio svg{width:44px; height:44px; opacity:.45; margin-bottom:.8rem}

/* ---------- detalle ---------- */
.detalle{
  display:grid; gap:2rem;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){ .detalle{grid-template-columns:1fr} }

.hoja{
  padding:clamp(1.2rem,2.6vw,2rem);
  background:var(--vidrio); backdrop-filter:blur(14px);
  border:1px solid var(--borde); border-radius:var(--r-lg);
}
.hoja .dato{padding:.85rem 0; border-bottom:1px solid var(--borde)}
.hoja .dato:last-child{border-bottom:none}
.hoja .dato .et{font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--niebla)}
.hoja .dato .vl{font-size:1rem; margin-top:.2rem; white-space:pre-line}

.galeria{display:flex; flex-direction:column; gap:.9rem}
.galeria img{
  width:100%; border-radius:var(--r-md); border:1px solid var(--borde);
  display:block; cursor:zoom-in;
  transition:transform .3s var(--suave), border-color .3s var(--suave);
}
.galeria img:hover{transform:scale(1.015); border-color:var(--borde-luz)}

.recientes{display:flex; flex-direction:column; gap:.6rem; margin-top:.8rem}
.recientes a{
  display:flex; gap:.75rem; align-items:center; padding:.5rem;
  border-radius:var(--r-sm); text-decoration:none; color:inherit;
  transition:background .18s var(--suave);
}
.recientes a:hover{background:rgba(255,255,255,.06)}
.recientes img{width:62px; height:46px; object-fit:cover; border-radius:8px; flex:none}
.recientes .t{font-size:.86rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.recientes .f{font-size:.74rem; color:var(--niebla)}

/* ---------- visor de foto ---------- */
#visor{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(6,10,14,.9); backdrop-filter:blur(8px);
  place-items:center; padding:var(--paso); cursor:zoom-out;
}
#visor.viva{display:grid; animation:aparece .3s var(--suave)}
@keyframes aparece{from{opacity:0} to{opacity:1}}
#visor img{
  max-width:100%; max-height:92vh; border-radius:var(--r-md);
  box-shadow:var(--sombra); animation:crece .42s var(--suave);
}
@keyframes crece{from{opacity:0; transform:scale(.93); filter:blur(6px)} to{opacity:1; transform:none; filter:none}}

/* ---------- panel del reporte mensual (junto a las areas sueltas) ---------- */
/* Las areas sueltas a la izquierda (hoy son dos: Oficina Secretario y Gestion
   Empresarial) y el panel llenando lo que sobra. Flexible a proposito: si
   manana hay una o tres, el renglon se reacomoda solo. */
.fila-inicio{
  display:flex; gap:1.1rem; align-items:stretch; flex-wrap:wrap;
}
.fila-inicio > .mosaico{
  /* En flujo por columna las losetas se acomodan una junto a otra. Con
     auto-fit se quedaban en una sola columna: sin un ancho definido, la
     rejilla no puede contar cuantas caben. */
  flex:0 1 auto;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(200px,238px);
}
.fila-inicio > .panel-mensual{flex:1 1 420px}

.panel-mensual{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.6rem; flex-wrap:wrap;
  padding:1.4rem 1.6rem;
  background:linear-gradient(135deg, rgba(46,157,173,.18), var(--vidrio) 55%);
  backdrop-filter:blur(14px);
  border:1px solid rgba(111,217,230,.28); border-radius:var(--r-lg);
}
.panel-mensual .pm-txt{flex:1 1 300px; min-width:0}
.panel-mensual .pm-eti{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--glaciar); margin-bottom:.3rem;
}
.panel-mensual h2{margin:0 0 .3rem; font-size:clamp(1.2rem,2.4vw,1.6rem)}
.panel-mensual p{margin:0; font-size:.86rem; max-width:52ch}

.panel-mensual .pm-acciones{
  display:flex; align-items:flex-end; gap:.8rem; flex-wrap:wrap; flex:0 1 auto;
}
.pm-campo{display:flex; flex-direction:column; gap:.35rem; min-width:170px}
.pm-campo span{font-size:.78rem; color:var(--niebla); font-weight:500}

.btn-grande{
  min-height:56px; padding:.8rem 1.5rem; font-size:1rem;
  box-shadow:0 12px 30px -12px rgba(111,217,230,.5);
}
.btn-grande svg{width:21px; height:21px}

@media (max-width:900px){
  .fila-inicio{flex-direction:column}
  .fila-inicio > .mosaico{grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr}
  .panel-mensual{flex-direction:column; align-items:stretch}
  .panel-mensual .pm-acciones{flex-direction:column; align-items:stretch}
  .btn-grande{width:100%}
}

/* ---------- inicio: mosaico de areas ---------- */
.portada{margin-bottom:2.4rem}
.portada p{max-width:62ch; margin:.4rem 0 0}
.portada b{color:var(--albura); font-weight:600}

.titulo-grupo{
  display:flex; align-items:center; gap:1rem;
  margin:2.6rem 0 1.1rem; font-size:1.05rem;
}
.titulo-grupo i{flex:1; height:1px; background:var(--borde)}
.titulo-grupo .micro{font-weight:400; white-space:nowrap}

.mosaico{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
}

.loseta{
  position:relative; display:block; overflow:hidden;
  text-decoration:none; color:inherit;
  border:1px solid var(--borde); border-radius:var(--r-lg);
  background:var(--vidrio); backdrop-filter:blur(14px);
  transition:transform .3s var(--suave), border-color .3s var(--suave), box-shadow .3s var(--suave);
}
.loseta:hover{transform:translateY(-5px); border-color:var(--glaciar); box-shadow:var(--sombra)}
.loseta:focus-visible{outline:2px solid var(--glaciar); outline-offset:3px}

.loseta-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--pizarra)}
.loseta-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* Encuadre sesgado hacia arriba: en un marco apaisado un retrato vertical
     se recorta por el centro y la cabeza queda cortada. */
  object-position:center 30%;
  filter:saturate(.9) brightness(.78);
  transition:transform .55s var(--suave), filter .35s var(--suave);
}
.loseta:hover .loseta-img img{transform:scale(1.07); filter:saturate(1) brightness(.92)}

/* velo para que el texto se lea sobre cualquier foto */
.loseta-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,17,24,.05) 0%, rgba(11,17,24,.72) 72%, rgba(11,17,24,.92) 100%);
}

/* areas sin foto: inicial grande en vez de un hueco vacio */
.loseta.sin-foto .loseta-img{
  background:linear-gradient(150deg, rgba(46,157,173,.35), rgba(22,32,43,.9));
  display:grid; place-items:center;
}
.loseta .inicial{
  font-family:var(--disp); font-size:3.4rem; color:rgba(234,241,247,.22);
  line-height:1; user-select:none;
}

.loseta-txt{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:.12rem;
  padding:.9rem 1rem 1rem;
}
.loseta-txt .n{font-family:var(--disp); font-size:1.02rem; line-height:1.25}
.loseta-txt .c{
  font-size:.78rem; color:var(--niebla);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.loseta-txt .pie{display:flex; align-items:baseline; gap:.5rem; margin-top:.45rem}
.loseta-txt .cuenta{
  font-family:var(--disp); font-size:1.15rem; color:var(--glaciar); line-height:1;
}
.loseta-txt .cuando{font-size:.72rem; color:var(--niebla)}

.loseta .flecha{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:50%; background:rgba(11,17,24,.55); border:1px solid var(--borde);
  color:var(--albura); opacity:0; transform:translateX(-6px);
  transition:opacity .25s var(--suave), transform .25s var(--suave);
}
.loseta:hover .flecha{opacity:1; transform:none}
.loseta .flecha svg{width:16px; height:16px}

/* ---------- piso ---------- */
.piso{
  padding:1.6rem var(--paso); margin-top:2rem;
  border-top:1px solid var(--borde); background:var(--vidrio-denso);
  color:var(--niebla); font-size:.82rem; text-align:center;
}

.arriba{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:70;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--vidrio-denso); border:1px solid var(--borde); border-radius:50%;
  color:var(--albura); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--suave), transform .3s var(--rebote), border-color .2s var(--suave);
  transform:translateY(10px);
}
.arriba.viva{opacity:1; pointer-events:auto; transform:none}
.arriba:hover{border-color:var(--glaciar)}
.arriba svg{width:20px; height:20px}

/* ---------- movil ---------- */
@media (max-width:900px){
  .menu-btn{display:flex}
  .menu{
    display:none; order:3; width:100%; flex-direction:column; align-items:stretch;
    gap:.15rem; padding-top:.6rem; margin-left:0;
  }
  .menu.viva{display:flex}
  .grupo{position:static}
  .submenu{position:static; box-shadow:none; background:rgba(11,17,24,.5); margin:.2rem 0 .4rem}
  .marca-txt{display:none}

  /* Los filtros, uno por renglon: apretados a lo ancho no se pueden usar. */
  .filtros{flex-direction:column; align-items:stretch}
  .filtros .btn{width:100%}
  .rotulo{align-items:flex-start}
}

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

/* ---------- impresion ---------- */
@media print{
  .techo,.piso,.arriba,.filtros,#visor{display:none !important}
  body::before,body::after{display:none}
  body{background:#fff; color:#000}
  .hoja,.ficha{border:1px solid #ccc; background:#fff}
}