/* ==========================================================
   TABLERO DE ADMISIÓN · UNIVERSIDAD DE ANTIOQUIA
   ========================================================== */

:root{
  color-scheme:light;

  --udea:#35944B;
  --udea-d:#256b36;
  --lima:#8DC63F;
  --ink:#1a1a1a;
  --mute:#5c5c5c;
  --line:#d9ded9;
  --bg:#f4f6f4;
  --card:#fff;
  --soft:#eef3ee;
  --warn:#fff4cf;
  --warnk:#6b4e00;

  /* Mayor aprovechamiento del ancho */
  --maxw:110rem;

  --gap:clamp(.8rem,1vw,1.5rem);
  --pad:clamp(1rem,1.5vw,2rem);
  --r:.85rem;
}

*,*::before,*::after{
  box-sizing:border-box;
}

/* ==========================================================
   CONFIGURACIÓN GENERAL
   ========================================================== */

html{
  font-size:clamp(16px,.95vw,44px);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:env(safe-area-inset-top,0px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:1rem/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  padding:
    0
    env(safe-area-inset-right,0px)
    env(safe-area-inset-bottom,0px)
    env(safe-area-inset-left,0px);

  overflow-x:hidden;
}

img,svg,canvas{
  max-width:100%;
}

/* ==========================================================
   ENCABEZADO
   ========================================================== */

.top{
  background:var(--udea);
  color:#fff;

  padding:
    max(1rem,env(safe-area-inset-top,0px))
    var(--pad)
    1rem;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem 1.5rem;
  flex-wrap:wrap;

  border-bottom:.25rem solid #1a1a1a;
}

.brand{
  display:flex;
  align-items:center;
  gap:clamp(.8rem,1.2vw,1.5rem);

  min-width:0;
  flex:1 1 20rem;
}

.logo{
  display:block;
  height:clamp(3.5rem,5vw,6.5rem);
  width:auto;
  max-width:35%;
  object-fit:contain;
  flex:none;

  padding-right:clamp(.8rem,1.2vw,1.5rem);
  border-right:1px solid #ffffff59;
}

.logo[hidden]{
  display:none;
}

.brand>div{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  min-width:0;
}

.top small{
  opacity:.95;
  font-size:.9rem;
  letter-spacing:.02em;
  display:block;
}

.top h1{
  margin:0;

  font-size:clamp(1.5rem,1.5vw + .8rem,2.5rem);
  line-height:1.15;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.top .proto{
  font-size:.85rem;
  opacity:.95;

  background:#ffffff1f;
  border:1px solid #ffffff40;
  border-radius:999px;

  padding:.4rem .9rem;
  text-align:right;
}

@media(max-width:720px){

  .top .proto{
    white-space:normal;
    text-align:left;
    border-radius:.6rem;
  }

  .logo{
    max-width:30%;
  }
}

/* ==========================================================
   ESTADOS Y AVISOS
   ========================================================== */

.demo{
  background:var(--warn);
  color:var(--warnk);
  padding:.6rem var(--pad);
  font-size:.95rem;
}

.loading{
  position:fixed;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--bg);
  z-index:2000;

  font-size:1.2rem;
}

.err{
  padding:2rem var(--pad);
  text-align:center;
}

.err b{
  display:block;
  margin-bottom:.4rem;
}

.warnbox{
  background:var(--warn);
  color:var(--warnk);
  padding:.8rem 1rem;
  border-radius:.6rem;
  font-size:.95rem;
}

/* ==========================================================
   BLOQUE SUPERIOR: CONSULTA | MAPA | RADAR
   ========================================================== */

.hero{
  background:var(--soft);
  padding:var(--pad);
  border-bottom:1px solid var(--line);
}

.hg{
  max-width:var(--maxw);
  margin:0 auto;

  display:grid;
  gap:var(--gap);

  /* Paneles laterales más amplios */
  grid-template-columns:
    minmax(18rem,22rem)
    minmax(0,1fr)
    minmax(21rem,27rem);

  align-items:stretch;
}

/* Laptop y tablet horizontal */
@media(max-width:1180px){

  .hg{
    grid-template-columns:
      minmax(17rem,21rem)
      minmax(0,1fr);
  }

  .rad{
    grid-column:1/-1;
  }
}

/* Tablet vertical y celular */
@media(max-width:800px){

  .hg{
    grid-template-columns:minmax(0,1fr);
  }

  .mapw{
    order:-1;
  }
}

/* ==========================================================
   PANELES LATERALES
   ========================================================== */

.gl2{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);

  padding:1.2rem;

  min-width:0;
}

.gl2 h2{
  margin:0 0 .35rem;
  font-size:1.2rem;
}

.gl2 .sub{
  font-size:.95rem;
  color:var(--mute);
  margin:0 0 .8rem;
}

/* ==========================================================
   FILTROS
   ========================================================== */

.hero label{
  display:flex;
  flex-direction:column;

  font-size:.95rem;
  color:var(--mute);

  gap:.3rem;
  margin-bottom:.75rem;

  font-weight:600;
}

select{
  font:inherit;
  font-size:1rem;

  padding:.65rem .75rem;

  border-radius:.55rem;
  border:1px solid #b9c2b9;

  background:#fff;
  color:var(--ink);

  width:100%;
  min-height:2.7rem;
}

select:disabled{
  background:#eceeec;
  color:#8a8a8a;
}

button{
  font:inherit;
  font-size:1rem;

  padding:.65rem .9rem;

  border-radius:.55rem;
  border:1px solid var(--udea);

  background:#fff;
  color:var(--udea-d);

  cursor:pointer;
  font-weight:600;
  min-height:2.7rem;
}

button:hover{
  background:var(--soft);
}

button:focus-visible,
select:focus-visible{
  outline:.15rem solid var(--ink);
  outline-offset:.15rem;
}

/* ==========================================================
   INDICADORES DEL PANEL DE CONSULTA
   ========================================================== */

.st{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
  margin-top:.5rem;
}

.st div{
  background:var(--soft);
  border-radius:.75rem;
  padding:.75rem .85rem;
}

.st span{
  font-size:.9rem;
  color:var(--mute);
}

.st b{
  display:block;

  font-size:clamp(1.5rem,1.2vw + .8rem,2.2rem);
  line-height:1.2;

  color:var(--udea-d);
}

#pq{
  margin-bottom:1rem;
}

#pq h4{
  margin:.9rem 0 .25rem;
  font-size:.95rem;
  color:var(--mute);
  font-weight:700;
}

#pq h4:first-child{
  margin-top:.3rem;
}

.flt{
  border-top:1px solid var(--line);
  padding-top:1rem;
}

/* ==========================================================
   MAPA
   ========================================================== */

.mapw{
  position:relative;

  border-radius:var(--r);
  border:1px solid var(--line);

  overflow:hidden;
  background:#070b14;

  min-height:clamp(27rem,68vh,70rem);
  min-height:clamp(27rem,68dvh,70rem);
}

#map{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  z-index:0;
  touch-action:pan-x pan-y pinch-zoom;
}

/* Controles de zoom */

.mzoom{
  position:absolute;
  left:.85rem;
  top:.85rem;

  z-index:500;

  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.mzoom button{
  width:2.7rem;
  height:2.7rem;

  padding:0;

  font-size:1.35rem;
  line-height:1;

  border-radius:.55rem;
  background:#fffffff2;

  border:1px solid var(--line);
  color:var(--ink);
}

/* Información superior del mapa */

.mtip{
  position:absolute;
  z-index:600;
  pointer-events:none;

  background:#0a0f1bee;
  color:#fff;

  border:1px solid #2a3550;
  border-radius:.6rem;

  padding:.6rem .8rem;

  font-size:.9rem;
  line-height:1.45;

  max-width:min(18rem,70%);
}

.mt{
  position:absolute;

  left:4rem;
  top:.85rem;

  z-index:500;

  background:#fffffff2;

  border:1px solid var(--line);
  border-radius:.7rem;

  padding:.65rem .9rem;

  max-width:calc(100% - 5rem);
  pointer-events:none;
}

.mt h2{
  margin:0;
  font-size:1.2rem;
}

.mt p{
  margin:.2rem 0 0;
  font-size:.9rem;
  color:var(--mute);
}

/* Leyenda del mapa */

.mleg{
  position:absolute;

  left:.85rem;
  bottom:1.5rem;

  z-index:500;

  background:#fffffff2;

  border:1px solid var(--line);
  border-radius:.7rem;

  padding:.55rem .7rem;

  max-width:calc(100% - 1.7rem);
  max-height:45%;

  overflow:auto;
  margin:0;
}

.mleg:empty{
  display:none;
}

.mleg .lh{
  display:none;
}

/* ==========================================================
   LEYENDAS DE GRÁFICOS
   ========================================================== */

.leg{
  display:flex;
  flex-direction:column;

  gap:.5rem;
  margin:.5rem 0 1rem;
}

.leg .lh{
  font-size:.9rem;
  font-weight:700;
  color:var(--mute);
}

.leg .lrow{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

.leg .lgrp{
  font-size:.85rem;
  font-weight:700;
  color:var(--mute);
  min-width:6rem;
}

.leg .lchips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.leg .lnote{
  font-size:.9rem;
  color:var(--mute);

  border-left:.2rem solid var(--udea);
  padding-left:.6rem;
}

.leg button.lg{
  display:inline-flex;
  align-items:center;
  gap:.45rem;

  width:auto;
  text-align:left;

  padding:.35rem .8rem .35rem .65rem;

  min-height:0;

  border-radius:999px;
  border:1px solid var(--line);

  background:#fff;
  color:var(--ink);

  font-weight:500;
  font-size:.88rem;
  line-height:1.4;
}

.leg button.lg:hover{
  background:var(--soft);
}

.leg button.lg i{
  flex:none;

  width:.8rem;
  height:.8rem;

  border-radius:.2rem;
  border:1px solid #0003;
}

.leg button.lg b{
  font-size:.88rem;
  font-weight:600;
}

.leg button.lg.off{
  opacity:.45;
}

.leg button.lg.off b{
  text-decoration:line-through;
}

@media(max-width:640px){

  .leg .lgrp{
    min-width:100%;
  }
}

/* ==========================================================
   CONTENIDO PRINCIPAL
   ========================================================== */

main{
  max-width:var(--maxw);

  margin:0 auto;

  padding:
    var(--pad)
    var(--pad)
    2.5rem;
}

/* ==========================================================
   TARJETAS DE INDICADORES
   ========================================================== */
.cards{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px
}

.k{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 16px 16px;
  border-top:5px solid #1a1a1a;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0
}

.k>span{
  font-size:15px;
  line-height:1.25;
  color:var(--ink);
  font-weight:700;
  min-height:2.5em;
  display:block
}

.k .kr{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-top:6px
}

.k .kr em{
  font-style:normal;
  font-size:13.5px;
  color:var(--mute);
  font-weight:600
}

.k .kr b{
  font-size:30px;
  line-height:1.1;
  display:inline;
  margin:0;
  color:var(--ink);
  letter-spacing:-.02em;
  white-space:nowrap
}

.k .kr.m{
  border-top:1px dashed var(--line);
  padding-top:10px;
  margin-top:8px
}

.k .kr.m b,.k .kr.m em{
  color:var(--udea-d)
}

.k:has(.kr.m){
  border-top-color:var(--udea)
}

@media(max-width:1500px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.cards .k:last-child{grid-column:span 2}}
@media(max-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cards .k:last-child{grid-column:1/-1}.k .kr b{font-size:26px}}
/* ==========================================================
   GRÁFICOS
   ========================================================== */

.grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:var(--gap);
}

.grid .p.full{
  grid-column:1/-1;
}

/* Tablet y pantallas estrechas */

@media(max-width:1100px){

  .grid{
    grid-template-columns:minmax(0,1fr);
  }
}

.p{
  background:var(--card);

  border:1px solid var(--line);
  border-radius:var(--r);

  padding:1.2rem;

  min-width:0;
  overflow:hidden;
}

.p h2{
  margin:0;
  font-size:1.25rem;
}

.p>p{
  margin:.25rem 0 .75rem;

  color:var(--mute);
  font-size:1rem;
}

/* ==========================================================
   TEXTOS SVG Y ETIQUETAS DE GRÁFICOS
   ========================================================== */

svg{
  width:100%;
  height:auto;
  display:block;
}

svg text{
  fill:var(--mute);
  font-size:13px;
}

svg .v{
  fill:var(--ink);
  font-weight:600;
}

/* ==========================================================
   GRÁFICOS DE DENSIDAD
   ========================================================== */

.dgrid{
  display:grid;
  gap:1rem;
}

.drow h3{
  font-size:1rem;
  margin:.75rem 0 .5rem;
}

.drow+.drow{
  border-top:1px solid var(--line);

  margin-top:1rem;
  padding-top:.5rem;
}

@media(max-width:760px){

  .dgrid{
    grid-template-columns:1fr!important;
  }
}

/* ==========================================================
   PIES DE GRÁFICOS Y FUENTES
   ========================================================== */

.cap{
  display:flex;
  flex-direction:column;

  gap:.3rem;
  margin-top:.35rem;

  font-size:.9rem;
  color:var(--mute);
}

.cap .ci{
  display:grid;

  grid-template-columns:.75rem auto 1fr;

  align-items:baseline;

  column-gap:.5rem;
  row-gap:.15rem;
}

.cap .ci i{
  width:.75rem;
  height:.75rem;

  border-radius:50%;
  align-self:center;
}

.cap .ci b{
  color:var(--ink);
  font-weight:600;
}

.cap .ci span{
  overflow-wrap:anywhere;
}

.cap .ci em{
  grid-column:2/-1;

  font-style:normal;
  color:var(--warnk);

  background:var(--warn);
  border-radius:.45rem;

  padding:0 .45rem;

  justify-self:start;
  font-size:.82rem;
}

.note{
  font-size:1rem;
  color:var(--mute);
  margin-top:.8rem;
  line-height:1.5;
}

/* ==========================================================
   TABLETS Y DISPOSITIVOS TÁCTILES
   ========================================================== */

@media(pointer:coarse){

  button,
  select{
    min-height:2.9rem;
  }

  .mzoom button{
    width:2.9rem;
    height:2.9rem;
  }

  .leg button.lg{
    min-height:2.4rem;
    padding:.4rem .9rem .4rem .7rem;
  }
}

/* ==========================================================
   CELULARES
   ========================================================== */

@media(max-width:800px){

  :root{
    --pad:1rem;
    --gap:.8rem;
  }

  .top{
    padding:1rem;
  }

  .top h1{
    font-size:1.45rem;
  }

  .gl2,
  .p{
    padding:1rem;
  }

  .mapw{
    min-height:clamp(22rem,60dvh,38rem);
  }

  .cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .k{
    padding:.85rem;
  }

  .k .kr{
    align-items:flex-start;
  }
}

/* ==========================================================
   CELULARES MUY PEQUEÑOS
   ========================================================== */

@media(max-width:380px){

  .st{
    grid-template-columns:1fr;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .top h1{
    font-size:1.25rem;
  }

  .p h2{
    font-size:1.1rem;
  }
}

/* ==========================================================
   CELULAR HORIZONTAL
   ========================================================== */

@media(max-height:480px) and (orientation:landscape){

  .mapw{
    min-height:90dvh;
  }
}

/* ==========================================================
   PANTALLAS GRANDES Y ULTRA ANCHAS
   ========================================================== */

@media(min-width:1800px){

  :root{
    --maxw:120rem;
  }

  .hg{
    grid-template-columns:
      minmax(20rem,24rem)
      minmax(0,1fr)
      minmax(24rem,29rem);
  }

  main{
    max-width:120rem;
  }
}

@media(min-width:2200px){

  :root{
    --maxw:125rem;
  }

  .hg{
    grid-template-columns:
      minmax(21rem,25rem)
      minmax(0,1fr)
      minmax(25rem,30rem);
  }

  main{
    max-width:125rem;
  }
}

/* ==========================================================
   IMPRESIÓN Y EXPORTACIÓN A PDF
   ========================================================== */

@media print{

  html{
    font-size:11pt;
  }

  .top{
    background:#fff;
    color:#000;
    border-bottom:2px solid #000;
  }

  .mzoom,
  .flt,
  button{
    display:none!important;
  }

  .p,
  .k,
  .gl2{
    break-inside:avoid;
  }

  .hg,
  .grid{
    grid-template-columns:1fr;
  }
}

/* ==========================================================
   ACCESIBILIDAD: REDUCIR MOVIMIENTO
   ========================================================== */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    transition:none!important;
    animation:none!important;
  }
}