/* ==========================================================================
   DELUXEZONE FORMS — postulaciones
   Mismo sistema visual que el portal de normativa (info.deluxezone.net).
   Reglas de rendimiento que sigue esta hoja:
   1. backdrop-filter SOLO en la barra movil de abajo. Es lo que mas cuesta.
   2. Las animaciones tocan solo transform y opacity. Nada de animar
      box-shadow, filter, width ni top.
   3. Los pasos ocultos del formulario usan content-visibility.
   4. Las particulas son 12 divs con CSS. Sin canvas, sin JS, sin timers.
   ========================================================================== */

/* ---------- 1. VARIABLES ---------- */
:root{
  --bg:#050505;
  --bg-alto:#0A0A11;
  --panel:#101019;
  --panel-alto:#16161F;
  --linea:#20202E;
  --linea-viva:#2E2A45;

  --tx:#EDEBF5;
  --tx-medio:#B4B1C9;
  --tx-suave:#83809B;

  --vio:#7B2EFF;
  --vio-claro:#A77BFF;
  --vio-tenue:rgba(123,46,255,.12);

  --rojo:#FF3350;
  --naranja:#FF8A2B;
  --celeste:#3BA9FF;
  --ambar:#FFB020;
  --rosa:#FF5CC8;
  --verde:#2ED573;
  --discord:#5865F2;

  --r-chico:8px;
  --r:14px;
  --r-grande:22px;

  --lateral:250px;
  --barra:60px;

  --fuente-titulo:"Chakra Petch","Segoe UI Semibold",system-ui,sans-serif;
  --fuente-texto:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  color-scheme:dark;
}

html[data-tema="claro"]{
  --bg:#F4F3F8;
  --bg-alto:#FFFFFF;
  --panel:#FFFFFF;
  --panel-alto:#F0EEF7;
  --linea:#DFDCEA;
  --linea-viva:#CFC7E8;

  --tx:#12121A;
  --tx-medio:#43405A;
  --tx-suave:#6C6885;

  --vio:#6218DB;
  --vio-claro:#7B2EFF;
  --vio-tenue:rgba(98,24,219,.09);
  --rojo:#D91232;
  --naranja:#C25A00;
  --celeste:#0B63B8;
  --rosa:#B0138A;
  --verde:#12864A;

  color-scheme:light;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--fuente-texto);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  touch-action:manipulation;
}

/* Resplandor de fondo: imagen fija, no un filtro. No cuesta nada. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 82% -8%, rgba(123,46,255,.16), transparent 60%),
    radial-gradient(46rem 34rem at 8% 104%, rgba(123,46,255,.10), transparent 62%);
}
html[data-tema="claro"] body::before{
  background:
    radial-gradient(60rem 40rem at 82% -8%, rgba(123,46,255,.10), transparent 60%),
    radial-gradient(46rem 34rem at 8% 104%, rgba(123,46,255,.07), transparent 62%);
}

img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--vio-claro);text-decoration:none}
:focus-visible{outline:2px solid var(--vio-claro);outline-offset:3px;border-radius:4px}

input,select,textarea{font-family:var(--fuente-texto)}

/* ---------- 2. PARTICULAS ---------- */
.particulas{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.particulas i{
  position:absolute;
  top:-6vh;
  width:3px;height:3px;
  border-radius:50%;
  background:var(--vio-claro);
  opacity:0;
  will-change:transform,opacity;
  animation:caer linear infinite;
}
@keyframes caer{
  0%   {transform:translate3d(0,0,0);opacity:0}
  10%  {opacity:.55}
  90%  {opacity:.35}
  100% {transform:translate3d(1.4rem,112vh,0);opacity:0}
}
.particulas i:nth-child(1) {left:6%;  animation-duration:17s; animation-delay:0s}
.particulas i:nth-child(2) {left:14%; animation-duration:22s; animation-delay:3s;  width:2px;height:2px}
.particulas i:nth-child(3) {left:23%; animation-duration:19s; animation-delay:7s}
.particulas i:nth-child(4) {left:31%; animation-duration:25s; animation-delay:1s;  width:2px;height:2px}
.particulas i:nth-child(5) {left:42%; animation-duration:16s; animation-delay:9s}
.particulas i:nth-child(6) {left:51%; animation-duration:23s; animation-delay:5s;  width:4px;height:4px}
.particulas i:nth-child(7) {left:60%; animation-duration:20s; animation-delay:12s}
.particulas i:nth-child(8) {left:68%; animation-duration:18s; animation-delay:2s;  width:2px;height:2px}
.particulas i:nth-child(9) {left:77%; animation-duration:26s; animation-delay:8s}
.particulas i:nth-child(10){left:85%; animation-duration:21s; animation-delay:14s; width:2px;height:2px}
.particulas i:nth-child(11){left:92%; animation-duration:19s; animation-delay:4s}
.particulas i:nth-child(12){left:97%; animation-duration:24s; animation-delay:11s; width:2px;height:2px}
@media (max-width:640px){.particulas i:nth-child(n+7){display:none}}

/* ---------- 3. ESTRUCTURA ---------- */
.app{position:relative;z-index:2;display:flex;min-height:100vh}

.lateral{
  width:var(--lateral);
  flex:0 0 var(--lateral);
  border-right:1px solid var(--linea);
  background:var(--bg-alto);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}

.principal{flex:1;min-width:0;padding:26px 30px 60px}
.contenido{max-width:1120px;margin:0 auto}

/* ---------- 4. MARCA Y NAVEGACION ---------- */
.marca{display:flex;align-items:center;gap:11px;padding:18px 16px;border-bottom:1px solid var(--linea)}
.marca-logo{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:var(--r-chico);
  display:grid;place-items:center;
  background:var(--vio);
  color:#fff;
  font-family:var(--fuente-titulo);
  font-weight:700;font-size:16px;
  overflow:hidden;
}
.marca-logo img{width:100%;height:100%;object-fit:contain}
.marca-nombre{
  font-family:var(--fuente-titulo);
  font-weight:700;font-size:15px;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.2;
}
.marca-sub{font-size:11px;color:var(--tx-suave);letter-spacing:.04em}

/* El menu es un control con borde, igual que la nav del portal. */
.menu{
  margin:14px 12px;
  display:flex;flex-direction:column;gap:3px;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:4px;
}
.menu-titulo{
  font-family:var(--fuente-titulo);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--vio-claro);font-weight:600;
  padding:14px 16px 2px;
}
.menu a{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;
  border-radius:10px;
  color:var(--tx-medio);
  font-size:14.5px;font-weight:650;
  transition:color .16s ease,background-color .16s ease;
}
.menu a:hover{color:var(--tx);background:var(--panel-alto);text-decoration:none}
.menu a.activo{color:#fff;background:var(--vio)}
.menu a .ico{width:16px;text-align:center;font-size:13px;opacity:.9}

.relleno{flex:1}

.lateral-pie{border-top:1px solid var(--linea);padding:12px;display:flex;flex-direction:column;gap:9px}
.usuario-chip{
  display:flex;align-items:center;gap:10px;
  padding:9px;
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:var(--panel);
}
.usuario-chip img{width:30px;height:30px;border-radius:50%;flex:0 0 30px}
.usuario-chip .nom{font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usuario-chip .rol{font-size:10.5px;color:var(--tx-suave)}
.insignia-admin{
  display:inline-block;
  font-family:var(--fuente-titulo);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:1px 7px;border-radius:999px;
  background:var(--vio-tenue);
  border:1px solid var(--linea-viva);
  color:var(--vio-claro);
}
.pie-acciones{display:flex;gap:8px}
.pie-acciones .icono-btn{flex:1}

.icono-btn{
  height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linea);
  border-radius:11px;
  background:var(--panel);
  color:var(--tx-medio);
  font-size:15px;
  transition:border-color .16s ease,color .16s ease;
}
.icono-btn:hover{border-color:var(--linea-viva);color:var(--tx);text-decoration:none}

/* ---------- 5. CABECERAS ---------- */
.cabecera{
  position:relative;
  border:1px solid var(--linea);
  border-radius:var(--r-grande);
  padding:24px 26px;
  margin-bottom:22px;
  overflow:hidden;
  background:var(--panel);
}
.cabecera::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--degradado,linear-gradient(120deg,rgba(123,46,255,.16),rgba(123,46,255,.05) 52%,transparent 82%));
}
.cabecera > *{position:relative;z-index:1}
.cabecera-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cabecera h1{
  font-family:var(--fuente-titulo);
  font-size:clamp(1.5rem,4.6vw,2.1rem);
  font-weight:700;letter-spacing:-.01em;text-transform:uppercase;
  margin:6px 0 8px;
}
.cabecera p{color:var(--tx-medio);margin:0;font-size:15px;max-width:62ch}

.eyebrow{
  font-family:var(--fuente-titulo);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--vio-claro);font-weight:600;
}

.titulo-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.titulo-fila h1{
  font-family:var(--fuente-titulo);
  font-size:clamp(1.4rem,4.2vw,1.9rem);
  font-weight:700;letter-spacing:-.01em;text-transform:uppercase;
  margin:0;
}
h2.seccion{
  font-family:var(--fuente-titulo);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--vio-claro);font-weight:600;
  margin:28px 0 12px;
}

.capsula{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;
  border:1px solid var(--linea-viva);
  border-radius:999px;
  background:var(--vio-tenue);
  font-size:12.5px;font-weight:600;
  color:var(--vio-claro);
  white-space:nowrap;
}

/* ---------- 6. TARJETAS ---------- */
.tarjeta{
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--r-grande);
  padding:20px;
}
.tarjeta + .tarjeta{margin-top:14px}
.grilla{display:grid;gap:14px}
.grilla-2{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.grilla-3{grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.grilla-4{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}

.tarjeta-form{display:flex;flex-direction:column;gap:15px}
.tarjeta-form .top{display:flex;gap:13px;align-items:center}
.casillero{
  width:52px;height:52px;flex:0 0 52px;
  border-radius:var(--r-chico);
  background:var(--panel-alto);
  border:1px solid var(--linea-viva);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.04);
  display:grid;place-items:center;
  font-size:24px;line-height:1;
}
.tarjeta-form h3{
  font-family:var(--fuente-titulo);
  margin:0 0 3px;
  font-size:16px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;
}
.tarjeta-form .num{
  font-family:var(--fuente-titulo);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--tx-suave);
}

/* Listas numeradas: el numero va escrito en el HTML, no lo calcula el CSS. */
.lista-num{list-style:none;margin:0;padding:0}
.lista-num li{
  display:flex;align-items:baseline;gap:10px;
  padding:6px 0;
  font-size:14px;
  color:var(--tx-medio);
}
.lista-num li + li{border-top:1px solid var(--linea)}
.lista-num .n{
  flex:0 0 auto;width:22px;
  font-family:var(--fuente-titulo);
  font-size:11.5px;font-weight:700;
  color:var(--tx-suave);
  font-variant-numeric:tabular-nums;
}
.lista-num .mas{color:var(--tx-suave)}

.fila-dato{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;
  border-top:1px solid var(--linea);
  font-size:14px;color:var(--tx-medio);
}
.fila-dato strong{color:var(--tx);font-weight:650}

.metrica{
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--r-grande);
  padding:20px;
}
.metrica .etq{
  font-family:var(--fuente-titulo);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--vio-claro);font-weight:600;
}
.metrica .val{
  font-family:var(--fuente-titulo);
  font-size:34px;font-weight:700;letter-spacing:-.02em;
  margin-top:6px;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.metrica .sub{font-size:12px;color:var(--tx-suave);margin-top:3px}

/* ---------- 7. CHIPS DE ESTADO ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;
  border:1px solid var(--linea);
  border-radius:999px;
  background:var(--panel);
  font-size:12.5px;font-weight:600;
  color:var(--tx-medio);
  white-space:nowrap;
}
.chip.vio{color:var(--vio-claro);border-color:var(--linea-viva);background:var(--vio-tenue)}
.chip.verde{color:var(--verde);border-color:var(--verde);background:color-mix(in srgb,var(--verde) 14%,transparent)}
.chip.ambar{color:var(--ambar);border-color:var(--ambar);background:color-mix(in srgb,var(--ambar) 14%,transparent)}
.chip.rojo{color:var(--rojo);border-color:var(--rojo);background:color-mix(in srgb,var(--rojo) 14%,transparent)}
.chip.celeste{color:var(--celeste);border-color:var(--celeste);background:color-mix(in srgb,var(--celeste) 14%,transparent)}
.chip.gris{color:var(--tx-suave)}
.chip.publicado{
  font-family:var(--fuente-titulo);
  letter-spacing:.08em;font-size:11px;font-weight:700;
  color:#fff;background:var(--vio);border-color:var(--vio);
}
.chip.borrador{
  font-family:var(--fuente-titulo);
  letter-spacing:.08em;font-size:11px;font-weight:700;
  color:var(--tx-suave);
}

/* ---------- 8. BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;
  border:1px solid var(--linea);
  border-radius:11px;
  background:var(--panel);
  color:var(--tx-medio);
  font-size:14.5px;font-weight:650;
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background-color .16s ease;
}
.btn:hover{color:var(--tx);border-color:var(--linea-viva);text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-vio{background:var(--vio);border-color:var(--vio);color:#fff}
.btn-vio:hover{color:#fff;border-color:var(--vio);background:var(--vio)}
.btn-verde{background:var(--verde);border-color:var(--verde);color:#06240F}
html[data-tema="claro"] .btn-verde{color:#fff}
.btn-verde:hover{color:#06240F;border-color:var(--verde)}
html[data-tema="claro"] .btn-verde:hover{color:#fff}
.btn-rojo{background:var(--rojo);border-color:var(--rojo);color:#2B0808}
html[data-tema="claro"] .btn-rojo{color:#fff}
.btn-rojo:hover{color:#2B0808;border-color:var(--rojo)}
html[data-tema="claro"] .btn-rojo:hover{color:#fff}
.btn-discord{background:var(--discord);border-color:var(--discord);color:#fff}
.btn-discord:hover{color:#fff;border-color:var(--discord)}
.btn-ancho{width:100%}
.btn-chico{padding:7px 13px;font-size:13px}
.btn-cuadrado{padding:8px 11px;font-size:14px}

/* ---------- 9. LOGIN ---------- */
.pantalla-centro{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:30px 18px}
.caja-login{width:100%;max-width:430px;text-align:center}
.caja-login .titulo{
  font-family:var(--fuente-titulo);
  font-size:clamp(2rem,7vw,2.9rem);
  font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
  margin:16px 0 10px;line-height:1.05;
}
.caja-login .bajada{color:var(--tx-medio);font-size:15px;margin:0 0 26px}
.caja-login .tarjeta{text-align:left;padding:22px}
.caja-login h2{
  font-family:var(--fuente-titulo);
  margin:0 0 5px;font-size:17px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;
}
.caja-login .ayuda{color:var(--tx-medio);font-size:14px;margin:0 0 18px}
.pie-login{margin-top:20px;font-size:13px;color:var(--tx-suave)}

/* ---------- 10. FORMULARIOS ---------- */
.campo{
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:15px;
  background:var(--panel-alto);
}
.campo + .campo{margin-top:12px}
.campo > label.etiqueta{display:block;font-size:14px;font-weight:650;margin-bottom:9px}
.obligatorio{color:var(--rojo);margin-left:3px}
.campo .pista{font-size:13px;color:var(--tx-suave);margin-bottom:9px}

input[type="text"],input[type="number"],input[type="date"],input[type="url"],select,textarea{
  width:100%;
  background:var(--bg-alto);
  border:1px solid var(--linea);
  border-radius:var(--r-chico);
  padding:10px 12px;
  font-size:14.5px;
  color:var(--tx);
  outline:none;
  transition:border-color .16s ease;
}
textarea{min-height:100px;resize:vertical;line-height:1.55}
input:hover,select:hover,textarea:hover{border-color:var(--linea-viva)}
input:focus,select:focus,textarea:focus{border-color:var(--vio)}
input.invalido,textarea.invalido,select.invalido{border-color:var(--rojo)}

.contador{
  text-align:right;
  font-family:var(--fuente-titulo);
  font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--tx-suave);margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.opciones{display:flex;flex-direction:column;gap:8px}
.opcion{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--tx-medio);cursor:pointer}
.opcion input{accent-color:var(--vio);width:16px;height:16px}

/* Sin JS se ven todos los pasos, uno abajo del otro. Con JS, de a uno. */
.paso + .paso{margin-top:26px;padding-top:22px;border-top:1px solid var(--linea)}
body.js-ok .paso{display:none}
body.js-ok .paso.activa{display:block;animation:aparecer .2s ease-out}
body.js-ok .paso:not(.activa){content-visibility:hidden}
@keyframes aparecer{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

.paso-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.paso-cab .nombre{
  font-family:var(--fuente-titulo);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vio-claro);
}
.paso-cab .cuenta{
  font-family:var(--fuente-titulo);
  font-size:11.5px;font-weight:600;letter-spacing:.1em;
  color:var(--tx-suave);
}
.progreso{display:flex;gap:6px;margin-bottom:22px}
.progreso span{height:4px;flex:1;border-radius:999px;background:var(--linea)}
.progreso span.lleno{background:var(--vio)}
body:not(.js-ok) .progreso{display:none}

.nav-pasos{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
body:not(.js-ok) #btn-anterior,
body:not(.js-ok) #btn-siguiente{display:none}

/* AVISOS — el color va SOLO en el borde de toda la caja y en el titulo.
   Adentro no se cambia nada: ni el fondo ni el color de la letra.
   Vale tambien para cualquier aviso que se agregue despues. */
.aviso{
  border:1px solid var(--vio);
  border-radius:var(--r);
  background:var(--panel);
  padding:14px 16px;
  margin:16px 0;
}
.aviso .titulo-aviso{
  font-family:var(--fuente-titulo);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vio-claro);font-weight:600;
  margin-bottom:4px;
}
.aviso p{margin:0;color:var(--tx-medio);font-size:14.5px}
.aviso p strong{color:var(--tx)}
.aviso.peligro{border-color:var(--rojo)}
.aviso.peligro .titulo-aviso{color:var(--rojo)}
.aviso.ok{border-color:var(--verde)}
.aviso.ok .titulo-aviso{color:var(--verde)}
.aviso.dato{border-color:var(--ambar)}
.aviso.dato .titulo-aviso{color:var(--ambar)}

.vacio{
  text-align:center;
  padding:44px 20px;
  color:var(--tx-suave);
  border:1px dashed var(--linea);
  border-radius:var(--r);
  font-size:14.5px;
}

/* ---------- 11. LISTAS Y TABLAS ---------- */
.lista{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.lista-fila{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;
  border-bottom:1px solid var(--linea);
  transition:background-color .12s ease;
}
.lista-fila:last-child{border-bottom:0}
.lista-fila:hover{background:var(--panel-alto);text-decoration:none}
.lista-fila img.av{width:34px;height:34px;border-radius:50%;flex:0 0 34px}
.lista-fila .cuerpo{flex:1;min-width:0}
.lista-fila .t1{font-size:14.5px;font-weight:650;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-fila .t2{font-size:12.5px;color:var(--tx-suave)}
.lista-fila .derecha{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--tx-suave);flex-wrap:wrap;justify-content:flex-end}
.enlace-ver{color:var(--vio-claro);font-size:13px;font-weight:650}

.envoltorio-tabla{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r);-webkit-overflow-scrolling:touch}
table.tabla{width:100%;border-collapse:collapse;font-size:14.5px;min-width:660px}
table.tabla th{
  font-family:var(--fuente-titulo);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-suave);background:var(--panel-alto);font-weight:600;
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--linea);white-space:nowrap;
}
table.tabla th[data-orden]{user-select:none}
table.tabla th[data-orden]:hover{color:var(--tx)}
table.tabla th[data-activo]{color:var(--vio-claro)}
table.tabla td{padding:12px 14px;border-bottom:1px solid var(--linea);color:var(--tx-medio)}
table.tabla tr:last-child td{border-bottom:0}
table.tabla td strong{color:var(--tx);font-weight:650}
.acciones-fila{display:flex;gap:6px}

/* ---------- 12. RESPUESTA ---------- */
.qa{border-top:1px solid var(--linea);padding:14px 0}
.qa .p{font-size:12.5px;color:var(--tx-suave);margin-bottom:4px}
.qa .r{font-size:14.5px;white-space:pre-wrap;word-break:break-word}

/* ---------- 13. ARMADOR ---------- */
.bloque-seccion{
  border:1px solid var(--linea-viva);
  border-radius:var(--r);
  padding:16px;
  background:var(--panel);
}
.bloque-seccion + .bloque-seccion{margin-top:14px}
.bloque-campo{border:1px solid var(--linea);border-radius:var(--r-chico);padding:12px;background:var(--panel-alto)}
.bloque-campo + .bloque-campo{margin-top:10px}
.fila-controles{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fila-controles > *{min-width:0}
.grilla-campo{display:grid;grid-template-columns:1.5fr 1fr .6fr auto;gap:8px;align-items:center}
.linea-lista{display:flex;gap:8px;margin-bottom:8px}

/* ---------- 14. CONFIGURACION ---------- */
.grilla-colores{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.chip-color{
  display:flex;align-items:center;gap:9px;
  padding:10px 11px;
  border:1px solid var(--linea);
  border-radius:var(--r-chico);
  background:var(--panel-alto);
  font-size:12.5px;font-weight:600;color:var(--tx-medio);
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}
.chip-color:hover{border-color:var(--linea-viva);color:var(--tx)}
.chip-color.elegido{border-color:var(--vio);color:var(--tx)}
.chip-color .punto{width:16px;height:16px;border-radius:5px;flex:0 0 16px}
input[type="color"]{width:46px;height:38px;padding:2px;border-radius:var(--r-chico);border:1px solid var(--linea);background:var(--bg-alto);cursor:pointer}

details.desplegable{
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:var(--panel);
  margin:12px 0;
  overflow:hidden;
}
details.desplegable > summary{
  padding:14px 16px;
  font-weight:650;font-size:15px;
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px;
}
details.desplegable > summary::-webkit-details-marker{display:none}
details.desplegable > summary::before{
  content:"+";
  font-family:var(--fuente-titulo);
  color:var(--vio-claro);font-size:17px;width:14px;
}
details.desplegable[open] > summary::before{content:"–"}
.cuerpo-desp{padding:0 16px 16px}

.previa-embed{
  border-left:4px solid var(--discord);
  border-radius:6px;
  background:#2B2D31;
  color:#DBDEE1;
  padding:13px 15px;
  font-size:14px;
}
.previa-embed .t{font-weight:650;color:#fff;margin-bottom:5px}
.previa-embed .d{white-space:pre-wrap}
.previa-embed .f{font-size:12px;color:#B5BAC1;margin-top:9px}
.variables{font-size:12.5px;color:var(--tx-suave);margin-top:10px}
.variables code{
  background:var(--panel-alto);
  border:1px solid var(--linea);
  border-radius:5px;
  padding:1px 6px;
  color:var(--vio-claro);
  font-size:12px;
}

/* ---------- 15. GRAFICOS ---------- */
.grafico{width:100%;height:auto;display:block}
.leyenda{display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--tx-medio)}
.leyenda div{display:flex;align-items:center;gap:9px}
.leyenda .punto{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.barra-h{height:8px;border-radius:999px;background:var(--linea);overflow:hidden;margin-top:7px}
.barra-h > i{display:block;height:100%;background:var(--vio);border-radius:999px}
.fila-ranking{padding:11px 0;border-top:1px solid var(--linea)}
.fila-ranking:first-child{border-top:0}

/* ---------- 16. AVISO FLOTANTE ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;
  transform:translateX(-50%);
  background:var(--bg-alto);
  border:1px solid var(--linea-viva);
  border-radius:var(--r);
  padding:12px 18px;
  font-size:14px;
  z-index:60;max-width:90vw;
}
.toast.ok{border-color:var(--verde)}
.toast.error{border-color:var(--rojo)}

/* ---------- 17. CELULAR: la navegacion pasa a una barra fija abajo ---------- */
.nav-movil{display:none}

@media (max-width:900px){
  .app{display:block}
  .lateral{
    position:static;width:auto;height:auto;
    border-right:0;border-bottom:1px solid var(--linea);
    flex-direction:row;align-items:center;gap:10px;
    padding:0 14px;
  }
  .lateral .marca{border-bottom:0;padding:12px 0;margin-right:auto;min-width:0}
  .lateral .menu{display:none}
  .lateral .menu-titulo{display:none}
  .lateral .relleno{display:none}
  .lateral-pie{
    border-top:0;padding:0;
    flex-direction:row;align-items:center;gap:8px;flex:0 0 auto;
  }
  .lateral-pie .menu{display:none}
  .usuario-chip{border:0;background:none;padding:0}
  .usuario-chip .nom,.usuario-chip .rol,.usuario-chip .insignia-admin{display:none}
  .principal{padding:18px 16px calc(var(--barra) + 34px)}
  .cabecera{padding:18px}
  .grilla-campo{grid-template-columns:1fr 1fr}
  .nav-pasos{flex-direction:column-reverse}
  .nav-pasos .btn{width:100%}

  .nav-movil{
    position:fixed;left:0;right:0;bottom:0;
    z-index:50;
    display:grid;
    background:rgba(5,5,5,.94);
    backdrop-filter:blur(14px);          /* el UNICO blur del sitio */
    -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--linea);
    padding-bottom:env(safe-area-inset-bottom);
  }
  html[data-tema="claro"] .nav-movil{background:rgba(244,243,248,.96)}
  .nav-movil a{
    padding:9px 4px 8px;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:10.5px;font-weight:600;letter-spacing:.02em;
    color:var(--tx-suave);
  }
  .nav-movil a:hover{text-decoration:none}
  .nav-movil a .ic{font-size:17px;line-height:1}
  .nav-movil a.activo{color:var(--vio-claro)}
  .nav-movil[data-items="2"]{grid-template-columns:repeat(2,1fr)}
  .nav-movil[data-items="3"]{grid-template-columns:repeat(3,1fr)}
  .nav-movil[data-items="5"]{grid-template-columns:repeat(5,1fr)}
  .nav-movil[data-items="6"]{grid-template-columns:repeat(6,1fr)}
  .nav-movil[data-items="7"]{grid-template-columns:repeat(7,1fr)}
  .nav-movil[data-items="7"] a{font-size:9px;padding-left:1px;padding-right:1px}
  .nav-movil[data-items="6"] a{font-size:9.5px;padding-left:2px;padding-right:2px}
  .nav-movil a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
}

/* ---------- 18. RESPETAR PREFERENCIAS ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .particulas{display:none}
}

/* ---------- 19. IMPRESION ---------- */
@media print{
  .lateral,.nav-movil,.particulas,.toast{display:none !important}
  body{background:#fff;color:#000}
  body.js-ok .paso{display:block !important}
  .tarjeta,.aviso,.campo{break-inside:avoid}
}