/* VELTHARIA Panel · v6. Sistema Geist de Vercel (colores, tipografía y medidas oficiales), oscuro y claro.
   Casi todo es gris zinc; el violeta de la marca aparece solo como brillo: foco, sección activa, borde que sigue
   al cursor y el resplandor de la cabecera. Verde / ámbar / rojo / cian solo para estados. Sin recursos externos. */
@font-face{font-family:"Geist";src:url(/fuentes/geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fuentes/geist-mono.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Colores: escala oficial de Geist (vercel.com/geist/colors). 100-300 fondos de componente, 400-600 bordes,
   900 texto secundario, 1000 texto principal. El color solo significa estado: azul foco, verde, ámbar y rojo. */
:root{
  color-scheme:dark;
  --lienzo:oklch(0 0 0); --fondo:oklch(0 0 0); --superficie:oklch(0.145 0 0); --alta:oklch(0.218 0 0); --hundido:oklch(0.218 0 0);
  --campo:oklch(0 0 0);
  --borde:oklch(1 0 0 / .13); --borde-fuerte:oklch(1 0 0 / .2); --borde-hover:oklch(1 0 0 / .4);
  --texto:oklch(0.946 0 0); --suave:oklch(0.706 0 0); --tenue:oklch(0.59 0 0);
  --hover:oklch(1 0 0 / .07); --activo:oklch(1 0 0 / .11); --brillo:#fff; --shimmer-color:rgba(255,255,255,.11);
  --foco:oklch(71.7% 0.1648 250.794); --foco-anillo:oklch(57.61% 0.2321 258.23 / .45);
  --btn-fondo:oklch(0.946 0 0); --btn-texto:oklch(0 0 0); --btn-hover:oklch(0.82 0 0);
  --ok:oklch(73.1% 0.2158 148.29); --ok-fondo:oklch(23.09% 0.0716 149.68);
  --aviso:oklch(77.21% 0.1991 64.28); --aviso-fondo:oklch(22.46% 0.0538 76.04);
  --peligro:oklch(69.96% 0.2136 22.03); --peligro-fondo:oklch(22.1% 0.0657 15.11);
  --info:oklch(71.7% 0.1648 250.794); --info-fondo:oklch(22.17% 0.069 259.89);
  --oro:var(--aviso);
  --sombra:none; --sombra-alta:0 0 0 1px oklch(1 0 0 / .14),0 24px 48px oklch(0 0 0 / .7);
  /* Nombres antiguos: ya no hay color de marca en la interfaz, todo apunta a los grises */
  --marca:var(--texto); --marca-anillo:var(--borde-fuerte); --marca-glow:transparent; --marca-tinte:var(--hover); --marca-halo:transparent; --trama:transparent;
  --luz:var(--texto); --plata:var(--suave); --lavanda:var(--texto); --amatista:var(--texto); --tarjeta:var(--alta);
  --radio:12px; --radio-control:6px; --alto-control:36px; --ancho-lateral:248px;
  --curva:cubic-bezier(.2,.7,.2,1); --mov:.15s ease;
  interpolate-size:allow-keywords;
}
html[data-tema=claro]{
  color-scheme:light;
  --lienzo:oklch(0.984 0 0); --fondo:oklch(1 0 0); --superficie:oklch(1 0 0); --alta:oklch(1 0 0); --hundido:oklch(0.961 0 0);
  --campo:oklch(1 0 0);
  --borde:oklch(0 0 0 / .1); --borde-fuerte:oklch(0 0 0 / .16); --borde-hover:oklch(0 0 0 / .4);
  --texto:oklch(0.205 0 0); --suave:oklch(0.42 0 0); --tenue:oklch(0.59 0 0);
  --hover:oklch(0 0 0 / .05); --activo:oklch(0 0 0 / .081); --brillo:oklch(0.205 0 0); --shimmer-color:rgba(9,9,11,.06);
  --foco:oklch(57.61% 0.2508 258.23); --foco-anillo:oklch(57.61% 0.2508 258.23 / .3);
  --btn-fondo:oklch(0.205 0 0); --btn-texto:oklch(1 0 0); --btn-hover:oklch(0.32 0 0);
  --ok:oklch(51.75% 0.1453 147.65); --ok-fondo:oklch(97.59% 0.0289 145.42);
  --aviso:oklch(52.79% 0.1496 54.65); --aviso-fondo:oklch(97.48% 0.0331 85.79);
  --peligro:oklch(54.99% 0.232 25.29); --peligro-fondo:oklch(96.5% 0.0223 13.09);
  --info:oklch(53.18% 0.2399 256.99); --info-fondo:oklch(97.32% 0.0141 251.56);
  --sombra:0 1px 2px oklch(0 0 0 / .04); --sombra-alta:0 0 0 1px oklch(0 0 0 / .08),0 24px 48px oklch(0 0 0 / .14);
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font:14px/1.5 "Geist","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--texto); background:var(--lienzo); min-height:100vh;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
/* Trama de líneas finas sobre el lienzo, como en la referencia */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--trama) 0 1px,transparent 1px 96px),repeating-linear-gradient(0deg,var(--trama) 0 1px,transparent 1px 96px)}
a{color:var(--texto);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline;text-decoration-color:var(--borde-hover)}
.principal p a,.ayuda a{text-decoration:underline;text-decoration-color:var(--borde-hover)}
code,.mono{font-family:"Geist Mono","Cascadia Code",Consolas,ui-monospace,monospace;font-size:.84em;color:var(--suave)}
h1,h2,h3{line-height:1.25;margin:0 0 .6rem;font-family:"Geist","Segoe UI",system-ui,sans-serif;color:var(--texto)}
h1{font-size:1.5rem;font-weight:600;letter-spacing:-.04em}
h2{font-size:1rem;font-weight:600;letter-spacing:-.02em}
h3{font-size:.875rem;font-weight:600;letter-spacing:-.01em}
p{margin:.3rem 0 .8rem}
::selection{background:var(--marca-anillo)}
*{scrollbar-width:thin;scrollbar-color:var(--borde-fuerte) transparent}
.icono{display:block;flex:none}
kbd{font:600 .68rem "Segoe UI",system-ui,sans-serif;padding:1px 6px;border:1px solid var(--borde-fuerte);border-radius:5px;color:var(--tenue);white-space:nowrap}

/* ── Estructura: menú sobre el lienzo y el contenido en una hoja ─────────── */
.app{display:grid;grid-template-columns:var(--ancho-lateral) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .28s var(--curva)}
.lateral{position:sticky;top:0;height:100vh;padding:16px 12px 12px;display:flex;flex-direction:column;gap:12px;overflow:hidden;view-transition-name:lateral}
.lateral-cabeza{display:flex;align-items:center;gap:6px}
.marca{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:4px 8px;color:var(--texto);font-weight:600;letter-spacing:-.01em;font-size:.875rem;text-decoration:none}
.marca img{width:28px;height:28px;flex:none}
.marca span,.nav .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca small{display:block;font-weight:500;letter-spacing:0;color:var(--tenue);font-size:.72rem}
.plegar{display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;border-radius:8px;background:transparent;color:var(--tenue);cursor:pointer;transition:background var(--mov),color var(--mov)}
.plegar:hover{background:var(--hover);color:var(--texto)}
.plegar svg{transition:transform .28s var(--curva)}
.buscar-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border:1px solid var(--borde);border-radius:var(--radio-control);background:var(--campo);
  color:var(--tenue);font:inherit;font-size:.86rem;cursor:pointer;box-shadow:var(--sombra);transition:border-color var(--mov),color var(--mov)}
.buscar-btn:hover{border-color:var(--borde-fuerte);color:var(--texto)}
.buscar-btn .txt{flex:1;text-align:left}
.nav{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -12px;padding:2px 12px}
.grupo-nav{display:flex;flex-direction:column;gap:1px}
.grupo-titulo{font-size:.74rem;font-weight:550;color:var(--tenue);padding:0 8px 6px}
.nav a{position:relative;display:flex;align-items:center;gap:10px;min-height:34px;padding:0 8px;border-radius:6px;color:var(--suave);font-weight:450;font-size:.875rem;text-decoration:none;
  transition:background var(--mov),color var(--mov)}
.nav a:hover{background:var(--hover);color:var(--texto)}
.nav .ico{display:grid;place-items:center;width:20px;flex:none;color:var(--tenue);transition:color var(--mov)}
.nav a:hover .ico{color:var(--texto)}
.nav a[aria-current=page]{background:var(--activo);color:var(--texto);view-transition-name:nav-activa}
.nav a[aria-current=page] .ico{color:var(--texto)}
/* Indicador de la sección activa: una barrita encendida al borde del menú */

.lateral-pie{display:flex;align-items:center;gap:6px;padding-top:10px;border-top:1px solid var(--borde)}
.lateral-pie form{flex:1;min-width:0}
.btn.salir{gap:8px}
.tema-btn .luna{display:none}
html[data-tema=claro] .tema-btn .sol{display:none}
html[data-tema=claro] .tema-btn .luna{display:block}

.principal{position:relative;margin:0;min-width:0;min-height:100vh;border-left:1px solid var(--borde);
  padding:30px max(clamp(16px,3vw,40px),calc((100% - 1200px) / 2)) 56px;
  background:var(--fondo)}
.cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--borde)}
.cabecera h1{margin-bottom:3px}
.cabecera p{color:var(--suave);margin:0;max-width:78ch}
.cabecera-acciones{display:flex;gap:8px;flex-wrap:wrap}

/* ── Tarjetas: borde fino; al pasar el cursor el borde se enciende donde está ── */
.tarjeta{--mx:50%;--my:-60px;position:relative;min-width:0;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);padding:20px 22px;box-shadow:var(--sombra)}
/* Brillo de las tarjetas: al pasar el cursor, un destello blanco recorre el borde de izquierda a derecha
   y remata con un brillo al llegar al final. Siempre en ese sentido, entre el cursor por donde entre. */
/* Shimmer Sweep, portado del componente «shimmer-sweep» del registro de HyperFrames: una banda de luz en
   diagonal (120deg, 20 % de ancho) cruza la tarjeta de izquierda a derecha, de -20 % a 120 %, en 1.2 s con la
   curva power2.inOut. Allí la mueve GSAP; aquí, una propiedad registrada (@property) animada con CSS. */
@property --shimmer-pos{syntax:"<percentage>";inherits:false;initial-value:-20%}
.tarjeta::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  --shimmer-width:20%;--shimmer-angle:120deg;
  background:linear-gradient(var(--shimmer-angle),transparent 0%,transparent calc(var(--shimmer-pos) - var(--shimmer-width) / 2),
    var(--shimmer-color) var(--shimmer-pos),transparent calc(var(--shimmer-pos) + var(--shimmer-width) / 2),transparent 100%)}
.tarjeta:hover::after{animation:shimmer-sweep 1.2s cubic-bezier(.45,0,.55,1) both}
@keyframes shimmer-sweep{from{--shimmer-pos:-20%}to{--shimmer-pos:120%}}
.tarjeta::before{content:"";position:absolute;inset:-1px;z-index:2;padding:1px;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent 0%,var(--brillo) 50%,transparent 100%) no-repeat;background-size:42% 100%;background-position:-75% 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tarjeta:hover::before{animation:barrido 1.5s ease-in-out both}
@keyframes barrido{
  0%{opacity:0;background-position:-75% 0}
  12%{opacity:1}
  60%{opacity:1;background-position:100% 0;filter:none}
  76%{opacity:1;background-position:100% 0;filter:brightness(2) drop-shadow(0 0 9px var(--brillo))}
  100%{opacity:0;background-position:100% 0;filter:none}
}
.tarjeta > *{position:relative;z-index:1}
.tarjeta + .tarjeta{margin-top:16px}
.tarjeta > h2{margin-bottom:14px}
.rejilla{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:16px;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:var(--superficie)}
.rejilla > .tarjeta + .tarjeta,.dos > .tarjeta + .tarjeta,.editor-anuncio > .tarjeta + .tarjeta{margin-top:0}
.dos{display:grid;gap:16px;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
.dos + .tarjeta,.dos + .dos,.tarjeta + .dos{margin-top:16px}

/* Cifras */
.rejilla > .cifra{border:0;border-radius:0;background:transparent;box-shadow:1px 0 0 var(--borde),0 1px 0 var(--borde)}
.rejilla > .cifra::after,.rejilla > .cifra::before{display:none}
.cifra{padding:18px 20px}
.rejilla > .cifra:nth-child(5n+2){--tono:var(--oro)}
.rejilla > .cifra:nth-child(5n+3){--tono:var(--info)}
.rejilla > .cifra:nth-child(5n+4){--tono:var(--ok)}
.rejilla > .cifra:nth-child(5n+5){--tono:var(--peligro)}
.cifra .etq{color:var(--suave);font-size:.8125rem;font-weight:400}

.cifra .num{font:600 2rem/1.25 "Geist","Segoe UI",system-ui,sans-serif;letter-spacing:-.04em;margin-top:6px;width:max-content;font-variant-numeric:tabular-nums}
.cifra .sub{color:var(--tenue);font-size:.8rem;margin-top:3px}
.num.cambia{animation:cambia .9s var(--curva)}
@keyframes cambia{0%{color:var(--info);transform:translateY(-3px)}100%{transform:none}}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.tabla-caja{overflow-x:auto;margin:0 -22px;padding:0 22px}
table{width:100%;border-collapse:collapse;font-size:.89rem}
th{text-align:left;color:var(--suave);font-weight:400;font-size:.8125rem;padding:9px 10px;border-bottom:1px solid var(--borde-fuerte);white-space:nowrap}
td{padding:12px 10px;border-bottom:1px solid var(--borde);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--mov)}
tbody tr:hover{background:var(--hover)}
td.acciones{white-space:nowrap;text-align:right}
td.acciones > form,td.acciones > details,td.acciones > a{display:inline-block;vertical-align:middle;margin-left:6px}
td.acciones > details[open]{display:block;margin:8px 0 0;text-align:left}
.vacio{padding:34px 20px;text-align:center;color:var(--tenue)}
p.vacio{margin:0}
.usuario{display:inline-flex;flex-direction:column;line-height:1.3}
.usuario a{text-decoration:none}
.usuario a:hover b{text-decoration:underline;text-decoration-color:var(--marca);text-underline-offset:3px}
.usuario b{font-weight:600;color:var(--texto)}
.usuario code{font-size:.74rem;color:var(--tenue)}
.texto-largo{white-space:pre-wrap;word-break:break-word;max-width:60ch}
/* Ranking: los tres primeros puestos */
table.podio tbody td:first-child{font-weight:700}
table.podio tbody tr:nth-child(1) td:first-child{color:var(--oro)}
table.podio tbody tr:nth-child(2) td:first-child{color:var(--suave)}
table.podio tbody tr:nth-child(3) td:first-child{color:#c2703f}


/* ── Insignias ──────────────────────────────────────────────────────────── */
.ins{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:.75rem;font-weight:500;white-space:nowrap;color:var(--c,var(--texto));background:var(--f,var(--activo))}
.ins.amatista{--c:var(--info);--f:var(--info-fondo)}
.ins.plata{--c:var(--suave)}
.ins.ok{--c:var(--ok);--f:var(--ok-fondo)}
.ins.aviso{--c:var(--aviso);--f:var(--aviso-fondo)}
.ins.peligro{--c:var(--peligro);--f:var(--peligro-fondo)}
.tachado{text-decoration:line-through;opacity:.55}

/* ── Formularios ────────────────────────────────────────────────────────── */
label{display:block;font-size:.8125rem;color:var(--suave);margin:0 0 6px;font-weight:400}
input,select,textarea{width:100%;min-height:var(--alto-control);font:inherit;color:var(--texto);background-color:var(--campo);
  border:1px solid var(--borde-fuerte);border-radius:var(--radio-control);padding:6px 11px;outline:none;box-shadow:var(--sombra);
  transition:border-color var(--mov),box-shadow var(--mov)}
input::placeholder,textarea::placeholder{color:var(--tenue)}
input:hover,select:hover,textarea:hover{border-color:var(--borde-hover)}
textarea{min-height:120px;resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--tenue) 50%),linear-gradient(135deg,var(--tenue) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
option,optgroup{background:var(--alta);color:var(--texto)}
input:focus,select:focus,textarea:focus{border-color:var(--foco);box-shadow:0 0 0 3px var(--foco-anillo)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;padding:0;margin-right:6px;accent-color:var(--texto);vertical-align:-2px;box-shadow:none}
input[type=color]{padding:3px;width:52px}
input[type=file]{padding:5px}
.campo{margin-bottom:14px}
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.filtros .campo{margin:0;flex:1 1 160px;min-width:0}
.filtros .campo.ancho{flex:2 1 240px}
.filtros > .btn{flex:none}
.en-linea{display:flex;gap:8px;align-items:center}
.en-linea input{min-width:0}
.ayuda{color:var(--suave);font-size:.8rem;margin-top:5px;line-height:1.45}
p.ayuda{margin:0 0 12px}
input.corto{width:5.5em}

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--alto-control);font:inherit;font-weight:500;font-size:.875rem;
  cursor:pointer;border-radius:var(--radio-control);padding:0 14px;border:1px solid transparent;color:var(--btn-texto);background:var(--btn-fondo);
  white-space:nowrap;text-decoration:none;box-shadow:var(--sombra);
  transition:background var(--mov),border-color var(--mov),color var(--mov),box-shadow var(--mov),transform var(--mov)}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:scale(.98)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,.plegar:focus-visible,.buscar-btn:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:6px}
.btn:focus-visible{border-radius:var(--radio-control)}
.btn .icono{width:16px;height:16px}
.btn.sec{background:var(--campo);border-color:var(--borde-fuerte);color:var(--texto)}
.btn.sec:hover{background:var(--hover);border-color:var(--borde-fuerte)}
.btn.peligro{background:var(--peligro-fondo);border-color:transparent;color:var(--peligro);box-shadow:none}
.btn.peligro:hover{background:var(--peligro-fondo);border-color:var(--peligro)}
.btn.peq{min-height:32px;padding:0 10px;font-size:.8125rem;border-radius:6px}
.btn.bloque{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.aviso{--c:var(--suave);--f:var(--hundido);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-weight:450;color:var(--c);background:var(--f)}
.aviso.ok{--c:var(--ok);--f:var(--ok-fondo)}
.aviso.error{--c:var(--peligro);--f:var(--peligro-fondo)}
.aviso[role=status]{animation:sube .4s var(--curva) both}

/* ── Detalle ────────────────────────────────────────────────────────────── */
dl.datos{display:grid;grid-template-columns:max-content 1fr;gap:10px 20px;margin:0}
dl.datos dt{color:var(--suave);font-size:.86rem}
dl.datos dd{margin:0;min-width:0;overflow-wrap:anywhere}
.respuesta{border-left:2px solid var(--borde-fuerte);padding:2px 0 2px 14px;margin:0 0 16px}
.respuesta h3{font-size:.82rem;color:var(--suave);margin-bottom:4px;font-weight:600}
details.desplegable summary{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid var(--borde-fuerte);border-radius:7px;background:var(--campo);
  cursor:pointer;color:var(--texto);font-size:.82rem;font-weight:600;list-style:none;box-shadow:var(--sombra);transition:background var(--mov),border-color var(--mov)}
details.desplegable summary::-webkit-details-marker{display:none}
details.desplegable summary::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--tenue);border-bottom:1.5px solid var(--tenue);transform:rotate(45deg) translateY(-2px);transition:transform var(--mov)}
details.desplegable[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
details.desplegable summary:hover{background:var(--hover)}
details.desplegable[open] summary{margin-bottom:10px;border-color:var(--borde-hover)}
details.desplegable form{min-width:260px;padding:14px;border:1px solid var(--borde);border-radius:10px;background:var(--hundido);white-space:normal}
details.desplegable::details-content{height:0;opacity:0;overflow:clip;transition:height .28s var(--curva),opacity .2s ease,content-visibility .28s allow-discrete}
details.desplegable[open]::details-content{height:auto;opacity:1}

/* Pestañas: control segmentado */
.pestanas{display:inline-flex;gap:2px;flex-wrap:wrap;align-items:center;margin-bottom:16px;padding:3px;border-radius:10px;background:var(--hundido);max-width:100%}
.pestanas a{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:7px;color:var(--suave);font-size:.86rem;font-weight:600;text-decoration:none;transition:background var(--mov),color var(--mov)}
.pestanas a:hover{color:var(--texto)}
.pestanas a[aria-current=page]{background:var(--fondo);color:var(--texto);box-shadow:0 0 0 1px var(--borde)}
.pestanas .ayuda{margin:0;padding:0 10px}
.paginas{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;color:var(--suave);font-size:.85rem}

/* ── Gráfico ────────────────────────────────────────────────────────────── */
.grafico svg{width:100%;height:auto;display:block}
.grafico .eje{stroke:var(--borde-fuerte)}
.grafico .rejilla-g{stroke:var(--borde)}
.grafico text{fill:var(--tenue);font-size:11px;font-family:inherit}
.grafico .entran{fill:var(--texto)}
.grafico .salen{fill:var(--tenue)}
.leyenda{display:flex;gap:16px;color:var(--suave);font-size:.82rem;margin-bottom:8px}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.leyenda .entran{background:var(--texto)}
.leyenda .salen{background:var(--tenue)}

/* ── Tiempo real ────────────────────────────────────────────────────────── */
.en-vivo{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--tenue);padding:0 8px;width:max-content}
.en-vivo i{width:7px;height:7px;border-radius:50%;background:var(--tenue)}
.en-vivo[data-conexion=on]{color:var(--ok)}
.en-vivo[data-conexion=on] i{background:var(--ok);animation:latido 2s infinite}
@keyframes latido{50%{opacity:.45}}
.hay-cambios{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 14px;margin-bottom:16px;border-radius:8px;background:var(--info-fondo);color:var(--info);font-weight:450}
.hay-cambios[hidden]{display:none}
.hay-cambios:not([hidden]){animation:sube .35s var(--curva) both}
main.refrescado{animation:destello .6s ease-out}
@keyframes destello{from{opacity:.7}to{opacity:1}}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:520px;overflow:auto}
.feed li{--tono:var(--tenue);position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:9px 8px 9px 20px;border-bottom:1px solid var(--borde);font-size:.89rem}
.feed li:last-child{border-bottom:0}
.feed li::before{content:"";position:absolute;left:5px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--tono)}
.feed li time{color:var(--tenue);font-size:.78rem;padding-top:1px}
.feed li.ok{--tono:var(--ok)}.feed li.aviso{--tono:var(--aviso)}.feed li.peligro{--tono:var(--peligro)}.feed li.info{--tono:var(--info)}
.feed li.nuevo{animation:entra .5s ease-out;background:var(--marca-tinte)}
.feed li.vacio{display:block;border:0;padding:34px 20px}
.feed li.vacio::before{display:none}
@keyframes entra{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:50;max-width:min(380px,calc(100vw - 36px))}
.toast{--c:var(--tenue);display:block;padding:11px 14px 11px 30px;position:relative;border-radius:10px;background:var(--alta);border:1px solid var(--borde-fuerte);color:var(--texto);font-size:.88rem;text-decoration:none;
  box-shadow:var(--sombra-alta);transition:opacity .5s,transform .5s;animation:toast-entra .32s var(--curva) both}
.toast::before{content:"";position:absolute;left:13px;top:18px;width:7px;height:7px;border-radius:50%;background:var(--c)}
.toast.ok{--c:var(--ok)}.toast.aviso{--c:var(--aviso)}.toast.peligro{--c:var(--peligro)}.toast.info{--c:var(--info)}
.toast.fuera{opacity:0;transform:translateX(20px)}
a.toast:hover{border-color:var(--borde-hover)}
@keyframes toast-entra{from{opacity:0;transform:translateY(12px) scale(.97)}}

/* ── Miembros ───────────────────────────────────────────────────────────── */
.avatar{border-radius:50%;flex:none;background:var(--hundido)}
.avatar.grande{width:72px;height:72px;box-shadow:0 0 0 3px var(--fondo),0 0 0 4px var(--borde-fuerte)}

/* ── Anuncios: galería de plantillas ────────────────────────────────────── */
.plantillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:16px}
.plantilla{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:10px;border:1px solid var(--borde);background:var(--superficie);color:var(--texto);text-decoration:none;box-shadow:var(--sombra);
  transition:border-color var(--mov),box-shadow var(--mov),transform var(--mov)}
.plantilla b{font-size:.92rem}
.plantilla:hover{border-color:var(--borde-hover)}
.plantilla.activa{border-color:var(--texto);box-shadow:0 0 0 1px var(--texto)}
.plantilla-emoji{display:none}
.plantilla .ayuda{margin:0}
.editor-anuncio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.editor-anuncio .previa-caja{position:sticky;top:18px}
.botonera{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:6px 0 12px}
.botonera .campo{margin:0}
.botonera .separa{flex:1}
@media (max-width:1100px){.editor-anuncio{grid-template-columns:1fr}.editor-anuncio .previa-caja{position:static}}

/* ── Vista previa estilo Discord (colores de Discord a propósito: es una vista fiel) ── */
.dc-mensaje{display:flex;gap:14px;background:#313338;border-radius:10px;padding:14px 16px;color:#dbdee1;font:.94rem/1.38 "gg sans","Segoe UI",system-ui,sans-serif}
.dc-mensaje a{text-decoration:none}
.dc-avatar img{border-radius:50%;background:#1e1f22}
.dc-cuerpo{min-width:0;flex:1}
.dc-autor{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.dc-autor b{color:#f2f3f5}
.dc-bot{background:#5865f2;color:#fff;font-size:.62rem;font-weight:700;padding:1px 5px;border-radius:4px}
.dc-hora{color:#949ba4;font-size:.75rem}
.dc-mencion{display:inline-block;background:rgba(88,101,242,.3);color:#c9cdfb;border-radius:4px;padding:0 3px;margin-bottom:6px;font-weight:600}
.dc-cabecera{display:block;width:100%;max-width:520px;border-radius:8px;margin:2px 0 8px}
.dc-embed{--acento:#b736ef;max-width:520px;background:#2b2d31;border-left:4px solid var(--acento);border-radius:4px;padding:10px 16px 12px 12px}
.dc-titulo{font-weight:700;color:#f2f3f5;margin-bottom:6px}
.dc-texto{font-size:.88rem;word-wrap:break-word}
.dc-texto h3,.dc-texto h4,.dc-texto h5{margin:8px 0 2px;color:#f2f3f5}
.dc-texto h3{font-size:1.2rem}.dc-texto h4{font-size:1.05rem}.dc-texto h5{font-size:.95rem}
.dc-texto code,.dc-campo code{background:#1e1f22;border-radius:3px;padding:0 3px;font-size:.84em;color:#dbdee1}
.dc-texto a,.dc-campo a{color:#00a8fc}
.dc-li{padding-left:6px}
.dc-cita{border-left:4px solid #4e5058;padding-left:8px}
.dc-campos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.dc-campo{grid-column:1/-1;font-size:.86rem}
.dc-campo.corto{grid-column:auto}
.dc-campo b{display:block;color:#f2f3f5;margin-bottom:2px}
.dc-imagen{display:block;max-width:100%;border-radius:4px;margin-top:10px}
.dc-pie{margin-top:10px;color:#949ba4;font-size:.74rem}
.dc-boton{display:inline-block;margin-top:8px;background:#4e5058;color:#fff;border-radius:4px;padding:6px 14px;font-size:.85rem;font-weight:600}

/* ── Login ──────────────────────────────────────────────────────────────── */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .tarjeta{width:min(380px,100%);padding:34px 30px 30px;background:var(--fondo);border-radius:16px;box-shadow:var(--sombra-alta)}
.login .logo{display:block;width:56px;height:56px;margin:0 auto 16px}
.login h1{text-align:center;letter-spacing:-.02em;font-size:1.25rem;font-weight:600;margin-bottom:4px}
.login .lema{text-align:center;color:var(--suave);margin-bottom:24px;font-size:.88rem}

/* ── Diálogos: confirmación y «Ir a…» ───────────────────────────────────── */
dialog.modal{width:min(430px,calc(100vw - 32px));padding:0;border:0;border-radius:12px;background:var(--superficie);color:var(--texto);
  box-shadow:var(--sombra-alta);opacity:0;transform:translateY(12px) scale(.97);
  transition:opacity .2s ease,transform .26s var(--curva),overlay .26s allow-discrete,display .26s allow-discrete}
dialog.modal[open]{opacity:1;transform:none}
@starting-style{dialog.modal[open]{opacity:0;transform:translateY(12px) scale(.97)}}
dialog.modal::backdrop{background:rgba(9,9,11,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}
dialog.modal[open]::backdrop{opacity:1}
@starting-style{dialog.modal[open]::backdrop{opacity:0}}
.modal-cuerpo{padding:22px 22px 6px}
.modal-cuerpo h2{font-size:1.02rem;margin-bottom:6px}
.modal-cuerpo p{color:var(--suave);margin:0;line-height:1.5}
.modal-pie{display:flex;justify-content:flex-end;gap:8px;padding:18px 22px 20px}
dialog.paleta{width:min(540px,calc(100vw - 32px));margin-top:14vh;overflow:hidden}
dialog.paleta input{min-height:50px;padding:0 18px;border:0;border-bottom:1px solid var(--borde);border-radius:0;background:transparent;font-size:.98rem;box-shadow:none}
dialog.paleta input:focus{box-shadow:none;border-color:var(--borde)}
dialog.paleta ul{list-style:none;margin:0;padding:6px;max-height:min(52vh,420px);overflow:auto}
dialog.paleta li a{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;color:var(--texto);font-weight:550;text-decoration:none}
dialog.paleta li a:hover{background:var(--hover)}
dialog.paleta li[aria-selected=true] a{background:var(--activo)}
dialog.paleta li .ico{display:grid;place-items:center;width:20px;color:var(--tenue)}
dialog.paleta li[aria-selected=true] .ico{color:var(--texto)}
dialog.paleta li small{margin-left:auto;color:var(--tenue);font-size:.76rem;font-weight:500}
dialog.paleta li.vacio{padding:26px 16px}

/* ── Movimiento ─────────────────────────────────────────────────────────── */
/* Cambio de página: el menú se queda quieto, la sección activa se desliza y la hoja entra suave */
@view-transition{navigation:auto}
::view-transition-group(lateral){animation-duration:.01s}
::view-transition-group(nav-activa){animation-duration:.3s;animation-timing-function:var(--curva)}
::view-transition-old(root){animation:vt-sale .12s ease-in both}
::view-transition-new(root){animation:vt-entra .3s var(--curva) both}
@keyframes vt-sale{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(8px)}}
/* Entrada (solo al cargar la página, no en los refrescos en vivo) */
@keyframes sube{from{opacity:0;transform:translateY(10px)}}
html.entrando .principal > *,html.entrando .rejilla > *,html.entrando .plantillas > *{animation:sube .44s var(--curva) both}
html.entrando .principal > :nth-child(3){animation-delay:.04s}
html.entrando .principal > :nth-child(4){animation-delay:.08s}
html.entrando .principal > :nth-child(5){animation-delay:.12s}
html.entrando .principal > :nth-child(n+6){animation-delay:.16s}
html.entrando .rejilla > :nth-child(2),html.entrando .plantillas > :nth-child(2){animation-delay:.04s}
html.entrando .rejilla > :nth-child(3),html.entrando .plantillas > :nth-child(3){animation-delay:.08s}
html.entrando .rejilla > :nth-child(4),html.entrando .plantillas > :nth-child(4){animation-delay:.12s}
html.entrando .rejilla > :nth-child(n+5),html.entrando .plantillas > :nth-child(n+5){animation-delay:.16s}
html.entrando .grafico rect.entran,html.entrando .grafico rect.salen{transform-box:fill-box;transform-origin:50% 100%;animation:crece .7s var(--curva) .25s both}
@keyframes crece{from{transform:scaleY(0)}}
html.entrando .login .tarjeta{animation:sube .5s var(--curva) both}
/* Barra de progreso al navegar */
.progreso{position:fixed;top:0;left:0;z-index:100;height:2px;width:0;opacity:0;pointer-events:none;background:var(--brillo)}
html.navegando .progreso{opacity:1;width:88%;transition:width 6s cubic-bezier(.08,.8,.1,1)}

/* ── Menú plegado ───────────────────────────────────────────────────────── */
@media (min-width:821px){
  html.plegado{--ancho-lateral:64px}
  html.plegado .lateral{padding-left:10px;padding-right:10px}
  html.plegado .lateral .txt,html.plegado .marca span,html.plegado .buscar-btn kbd,html.plegado .en-vivo span{display:none}
  html.plegado .lateral-cabeza,html.plegado .lateral-pie{flex-direction:column;gap:8px}
  html.plegado .lateral-cabeza .marca{flex:none;padding:0}
  html.plegado .plegar svg{transform:scaleX(-1)}
  html.plegado .tema-btn svg{transform:none}
  html.plegado .buscar-btn,html.plegado .nav a{justify-content:center;padding:0}
  html.plegado .nav{margin:0 -10px;padding:2px 10px}

  html.plegado .grupo-titulo{height:1px;padding:0;margin:0 8px 8px;background:var(--borde);overflow:hidden}
  html.plegado .en-vivo{margin:0 auto;padding:0}
  html.plegado .btn.salir{padding:0}
  html.plegado .lateral-pie form{width:100%}
}

/* ── Pantallas pequeñas ─────────────────────────────────────────────────── */
@media (max-width:1000px){.dos{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .lateral{position:sticky;top:0;z-index:5;height:auto;flex-direction:row;align-items:center;gap:6px;padding:8px 10px;overflow-x:auto;overflow-y:hidden;background:var(--lienzo);border-bottom:1px solid var(--borde)}
  .lateral-cabeza{flex:none}
  .marca{padding:0;flex:none}
  .marca small,.marca span,.plegar:not(.tema-btn),.buscar-btn .txt,.buscar-btn kbd,.en-vivo span,.grupo-titulo,.btn.salir .txt{display:none}
  .buscar-btn{width:36px;flex:none;justify-content:center;padding:0}
  .en-vivo{flex:none;padding:0 4px}
  .nav{flex:none;flex-direction:row;gap:2px;overflow:visible;margin:0;padding:0}
  .grupo-nav{flex-direction:row}
  .nav a{padding:0 10px;white-space:nowrap}
  .nav a .txt{display:none}
  .nav a[aria-current=page]{view-transition-name:none}
  .nav a[aria-current=page] .txt{display:inline}
  .nav a[aria-current=page]::before{display:none}
  .lateral-pie{flex:none;margin-left:auto;padding:0;border:0}
  .principal{margin:0;min-height:0;padding-top:22px;border-left:0}
  h1{font-size:1.35rem}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  dl.datos{grid-template-columns:1fr;gap:2px}
  dl.datos dt{margin-top:8px}
  td.acciones{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ── Cuenta actual, permisos y barra de formato ─────────────────────────── */
.cuenta-actual{display:flex;align-items:center;gap:10px;padding:4px 8px;min-width:0}
.cuenta-actual .inicial{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--activo);font-weight:600;font-size:.8125rem}
.cuenta-actual .txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cuenta-actual b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuenta-actual small{color:var(--tenue);font-size:.75rem}
.permisos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 20px;margin:0 0 14px}
.permisos fieldset{border:0;margin:0;padding:0;min-width:0}
.permisos legend{padding:0;margin-bottom:6px;color:var(--tenue);font-size:.75rem}
label.casilla{display:flex;align-items:center;gap:8px;margin:0;padding:4px 0;color:var(--texto);font-size:.875rem;cursor:pointer}
label.casilla input{margin:0}
td.acciones .permisos{min-width:min(520px,70vw)}
.md-barra{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px;border:1px solid var(--borde-fuerte);border-bottom:0;border-radius:var(--radio-control) var(--radio-control) 0 0;background:var(--hundido)}
.md-barra + textarea{border-top-left-radius:0;border-top-right-radius:0}
.md-barra button{min-width:30px;height:28px;padding:0 8px;border:0;border-radius:4px;background:transparent;color:var(--suave);font:inherit;font-size:.8125rem;cursor:pointer;transition:background var(--mov),color var(--mov)}
.md-barra button:hover{background:var(--activo);color:var(--texto)}
.md-barra button:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.md-sep{width:1px;height:18px;margin:0 4px;background:var(--borde-fuerte)}
.dc-oculto{background:#1e1f22;color:#dbdee1;border-radius:3px;padding:0 2px}
@media (min-width:821px){html.plegado .cuenta-actual{justify-content:center;padding:4px 0}}
@media (max-width:820px){.cuenta-actual{display:none}}

/* ── Entrar con Discord ─────────────────────────────────────────────────── */
.btn.discord{gap:10px;min-height:40px}
.ayuda.centro{text-align:center;margin:10px 0 0}
details.con-clave{margin-top:18px;padding-top:16px;border-top:1px solid var(--borde)}
details.con-clave summary{cursor:pointer;color:var(--suave);font-size:.8125rem;text-align:center;list-style:none}
details.con-clave summary::-webkit-details-marker{display:none}
details.con-clave summary:hover{color:var(--texto)}
details.con-clave[open] summary{margin-bottom:14px}
img.inicial{object-fit:cover}
ol.pasos{margin:0 0 16px;padding-left:20px;color:var(--suave);line-height:1.7}
ol.pasos code{color:var(--texto)}
.tarjeta > h3{margin-top:20px}
span.casilla{display:block;padding:3px 0;color:var(--texto);font-size:.875rem}
.permisos{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
td.acciones .permisos{min-width:min(820px,72vw)}
.tabla-caja + form{margin-top:14px}

/* ── Perfil de miembro ──────────────────────────────────────────────────── */
.perfil-cabeza{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.perfil-cabeza h2{font-size:1.25rem;margin:0 0 2px}
.perfil-nombre{flex:1 1 260px;min-width:0}
.perfil-estado{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.perfil-roles{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 280px;justify-content:flex-end}
.perfil-cabeza + .rejilla{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.historial{list-style:none;margin:0;padding:0}
.historial li{--c:var(--tenue);position:relative;padding:14px 0 14px 18px;border-bottom:1px solid var(--borde)}
.historial li:last-child{border-bottom:0;padding-bottom:0}
.historial li:first-child{padding-top:0}
.historial li::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--c)}
.historial li:first-child::before{top:0}
.historial li.aviso{--c:var(--aviso)}.historial li.amatista{--c:var(--info)}.historial li.peligro{--c:var(--peligro)}.historial li.ok{--c:var(--ok)}
.historial li.anulada{--c:var(--borde-fuerte)}
.historial-cabeza{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.historial-fecha{margin-left:auto;color:var(--tenue);font-size:.8125rem}
.historial .texto-largo{max-width:none}
.historial details{margin-top:8px}
.notas{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.notas li{padding:10px 12px;border-radius:8px;background:var(--hundido)}
.nota-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.lista-roles{list-style:none;margin:0 0 12px;padding:0}
.lista-roles li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--borde)}
.lista-roles li:last-child{border-bottom:0}
.botones-voz{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* ── Sancionar: se elige el tipo y aparecen solo sus campos ─────────────── */
.paso-sugerido{display:flex;flex-direction:column;gap:2px;padding:10px 12px;margin-bottom:14px;border-radius:8px;background:var(--hundido)}
.paso-sugerido .ayuda{margin:0}
.levantar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tipos-sancion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.tipo-sancion{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border:1px solid var(--borde-fuerte);border-radius:8px;cursor:pointer;color:var(--texto);
  transition:border-color var(--mov),background var(--mov)}
.tipo-sancion:hover{border-color:var(--borde-hover)}
.tipo-sancion input{margin:3px 0 0}
.tipo-sancion span{display:flex;flex-direction:column;gap:1px;min-width:0}
.tipo-sancion b{font-weight:500;font-size:.875rem}
.tipo-sancion small{color:var(--suave);font-size:.75rem;font-weight:400;line-height:1.35}
.tipo-sancion:has(input:checked){border-color:var(--texto);background:var(--hover);box-shadow:0 0 0 1px var(--texto)}
.tipo-sancion:has(input[value=expulsion]:checked),.tipo-sancion:has(input[value=baneo]:checked){border-color:var(--peligro);background:var(--peligro-fondo);box-shadow:0 0 0 1px var(--peligro)}
.tipo-sancion:has(input:focus-visible){outline:2px solid var(--foco);outline-offset:2px}
.sancion .solo-silencio,.sancion .solo-baneo{display:none}
.sancion:has(input[value=silencio]:checked) .solo-silencio{display:block}
.sancion:has(input[value=baneo]:checked) .solo-baneo{display:block}
.sancion .filtros{margin-bottom:6px}

/* ── Conversaciones con el bot ──────────────────────────────────────────── */
.conversacion{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:640px;overflow:auto}
.conversacion li{max-width:min(78%,640px);padding:9px 12px;border-radius:12px;background:var(--hundido);align-self:flex-start;border-bottom-left-radius:4px}
.conversacion li.saliente{align-self:flex-end;background:var(--info-fondo);border-radius:12px;border-bottom-right-radius:4px}
.conversacion .texto-largo{max-width:none}
.conversacion .ayuda{margin-top:3px;font-size:.75rem}
.conversacion.corta{max-height:none;margin-bottom:10px}
@media (max-width:820px){.tipos-sancion{grid-template-columns:1fr}.perfil-roles{justify-content:flex-start}}