:root {
  --fondo: #f1f4f8;
  --superficie: #ffffff;
  --tinta: #182230;
  --tinta-suave: #5b6b7c;
  --linea: #e1e7ee;
  --azul: #16304a;
  --azul-claro: #e8eef6;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .05);
  --ambar: #e8a317;
  --ambar-suave: #fbefd2;
  --ok: #2e7d5b;
  --ok-suave: #dcefe5;
  --alerta: #c2412d;
  --alerta-suave: #f8e0db;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --texto: 'Barlow', system-ui, sans-serif;
  --radio: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1a24;
    --superficie: #172532;
    --tinta: #e3eaf0;
    --tinta-suave: #98a8b6;
    --linea: #26384a;
    --azul: #0c1621;
    --azul-claro: #1c2c3c;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
    --ambar-suave: #3a2f14;
    --ok-suave: #173326;
    --alerta-suave: #3d1d17;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 400 16px/1.55 var(--texto);
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: .01em; }
h1 { font-size: 2.3rem; letter-spacing: -.01em; }
h2 { font-size: 1.45rem; margin-top: 2rem; margin-bottom: .6rem; }
h3 { font-size: 1.15rem; }
p { margin: .4rem 0; }
.suave { color: var(--tinta-suave); }
.chico { font-size: .88rem; }

/* estructura: barra lateral en escritorio (ancha o compacta), barra inferior en el teléfono */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .2s ease; }
.app:has(#nav[hidden]) { grid-template-columns: minmax(0, 1fr); }
.app:has(#nav[hidden]) .lateral { display: none; }
.app:has(.lateral.compacta) { grid-template-columns: 76px minmax(0, 1fr); }
.lateral {
  position: sticky; top: 0; height: 100vh; background: var(--azul); color: #fff;
  display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem .7rem;
  padding-top: max(1rem, env(safe-area-inset-top)); overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 32%);
}
.lateral-cab { display: flex; align-items: center; justify-content: space-between; gap: .3rem; min-height: 40px; }
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; font: 600 1.45rem var(--display); color: #fff; padding: 0 .4rem; min-width: 0; }
.marca svg { width: 28px; height: 28px; flex: none; color: var(--ambar); }
.marca span { overflow: hidden; white-space: nowrap; }
.plegar { flex: none; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #8ea1b3; display: grid; place-items: center; cursor: pointer; }
.plegar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.plegar:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav { display: flex; flex-direction: column; gap: .15rem; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.nav a {
  position: relative; display: flex; align-items: center; gap: .7rem; padding: .58rem .75rem; border-radius: 10px;
  color: #b7c6d4; text-decoration: none; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s;
}
.nav a svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.nav a[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--ambar); }
.nav a[aria-current="page"] svg { color: var(--ambar); }
.nav .insignia { flex: none; min-width: 20px; height: 20px; padding: 0 .4rem; border-radius: 999px; background: var(--ambar); color: #1b2733; font: 700 .72rem/20px var(--texto); font-style: normal; text-align: center; }
/* subsecciones del área activa */
.nav .sub { display: flex; flex-direction: column; gap: 1px; margin: .1rem 0 .35rem; padding-left: 1.25rem; position: relative; }
.nav .sub::before { content: ''; position: absolute; left: 1.35rem; top: .2rem; bottom: .2rem; width: 1px; background: rgba(255, 255, 255, .14); }
.nav .sub a { padding: .36rem .6rem .36rem 1.05rem; font-size: .88rem; font-weight: 500; color: #9fb1c1; border-radius: 8px; }
.nav .sub a::before { display: none; }
.nav .sub a[aria-current="page"] { background: none; color: #fff; font-weight: 600; }
.nav .sub a[aria-current="page"]::after { content: ''; position: absolute; left: .1rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 3px var(--azul); }
.nav .sub .insignia { min-width: 18px; height: 18px; line-height: 18px; font-size: .68rem; }
.lateral-pie { margin-top: auto; font-size: .76rem; color: #8ea1b3; padding: 0 .4rem; line-height: 1.4; display: flex; flex-direction: column; gap: .15rem; }
.lateral-pie .version { font-family: ui-monospace, monospace; font-size: .68rem; color: #6d8195; }
/* modo compacto: solo iconos, el nombre aparece al pasar el cursor */
.lateral.compacta { padding-left: .6rem; padding-right: .6rem; overflow: visible; }
.lateral.compacta .nav { overflow: visible; }
.lateral.compacta .lateral-cab { flex-direction: column; gap: .4rem; }
.lateral.compacta .marca { padding: 0; justify-content: center; }
.lateral.compacta .marca span, .lateral.compacta .nav a span, .lateral.compacta .nav .sub, .lateral.compacta .lateral-pie span:first-child, .lateral.compacta .yo .yo-texto { display: none; }
.lateral.compacta .plegar svg { transform: rotate(180deg); }
.lateral.compacta .nav a { justify-content: center; padding: .62rem 0; }
.lateral.compacta .nav .insignia { position: absolute; top: 4px; right: 6px; min-width: 16px; height: 16px; line-height: 16px; font-size: .62rem; padding: 0 .3rem; }
.lateral.compacta .nav a::after {
  content: attr(data-nombre); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #0c1621; color: #fff; font-size: .82rem; font-weight: 500; padding: .3rem .6rem; border-radius: 7px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 20;
}
.lateral.compacta .nav a:hover::after, .lateral.compacta .nav a:focus-visible::after { opacity: 1; }
.lateral.compacta .lateral-pie { align-items: center; text-align: center; padding: 0; }
.lateral.compacta .yo { padding: .6rem 0; align-items: center; }
.lateral.compacta .yo .yo-acc { flex-direction: column; gap: .2rem; }

.contenido { width: 100%; max-width: 1140px; margin: 0 auto; padding: 2rem 2.4rem 4rem; outline: none; }
.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }

@media (max-width: 860px) {
  .app, .app:has(.lateral.compacta) { grid-template-columns: minmax(0, 1fr); }
  .lateral, .lateral.compacta {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 10; overflow: visible;
    flex-direction: row; gap: 0; padding: .25rem .3rem; padding-bottom: max(.25rem, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 -6px 18px rgba(0, 0, 0, .18); background-image: none;
  }
  .lateral-cab, .lateral-pie, .nav .sub { display: none !important; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav a, .lateral.compacta .nav a { flex: 1; flex-direction: column; gap: .15rem; padding: .35rem .2rem .3rem; font-size: .68rem; text-align: center; border-radius: 8px; }
  .nav a span { flex: none; width: 100%; }
  .nav a svg { width: 22px; height: 22px; }
  .nav a[aria-current="page"] { background: none; }
  .nav a[aria-current="page"]::before { top: auto; bottom: 0; left: 30%; right: 30%; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .nav a::after { display: none !important; }
  .nav .insignia, .lateral.compacta .nav .insignia { position: absolute; top: 0; left: calc(50% + 6px); right: auto; min-width: 16px; height: 16px; line-height: 16px; font-size: .62rem; padding: 0 .3rem; }
  .contenido { padding: 1.2rem 1rem calc(5.2rem + env(safe-area-inset-bottom)); }
  h1 { font-size: 1.9rem; }
}

/* superficies */
.panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.25rem; box-shadow: var(--sombra); }
.panel + .panel { margin-top: .75rem; }
.lista { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.lista > li { padding: .8rem 1rem; border-top: 1px solid var(--linea); }
.lista > li:first-child { border-top: 0; }
.vacio { padding: 1.5rem 1rem; text-align: center; color: var(--tinta-suave); }

/* botones y formularios */
button, .boton {
  font: 600 .95rem var(--texto); border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta);
  padding: .5rem 1rem; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 40px;
  transition: background .15s, border-color .15s, transform .05s;
}
button:hover, .boton:hover { border-color: var(--tinta-suave); }
button:active, .boton:active { transform: translateY(1px); }
button.primario, .boton.primario { background: var(--azul); color: #fff; border-color: var(--azul); box-shadow: 0 2px 6px rgba(22, 48, 74, .25); }
button.primario:hover, .boton.primario:hover { filter: brightness(1.12); }
@media (prefers-color-scheme: dark) { button.primario, .boton.primario { background: var(--ambar); color: #1b2733; border-color: var(--ambar); } }
button.peligro { color: var(--alerta); }
button.mini { min-height: 32px; padding: .25rem .6rem; font-size: .85rem; }
button:disabled { opacity: .5; cursor: default; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

label { display: block; font-weight: 500; font-size: .92rem; }
input, select, textarea {
  font: 400 1rem var(--texto); color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 10px; padding: .5rem .7rem; width: 100%; margin-top: .25rem; min-height: 40px; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-suave); }
.filtros { background: var(--superficie); }
.filtros input, .filtros select { background: var(--fondo); }
textarea { min-height: 7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--ok); flex: none; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.ayuda { font-size: .82rem; color: var(--tinta-suave); font-weight: 400; margin-top: .2rem; }

/* etiquetas de estado */
.chip { display: inline-block; font-size: .8rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--fondo); color: var(--tinta-suave); white-space: nowrap; }
.chip.fm { background: var(--azul); color: #fff; }
.chip.rcc { background: var(--ok); color: #fff; }
.chip.ok { background: var(--ok-suave); color: var(--ok); }
.chip.alerta { background: var(--alerta-suave); color: var(--alerta); }
.chip.aviso { background: var(--ambar-suave); color: #8a5d00; }
@media (prefers-color-scheme: dark) { .chip.aviso { color: var(--ambar); } }

/* alertas */
.alerta { border-left: 4px solid var(--tinta-suave); padding: .6rem .8rem; background: var(--superficie); border-radius: 0 8px 8px 0; margin-bottom: .5rem; }
.alerta.error { border-color: var(--alerta); }
.alerta.aviso { border-color: var(--ambar); }
.alerta a { font-weight: 600; }

/* dial de frecuencia: el elemento firma */
.dial {
  font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--tinta);
}
.dial small { font-size: .45em; font-weight: 500; color: var(--tinta-suave); margin-left: .15em; }
.fila-post { display: grid; grid-template-columns: 6.2rem 1fr auto; gap: .9rem; align-items: center; text-decoration: none; }
.fila-post .dial { font-size: 2.1rem; }
.fila-post .titulo { font-weight: 600; font-size: 1.05rem; }

.sintonia { position: relative; height: 54px; margin: 1.2rem 0 .4rem; }
.sintonia .escala {
  position: absolute; inset: 14px 0 14px 0; border-radius: 4px; background:
    repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px 10%),
    var(--fondo);
  border: 1px solid var(--linea);
}
.sintonia .sorteo { position: absolute; top: 14px; bottom: 14px; right: 0; width: 5%; background: var(--ambar-suave); border-left: 2px dashed var(--ambar); }
.sintonia .aguja { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--alerta); border-radius: 2px; transform: translateX(-1px); transition: left .5s cubic-bezier(.3,.7,.2,1); }
.sintonia .aguja::after { content: ''; position: absolute; top: -4px; left: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--alerta); }
.sintonia-marcas { display: flex; justify-content: space-between; font: 500 .8rem var(--display); color: var(--tinta-suave); }
@media (prefers-reduced-motion: reduce) { .sintonia .aguja { transition: none; } }

.puntaje-grande { font: 700 4rem/1 var(--display); font-variant-numeric: tabular-nums; }
.medidores { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .8rem; }
.medidores div { background: var(--fondo); border-radius: 10px; padding: .6rem .7rem; }
.medidores b { display: block; font: 600 1.4rem var(--display); }

/* barra de progreso */
.progreso { height: 6px; background: var(--fondo); border-radius: 3px; overflow: hidden; margin-top: .35rem; }
.progreso span { display: block; height: 100%; background: var(--ok); }

/* hitos */
.hito { display: grid; grid-template-columns: 4.2rem 1fr; gap: .8rem; align-items: center; }
.hito .cuenta { text-align: center; font-family: var(--display); line-height: 1; }
.hito .cuenta b { display: block; font-size: 1.9rem; font-weight: 700; }
.hito .cuenta span { font-size: .8rem; color: var(--tinta-suave); }
.hito.critico .cuenta b { color: var(--alerta); }

/* checklist */
.doc { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.doc.listo .doc-nombre { color: var(--tinta-suave); text-decoration: line-through; text-decoration-color: var(--linea); }
.doc.no_aplica { opacity: .55; }
.doc-detalle { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.doc-detalle input[type="date"] { width: auto; margin: 0; min-height: 34px; padding: .25rem .4rem; }
.doc-detalle select { width: auto; margin: 0; min-height: 34px; padding: .25rem .4rem; }
.grupo-persona { font-weight: 600; padding: .5rem 1rem; background: var(--fondo); }

/* pestañas */
/* pestañas: píldoras segmentadas */
.pestanas { display: flex; gap: .2rem; margin: 1rem 0 1.2rem; overflow-x: auto; scrollbar-width: none; max-width: 100%; width: fit-content; background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; padding: .25rem; box-shadow: var(--sombra); }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { border: 0; border-radius: 999px; background: none; color: var(--tinta-suave); min-height: 36px; padding: 0 .9rem; }
.pestanas button[aria-selected="true"] { color: #fff; background: var(--azul); }

/* tablas */
.tabla-scroll { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { font-weight: 600; color: var(--tinta-suave); background: var(--superficie); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover td { background: var(--azul-claro); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td input { margin: 0; min-height: 32px; padding: .2rem .4rem; min-width: 7rem; }

/* login */
.login { max-width: 380px; margin: 14vh auto 0; }
.login .dial { font-size: 3.4rem; margin-bottom: 1rem; color: var(--ambar); }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); box-shadow: var(--sombra); transform: translateX(-50%); background: var(--tinta); color: var(--superficie); padding: .6rem 1rem; border-radius: 8px; font-weight: 500; max-width: 90vw; z-index: 20; }

details > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.sep { height: 1px; background: var(--linea); margin: 1rem 0; border: 0; }

@media (max-width: 520px) { .medidores { grid-template-columns: repeat(2, 1fr); } }

/* cerebro */
.oport { padding: 0; }
.oport > summary { list-style: none; padding: .8rem 1rem; }
.oport > summary::-webkit-details-marker { display: none; }
.oport-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.oport-chips { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.oport-cuerpo { padding: 0 1rem 1rem; border-top: 1px solid var(--linea); }
.oport-cuerpo > p:first-child { margin-top: .8rem; }
textarea.texto { font-family: inherit; font-size: .95rem; min-height: 4.5rem; }
.saber > summary { font-weight: 600; }
.saber p { margin: .6rem 0; line-height: 1.5; }
.chip.prob { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
.chip.prob.alta { background: var(--ok); color: #fff; }
.chip.prob.media { background: var(--ambar-suave); color: #8a5d00; }
.chip.prob.baja { background: var(--alerta-suave); color: var(--alerta); }
.prediccion { border: 1px solid var(--linea); border-left: 4px solid var(--tinta-suave); border-radius: 0 8px 8px 0; padding: .7rem .9rem; margin: .8rem 0; background: var(--fondo); }
.prediccion.alta { border-left-color: var(--ok); }
.prediccion.media { border-left-color: var(--ambar); }
.prediccion.baja { border-left-color: var(--alerta); }
.pred-cifra { display: flex; align-items: center; gap: .7rem; }
.pred-cifra b { font-family: var(--display); font-size: 2.2rem; line-height: 1; }
.pred-cifra span { font-size: .85rem; color: var(--tinta-suave); }
.prediccion ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.prediccion li { margin: .2rem 0; font-size: .92rem; }
.datos h3 { font-size: 1.1rem; }
.datos p { margin: .35rem 0; font-size: .92rem; }

/* orden: pestañas con enlaces, panel */
.pestanas a { display: inline-flex; align-items: center; gap: .4rem; padding: 0 .9rem; min-height: 36px; white-space: nowrap; color: var(--tinta-suave); text-decoration: none; border-radius: 999px; font-weight: 600; transition: background .15s, color .15s; }
.pestanas a:hover { background: var(--azul-claro); color: var(--tinta); }
.pestanas a[aria-current="page"] { color: #fff; background: var(--azul); }
.cuenta-tab { font-size: .72rem; background: var(--fondo); border-radius: 999px; padding: 0 .45rem; color: var(--tinta-suave); }
.pestanas a[aria-current="page"] .cuenta-tab { background: rgba(255, 255, 255, .2); color: #fff; }
.filtros { margin-bottom: 1rem; }
.seccion-cerebro > p.suave:first-child { margin-top: 0; }
.destacado { display: flex; gap: 1rem; align-items: center; border-left: 4px solid var(--ambar); }
.cuenta.grande b { font-size: 2.6rem; }
.titulo-plazo { font-family: var(--display); font-size: 1.35rem; font-weight: 600; margin: .15rem 0; }
.dos-columnas { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }
@media (min-width: 860px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }
.fila-apuesta { display: flex; gap: .7rem; align-items: center; color: inherit; text-decoration: none; padding: .55rem .8rem; }
.fila-apuesta:hover { background: var(--fondo); }
.destacado .cuenta { text-align: center; font-family: var(--display); line-height: 1; min-width: 3.5rem; }
.destacado .cuenta b { display: block; font-weight: 700; color: var(--alerta); }
.destacado .cuenta span { font-size: .8rem; color: var(--tinta-suave); }
.lista > li:has(> .fila-apuesta) { padding: 0; }

/* por región */
.regiones { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.region h3 { font-size: 1.1rem; }
.region.actual { border-color: var(--ambar); }
.region-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.region ul { list-style: none; margin: 0; padding: 0; }
.region li { display: flex; gap: .55rem; align-items: flex-start; padding: .4rem 0; border-top: 1px solid var(--linea); }
.region li > span:last-child { display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: center; }
.region li .chico { flex-basis: 100%; }
.regiones .panel + .panel { margin-top: 0; }

/* postulantes */
.resumen-cat { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.resumen-cat .chip { border: 1px solid transparent; cursor: pointer; min-height: 32px; font-size: .85rem; }
.resumen-cat .chip.activo { border-color: var(--tinta); }
.postulante { padding: 0; }
.postulante > summary { list-style: none; padding: .7rem 1rem; }
.postulante > summary::-webkit-details-marker { display: none; }
.post-cab { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.postulante ul { margin: .2rem 0 .6rem; padding-left: 1.1rem; }
.chip.alerta { border-left: 0; padding: .1rem .5rem; margin: 0; border-radius: 999px; }
.oport-chips { align-items: center; }
.resumen-cat .chip:not(.ok):not(.aviso):not(.alerta) { background: var(--superficie); border-color: var(--linea); }

/* vínculos */
.ficha { border-top: 1px dashed var(--linea); margin-top: .8rem; }
.ficha ul { padding-left: 1.1rem; }
.grupo + .grupo { margin-top: .6rem; }
.grupo ul { margin: .2rem 0 0; padding-left: 1.1rem; }

/* paso a paso */
.pasos { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.paso { display: flex; gap: .8rem; padding: .7rem 1rem; border-top: 1px solid var(--linea); align-items: flex-start; }
.paso:first-child { border-top: 0; }
.paso-n { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--tinta-suave); }
.paso.ok .paso-n { background: var(--ok); } .paso.aviso .paso-n { background: var(--ambar); } .paso.error .paso-n { background: var(--alerta); }
.subida + .subida { margin-top: .6rem; }
.items-rev { list-style: none; padding: 0; margin: .5rem 0 0; }
.items-rev li { display: flex; gap: .5rem; padding: .25rem 0; font-size: .92rem; }
.items-rev li span { flex: none; width: 1.2rem; text-align: center; font-weight: 700; }
.items-rev li.ok span { color: var(--ok); } .items-rev li.aviso span { color: #8a5d00; } .items-rev li.error span { color: var(--alerta); }

/* antenas */
.antenas-sel { border: 0; padding: 0; margin: 0 0 .6rem; display: grid; gap: .3rem; }
tr.destacada td { background: var(--ok-suave); }

/* barra de pestañas de las áreas Técnico y Administrativo */
.pestanas.hub { margin-top: 0; }
@media (max-width: 860px) { .toast { bottom: calc(5.2rem + env(safe-area-inset-bottom)); } }
.filtros .rejilla { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* puntaje por factor y «Ahora te toca» */
.factores { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: .75rem; }
.factores .panel + .panel { margin-top: 0; }
.factor { border-left: 4px solid var(--linea); }
.factor.ok { border-left-color: var(--ok); }
.factor.aviso { border-left-color: var(--ambar); }
.factor.error { border-left-color: var(--alerta); }
.factor ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.factor li { margin: .2rem 0; }
.ahora { border-left: 4px solid var(--ambar); margin-bottom: 1rem; }
.ahora-lista { list-style: none; margin: 0; padding: 0; }
.ahora-lista li { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .6rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--linea); }
.ahora-lista li:first-child { border-top: 0; }
.ahora-fecha { font-size: .82rem; font-weight: 600; color: var(--tinta-suave); }
.ahora-lista li.vencido .ahora-fecha { color: var(--alerta); }
@media (max-width: 640px) { .ahora-lista li { grid-template-columns: 1fr auto; } .ahora-fecha { grid-column: 1 / -1; } }
.paso details { margin-top: .2rem; }
.paso details ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.pestanas button { white-space: nowrap; flex: none; }
.doc-gen { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }

/* mapa de sitios */
.mapa-sitios { height: 380px; border-radius: var(--radio); overflow: hidden; margin-top: .6rem; border: 1px solid var(--linea); background: var(--fondo); }
.pin-sitio { background: var(--ambar); color: #1b2733; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem var(--texto); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.avisos-sitio { margin: .3rem 0 0; padding-left: 1rem; color: var(--alerta); }
.avisos-sitio li { margin: .1rem 0; }

/* mapa de Modelamiento */
.mapa-panel { margin-top: 1rem; }
.mapa-barra { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.mapa-modelo { height: 460px; border-radius: 10px; overflow: hidden; border: 1px solid var(--linea); background: var(--fondo); }
.mapa-panel.grande { position: fixed; inset: 0; z-index: 50; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
.mapa-panel.grande .mapa-modelo { flex: 1; height: auto; }
.ley::before { content: ''; display: inline-block; width: .9rem; height: .2rem; background: var(--c); margin: 0 .25rem .2rem .3rem; vertical-align: middle; }
.pop-punto { font: 400 .85rem/1.45 var(--texto); }
.pop-punto .ok { color: #2e7d5b; font-weight: 600; } .pop-punto .no { color: #c2412d; font-weight: 600; }
.leaflet-control-layers { font: 400 .8rem var(--texto); }
@media (max-width: 860px) { .mapa-modelo { height: 360px; } }
.leaflet-control-layers input { width: auto; min-height: 0; margin: 0 .35rem 0 0; padding: 0; }
.leaflet-control-layers label { display: flex; align-items: center; font-weight: 400; margin: .15rem 0; }
.leaflet-container button.mini { min-height: 28px; }

.pin-cerro { display: flex !important; align-items: center; gap: 2px; width: auto !important; white-space: nowrap; }
.pin-cerro span { color: #2fbf71; font-size: 16px; text-shadow: 0 0 2px #000, 0 0 2px #000; line-height: 1; }
.pin-cerro b { font: 700 11px var(--texto); color: #fff; background: rgba(22,48,74,.85); border-radius: 4px; padding: 0 3px; }
.pin-cerro.no span { color: #b8c0c8; }
.pin-cerro.no b { background: rgba(80,80,80,.75); font-weight: 500; }
.pin-torre span { font-size: 22px; filter: drop-shadow(0 0 2px #000); }
.pin-cerro.chico span { font-size: 11px; opacity: .85; }

/* Qué pedir a Subtel y a otros */
.solicitudes { border-left: 4px solid var(--acento, #2a6); margin-bottom: 1rem; }
.sol-lista { list-style: none; margin: 0; padding: 0; }
.sol-lista li.sol { padding: .55rem 0; border-top: 1px solid var(--linea); }
.sol-lista li.sol:first-child { border-top: 0; }
.sol-cab { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sol-lista li.vencido .sol-cab b { color: var(--alerta); }
.sol-lista li.hecho { opacity: .75; }
.acciones.compacta { margin-top: .35rem; gap: .4rem; }

/* Usuarios */
.yo { margin-top: auto; padding: .7rem .3rem .2rem; border-top: 1px solid rgba(255, 255, 255, .1); color: #c9d6e2; font-size: .85rem; display: flex; flex-direction: column; gap: .45rem; }
.yo .yo-quien { display: flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none; color: inherit; padding: .3rem .4rem; border-radius: 10px; transition: background .15s; }
.yo .yo-quien:hover { background: rgba(255, 255, 255, .08); }
.yo .avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--ambar), #f4c04f); color: #1b2733; font: 700 .85rem var(--display); letter-spacing: .02em; }
.yo .yo-texto { min-width: 0; line-height: 1.25; }
.yo b { color: #fff; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo .rol { color: #8ea1b3; font-size: .76rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo .yo-acc { display: flex; gap: .2rem; padding: 0 .1rem; }
.yo .yo-acc a, .yo .yo-acc button { flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 30px; padding: 0 .5rem; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: #c9d6e2; font: 500 .78rem var(--texto); text-decoration: none; cursor: pointer; }
.yo .yo-acc a:hover, .yo .yo-acc button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.yo .yo-acc svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lateral.compacta .yo .yo-acc a span, .lateral.compacta .yo .yo-acc button span { display: none; }
.lateral.compacta .yo .yo-acc a, .lateral.compacta .yo .yo-acc button { width: 100%; }
.solo-movil { display: none !important; }
@media (max-width: 860px) {
  .solo-movil { display: flex !important; }
  .yo { display: none; }
  #nav-admin { display: none !important; }
}
.login .enlace-suave { background: none; border: 0; padding: 0; min-height: 0; color: var(--azul); text-decoration: underline; cursor: pointer; font: inherit; }
.enlace-copiar { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.enlace-copiar input { flex: 1; font-family: ui-monospace, monospace; font-size: .8rem; }
.tabla-usuarios td { white-space: normal; vertical-align: top; }
.tabla-usuarios tr.inactivo td { opacity: .55; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: .3rem; }
.nav a[hidden] { display: none !important; }
.alerta.ok { border-color: var(--ok); }
[hidden] { display: none !important; }
