/* ── PERREOXL · Team ────────────────────────────────────────────────────────
   La estética es la del PERREOXL SYSTEM (el tablero con el planeta): fondo
   casi negro con tinte ciruela, rojo #FF3B2F, Anton para los rótulos,
   Barlow Condensed para datos y etiquetas, Inter para leer.
   Estas son las páginas que rodean al tablero: la puerta, la clave, sin
   acceso, el chat y los accesos. */
:root{
 --bg:#09080B; --pan:#131013; --pan2:#181416; --pan3:#1F1A1D; --pan4:#272023;
 --red:#FF3B2F; --red2:#FF6A4E; --redd:#8E1A12;
 --ink:#F2EEEC; --ink2:#CFC7C4; --mut:#948C8A; --dim:#6E6668; --line:#231F21; --line2:#2E282A;
 --ok:#39C07A; --warn:#FFB020; --bad:#FF4D4D;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{min-height:100svh;background:linear-gradient(168deg,#0B0910 0%,#09080B 34%,#0C0809 68%,#0A0810 100%);background-attachment:fixed;
 color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit}
.mono{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* ── campos y botones (los mismos de la puerta del SYSTEM) ── */
.campo{display:flex;flex-direction:column;gap:7px}
.campo span{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding-left:2px}
.campo input,.campo select{width:100%;background:#131113;border:1px solid var(--line);border-radius:11px;padding:14px 16px;color:var(--ink);
 font-size:15px;outline:none;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none}
.campo select{background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
 background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px;cursor:pointer}
.campo select option:disabled{color:#555}
.campo input::placeholder{color:#4F484A}
.campo input:focus,.campo select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,59,47,.13)}
.boton{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--red);border:0;border-radius:11px;padding:15px 18px;
 color:#fff;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase;
 transition:filter .18s,transform .18s}
.boton em{font-style:normal;font-size:16px;letter-spacing:0}
.boton:hover{filter:brightness(1.1);transform:translateY(-1px)}
.boton:disabled{opacity:.6;cursor:default;transform:none}
.aviso{min-height:20px;font-family:'Barlow Condensed',sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.aviso.mal{color:var(--bad)} .aviso.bien{color:var(--ok)}

/* ── la puerta: el planeta a la izquierda, el formulario a la derecha ── */
.puerta{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr)}
.lado{position:relative;overflow:hidden;isolation:isolate;
 background:radial-gradient(74% 90% at 50% 46%,#17111B 0%,#0D0A0F 58%,#09070A 100%)}
/* ⚠️ el paso del planeta al formulario es un degradado, no un filete duro
   (Yuri, 23/09/2026: «tiene que ser un degradado profesional»): un hilo que
   se apaga en las puntas y enciende rojo en el centro, más una sombra suave
   que funde los dos fondos */
.lado::after{content:'';position:absolute;top:0;bottom:0;right:0;width:1px;z-index:3;pointer-events:none;
 background:linear-gradient(180deg,rgba(242,238,236,0) 0%,rgba(242,238,236,.08) 18%,rgba(255,59,47,.55) 50%,rgba(242,238,236,.08) 82%,rgba(242,238,236,0) 100%);
 box-shadow:0 0 22px 1px rgba(255,59,47,.14)}
.lado::before{content:'';position:absolute;top:0;bottom:0;right:0;width:120px;z-index:1;pointer-events:none;
 background:linear-gradient(90deg,rgba(9,7,10,0),rgba(9,7,10,.55))}
.lado canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.lado canvas.drag{cursor:grabbing}
.lado-txt{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:34px 38px}
.lado-rot{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.lado-rot b{font-weight:600;color:var(--red2)}
.lado-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.sello{font-family:Anton,sans-serif;font-size:13px;letter-spacing:.34em;color:var(--red)}
.borde{position:absolute;right:-78px;top:50%;transform:translateY(-50%) rotate(90deg);font-family:Anton,sans-serif;font-size:10px;
 letter-spacing:.6em;color:rgba(255,255,255,.07);white-space:nowrap;pointer-events:none;z-index:2}
.caja{display:flex;align-items:center;justify-content:center;padding:48px 44px;
 background:radial-gradient(900px 520px at 60% -10%,rgba(255,59,47,.10),transparent 62%)}
.caja>div{width:100%;max-width:372px}
.logo{display:block;width:236px;max-width:78%;height:auto}
.sys{display:inline-block;margin-top:14px;font-family:'Barlow Condensed',sans-serif;font-size:11.5px;letter-spacing:.34em;color:var(--red);
 border:1px solid rgba(255,59,47,.36);border-radius:999px;padding:5px 15px}
.caja h1{margin-top:34px;font-family:Anton,sans-serif;font-weight:400;font-size:40px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.bajada{margin-top:12px;color:var(--mut);font-size:14px;line-height:1.6}
.caja form{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.caja form .boton{margin-top:6px}
.caja .aviso{margin-top:14px}
.pie{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;
 font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.pie a{color:var(--mut);text-decoration:none;transition:color .15s}
.pie a:hover{color:var(--ink)}
.restringido{margin-top:34px;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#4A4446}
@media(max-width:900px){
 .puerta{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .lado{height:40svh;min-height:260px}
 .lado::after{top:auto;left:0;right:0;bottom:0;width:auto;height:1px;
  background:linear-gradient(90deg,rgba(242,238,236,0) 0%,rgba(242,238,236,.08) 18%,rgba(255,59,47,.55) 50%,rgba(242,238,236,.08) 82%,rgba(242,238,236,0) 100%)}
 .lado::before{top:auto;bottom:0;left:0;right:0;width:auto;height:90px;
  background:linear-gradient(180deg,rgba(9,7,10,0),rgba(9,7,10,.55))}
 .lado-txt{padding:20px 22px}
 .borde{display:none}
 .caja{padding:34px 22px 46px;align-items:flex-start}
}

/* ── adentro: la barra es la del SYSTEM ── */
.nav{position:sticky;top:0;z-index:40;background:rgba(9,8,11,.82);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line)}
.nav-in{max-width:1560px;margin:0 auto;padding:0 34px;height:60px;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.brand img{height:20px;display:block}
.brand .s{font-family:Anton,sans-serif;font-size:9.5px;letter-spacing:.34em;color:var(--red);padding-left:13px;border-left:1px solid var(--line2)}
.tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative;color:var(--mut);white-space:nowrap;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.10em;
 text-transform:uppercase;padding:20px 14px;transition:color .15s}
.tabs a::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;background:var(--red);transform:scaleX(0);
 transform-origin:left;transition:transform .22s cubic-bezier(.3,.8,.3,1)}
.tabs a:hover{color:var(--ink2)}
.tabs a.on{color:var(--ink)}
.tabs a.on::after{transform:scaleX(1);box-shadow:0 0 10px rgba(255,59,47,.85)}
.yo{display:flex;align-items:center;gap:11px;flex:none}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--pan4);border:1px solid var(--line2);
 font-family:Anton,sans-serif;font-size:12px;color:var(--red2)}
.yo b{display:block;font-size:12.5px;font-weight:500;line-height:1.2}
.yo .mono{font-size:9.5px;letter-spacing:.18em}
.salir{background:none;border:1px solid var(--line2);border-radius:999px;padding:6px 13px;cursor:pointer;color:var(--mut);
 font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:color .15s,border-color .15s}
.salir:hover{color:var(--ink);border-color:var(--red)}
.navsub{max-width:1560px;margin:0 auto;padding:0 34px;height:30px;display:flex;align-items:center;gap:12px;border-top:1px solid rgba(35,31,33,.6);
 font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.navsub b{color:var(--red2);font-family:Anton,sans-serif;font-weight:400;letter-spacing:.2em}
.navsub i{width:14px;height:1px;background:var(--line2);display:inline-block}

.wrap{max-width:1560px;margin:0 auto;padding:30px 34px 90px}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}
.sh h2{font-family:Anton,sans-serif;font-weight:400;font-size:26px;letter-spacing:.03em;text-transform:uppercase;line-height:1}
.sh h2 i{font-style:normal;color:var(--red);margin-right:8px}
.sh p{margin-top:9px;color:var(--mut);max-width:620px;font-size:13.5px}
.panel{background:linear-gradient(180deg,rgba(24,20,22,.92),rgba(19,16,19,.92));border:1px solid var(--line);border-radius:14px}
.bloque{margin-top:34px}
.bloque:first-child{margin-top:0}

/* ── chat ── */
.chat{display:grid;grid-template-columns:230px minmax(0,1fr);height:calc(100svh - 220px);min-height:460px;overflow:hidden}
.chat.solo{grid-template-columns:minmax(0,1fr)}
.chat.solo .canales{display:none}
.canales{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.canal{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:1px solid transparent;border-radius:10px;
 padding:11px 12px;cursor:pointer;text-align:left;color:var(--mut);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;
 letter-spacing:.12em;text-transform:uppercase;transition:color .15s,background .15s}
.canal:hover{color:var(--ink2);background:rgba(255,255,255,.02)}
.canal.on{color:var(--ink);background:var(--pan3);border-color:var(--line2)}
.canal .dot{width:7px;height:7px;border-radius:50%;background:transparent}
.canal.nuevo .dot{background:var(--red);box-shadow:0 0 8px var(--red)}
.hilo{display:flex;flex-direction:column;min-width:0;min-height:0}
.hilo-cab{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.hilo-tit b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:17px;letter-spacing:.04em;text-transform:uppercase}
.miembros{font-size:11.5px;color:var(--dim)}
.hilo-der{display:flex;align-items:center;gap:10px;flex:none}
.avisos{background:none;border:1px solid var(--line2);border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--mut);
 font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.avisos.on{color:var(--ok);border-color:rgba(57,192,122,.4)}
.estado-chat{display:inline-flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.estado-chat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dim)}
.estado-chat.bien{color:var(--ok)} .estado-chat.bien::before{background:var(--ok);box-shadow:0 0 9px var(--ok)}
.estado-chat.mal{color:var(--warn)} .estado-chat.mal::before{background:var(--warn)}
.mensajes{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.msj{max-width:680px;background:var(--pan2);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.msj.mio{align-self:flex-end;background:rgba(255,59,47,.08);border-color:rgba(255,59,47,.24)}
.msj .cab{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
.msj .cab b{font-size:12.5px;font-weight:600}
.msj .cab span{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.08em;color:var(--dim)}
.msj p{white-space:pre-wrap;word-wrap:break-word;color:var(--ink2);font-size:14px}
.chat-vacio{margin:auto;text-align:center;color:var(--dim);font-size:13.5px;max-width:360px}
.redactar{display:flex;gap:10px;align-items:flex-end;padding:14px 16px;border-top:1px solid var(--line)}
.redactar textarea{flex:1;resize:none;background:#131113;border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--ink);
 font-size:14px;line-height:1.45;outline:none;max-height:140px}
.redactar textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,59,47,.13)}
.mandar{background:var(--red);border:0;border-radius:11px;padding:13px 20px;color:#fff;cursor:pointer;font-family:'Barlow Condensed',sans-serif;
 font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.mandar:disabled{opacity:.55;cursor:default}

/* ── accesos ── */
.tabla-envuelta{overflow-x:auto}
.tabla{width:100%;min-width:820px;border-collapse:collapse}
.tabla th{text-align:left;padding:13px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
.tabla td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink2);font-size:13.5px;vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla td.nom{color:var(--ink);font-weight:500}
.tabla td.nom small{display:block;color:var(--dim);font-weight:400;font-size:12px}
.tabla td.est{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.tabla td.est.activo{color:var(--ok)} .tabla td.est.invitado{color:var(--warn)}
.tabla td.fecha{font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;color:var(--mut);white-space:nowrap}
.acc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:18px;align-items:stretch}
.form-inv{padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.form-inv .ancho,.form-inv .boton{grid-column:1/-1}
.confirmar{margin:0 24px 20px;padding:16px 18px;border:1px solid rgba(255,59,47,.35);border-radius:12px;background:rgba(255,59,47,.06)}
.confirmar p{color:var(--ink);font-size:14px}
.c-botones{display:flex;gap:10px;margin-top:14px}
.c-botones .boton{width:auto;gap:26px}
.c-no{background:none;border:1px solid var(--line2);border-radius:11px;padding:0 18px;cursor:pointer;color:var(--mut);
 font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
#aviso-inv{padding:0 24px 20px}
.tilde{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:#131113;cursor:pointer}
.tilde input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin-top:1px;border:1px solid var(--line2);border-radius:5px;background:var(--pan);cursor:pointer;display:grid;place-items:center}
.tilde input:checked{background:var(--red);border-color:var(--red)}
.tilde input:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.tilde input:focus-visible{box-shadow:0 0 0 3px rgba(255,59,47,.25)}
.tilde span{color:var(--mut);font-size:12.5px;line-height:1.5}
.tilde b{display:block;color:var(--ink);font-weight:500;font-size:13.5px}
.marca-x{position:relative;overflow:hidden;min-height:280px;display:flex;align-items:flex-end;padding:26px}
.marca-x img{position:absolute;right:28px;top:50%;transform:translateY(-50%) rotate(-6deg);height:76%;max-height:320px;opacity:.95;
 filter:drop-shadow(0 0 36px rgba(255,59,47,.38));pointer-events:none}
.marca-x div{position:relative;max-width:300px;color:var(--mut);font-size:13.5px;line-height:1.6}
.marca-x div b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:19px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}

/* doce pestañas: los mismos cortes que el tablero (medidos con test/anchos.js) */
@media(min-width:761px){ .tabs a{padding:20px 7px;letter-spacing:.06em;font-size:11px} .tabs a::after{left:7px;right:7px} }
@media(max-width:1500px) and (min-width:761px){ .tabs a{padding:20px 5px;letter-spacing:.04em;font-size:10.5px} .tabs a::after{left:5px;right:5px} .nav-in{gap:18px} .yo>span:last-child{display:none} }
@media(max-width:1200px) and (min-width:761px){ .nav-in{flex-wrap:wrap;height:auto;padding-top:12px;row-gap:0} .brand{order:1;margin-right:auto} .yo{order:2} .salir{order:3}
 .tabs{order:4;flex-basis:100%;margin-top:4px} .tabs a{padding:12px 8px 14px} }
@media(max-width:1100px){
 .acc{grid-template-columns:1fr}
 .marca-x{min-height:200px}
}
@media(max-width:760px){
 .chat{grid-template-rows:auto minmax(0,1fr)}
 .nav-in{flex-wrap:wrap;height:auto;padding-top:12px;row-gap:0}
 .brand{order:1;margin-right:auto}
 .yo{order:2} .salir{order:3}
 .tabs{order:4;flex-basis:100%;margin:6px -16px 0;padding:0 6px}
 .tabs a{padding:13px 10px 14px}
 .hilo-der{flex-wrap:wrap;flex:1 1 100%;min-width:0}
 .estado-chat{white-space:normal;min-width:0;letter-spacing:.1em}
 .marca-x img{height:58%;right:12px;opacity:.3}
 .nav-in{padding:0 16px;gap:14px}
 .yo span:not(.av){display:none}
 .navsub,.wrap{padding-left:16px;padding-right:16px}
 .chat{grid-template-columns:1fr;height:calc(100svh - 262px);min-height:420px}
 .canales{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
 .canal{width:auto;white-space:nowrap}
 .form-inv{grid-template-columns:1fr}
 .hilo-cab{flex-wrap:wrap}
}