/* EXERGÍA · Cuentas — página de entrada del ingenierito y panel de administración (claro y oscuro) */
:root{
  --azul:#174C73; --profundo:#0D2438; --naranja:#FF751F; --papel:#F4F2EE;
  --paper:#F4F2EE; --ink:#0E1116; --line:rgba(14,17,22,.14);
  --fondo:#F4F2EE; --tarjeta:rgba(255,255,255,.82); --borde:rgba(13,36,56,.12); --sombra:0 30px 70px -28px rgba(13,36,56,.35);
  --texto:#0D2438; --tenue:#5B6B7A; --campo:rgba(13,36,56,.035); --campo-f:#fff; --etq:#3E5466;
  --error:#C8402F; --enlace:#1F6FA8; --rejilla:rgba(13,36,56,.05); --halo1:rgba(23,76,115,.16); --halo2:rgba(255,117,31,.10);
  --aviso-ok-bg:rgba(15,138,75,.08); --aviso-ok-bd:rgba(15,138,75,.3); --aviso-ok:#0B6B3A;
  --aviso-mal-bg:rgba(200,64,47,.07); --aviso-mal-bd:rgba(200,64,47,.3); --aviso-mal:#9A2E21;
  --piel:#C98B5E; --piel2:#A86E45; --casco:#FF751F; --casco2:#E3611A; --casco3:#FF9A55;
}
:root[data-theme="dark"]{
  --paper:#060E18; --ink:#E9EEF3; --line:rgba(255,255,255,.12);
  --fondo:#060E18; --tarjeta:rgba(17,34,52,.72); --borde:rgba(255,255,255,.09); --sombra:0 30px 80px -20px rgba(0,0,0,.65);
  --texto:#E9EEF3; --tenue:#8FA3B6; --campo:rgba(255,255,255,.045); --campo-f:rgba(255,255,255,.06); --etq:#C9D5E0;
  --error:#FF7A6B; --enlace:#7FB8E6; --rejilla:rgba(255,255,255,.035); --halo1:rgba(23,76,115,.55); --halo2:rgba(255,117,31,.10);
  --aviso-ok-bg:rgba(95,211,154,.1); --aviso-ok-bd:rgba(95,211,154,.3); --aviso-ok:#BFEFD6;
  --aviso-mal-bg:rgba(255,122,107,.1); --aviso-mal-bd:rgba(255,122,107,.35); --aviso-mal:#FFD0C9;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.cta-body{
  font-family:Inter,system-ui,sans-serif; color:var(--texto); background-color:var(--fondo);
  background-image:
    radial-gradient(900px 600px at 50% -10%, var(--halo1), transparent 70%),
    radial-gradient(600px 400px at 85% 110%, var(--halo2), transparent 70%),
    linear-gradient(var(--rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size:auto,auto,32px 32px,32px 32px; background-attachment:fixed;
}
/* todo cabe en el alto de la ventana: --s escala al ingenierito según la altura disponible */
:root{--s:1.25}
.cta-main{display:flex; justify-content:center; align-items:center; min-height:calc(100vh - var(--v3-hdr-h,80px)); min-height:calc(100dvh - var(--v3-hdr-h,80px)); padding:8px 16px 14px}
.escena{position:relative; width:min(470px,100%); padding-top:calc(150px * var(--s))}

/* ---------- ingenierito ---------- */
.ing,.manos{position:absolute; top:0; left:50%; width:calc(200px * var(--s)); height:calc(180px * var(--s)); margin-left:calc(-100px * var(--s)); overflow:visible}
.ing{z-index:1}
.manos{z-index:3; pointer-events:none}
.ing *, .manos *{transform-box:view-box}
.casco{transition:transform .45s cubic-bezier(.34,1.4,.64,1); transform-origin:42px 86px}
.ojo{transform-box:fill-box; transform-origin:center; animation:parpadeo 5.5s infinite}
.pupila{transition:transform .12s ease-out}
.guante{transition:transform .45s cubic-bezier(.34,1.3,.64,1)}
.g-izq{transform-origin:61px 152px} .g-der{transform-origin:139px 152px}
.boca{transition:d .25s}
.escena.tapado .casco{transform:translateY(24px)}
.escena.tapado .g-izq{transform:translate(-6px,-40px) rotate(-12deg)}
.escena.tapado .g-der{transform:translate(6px,-40px) rotate(12deg)}
.escena.asoma .casco{transform:translateY(14px) rotate(-14deg)}
.escena.asoma .g-izq{transform:translate(-6px,-40px) rotate(-12deg)}
.escena.error .cabeza{animation:no .5s}
@keyframes parpadeo{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes no{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ---------- tarjeta ---------- */
.tarjeta{
  position:relative; z-index:2; background:var(--tarjeta); border:1px solid var(--borde); border-radius:22px;
  padding:36px 28px 20px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sombra), inset 0 1px 0 rgba(255,255,255,.06);
}
.tarjeta.sacude{animation:no .45s}
.tarjeta h1{margin:0; text-align:center; font-size:1.45rem; font-weight:700; letter-spacing:-.01em}
.sub{margin:4px auto 16px; max-width:40ch; text-align:center; color:var(--tenue); font-size:.9rem; line-height:1.45}
.vista{display:none}
.vista.activa{display:block; animation:entra .35s ease}
@keyframes entra{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

.campo{position:relative; margin-bottom:10px}
.par{display:grid; grid-template-columns:1fr 1fr; gap:0 10px}
.campo input{
  width:100%; height:50px; padding:19px 40px 5px 14px; border-radius:12px; border:1px solid var(--borde);
  background:var(--campo); color:var(--texto); font:500 .95rem Inter,sans-serif; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.campo label{
  position:absolute; left:15px; top:15px; color:var(--tenue); font-size:.92rem; pointer-events:none;
  transition:top .18s, font-size .18s, color .18s;
}
.campo input:focus{border-color:rgba(255,117,31,.75); box-shadow:0 0 0 3px rgba(255,117,31,.16); background:var(--campo-f)}
.campo input:focus + label, .campo input:not(:placeholder-shown) + label{top:8px; font-size:.7rem; color:var(--etq)}
.campo input:focus + label{color:var(--casco2)}
.campo.mal input{border-color:var(--error)}
.msg{display:block; font-size:.76rem; color:var(--error); margin:5px 2px 0}
.msg:empty{display:none}
#r-acepto-msg{margin:-12px 2px 12px}
.ver{
  position:absolute; right:8px; top:9px; width:32px; height:32px; border:0; border-radius:8px; background:transparent;
  color:var(--tenue); cursor:pointer; display:grid; place-items:center;
}
.ver:hover{color:var(--texto); background:var(--campo)}
.ver svg{width:19px; height:19px}

.fuerza{display:flex; gap:5px; margin:-4px 2px 14px}
.fuerza i{flex:1; height:4px; border-radius:3px; background:var(--borde); transition:background .25s}
.fuerza-txt{font-size:.74rem; color:var(--tenue); margin:-8px 2px 12px}

.fila{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 14px; font-size:.84rem}
.check{display:flex; align-items:flex-start; gap:8px; color:var(--tenue); cursor:pointer; line-height:1.35}
.check b{font-weight:600; color:var(--texto)}
.check input{appearance:none; -webkit-appearance:none; flex:none; width:17px; height:17px; margin:1px 0 0; border:1.5px solid var(--tenue); border-radius:5px; display:grid; place-items:center; cursor:pointer; transition:.15s}
.check input:checked{background:var(--naranja); border-color:var(--naranja)}
.check input:checked::after{content:""; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px)}
.cta-main a, .enlace{color:var(--enlace); text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer}
.cta-main a:hover, .enlace:hover{text-decoration:underline}

.boton{
  position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:50px; border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,#2C78B4 0%, var(--azul) 55%, #123E5F 100%); color:#fff!important; text-decoration:none!important;
  font:600 1rem Inter,sans-serif; letter-spacing:.01em;
  box-shadow:0 10px 30px -10px rgba(44,120,180,.75), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.boton:hover{filter:brightness(1.08)}
.boton:active{transform:translateY(1px)}
.boton .flecha{position:absolute; right:6px; top:6px; width:38px; height:38px; border-radius:9px; background:var(--naranja); display:grid; place-items:center; transition:transform .2s}
.boton:hover .flecha{transform:translateX(2px)}
.boton .flecha svg{width:18px; height:18px}
.boton[disabled]{opacity:.7; cursor:wait}

.pie{margin-top:14px; text-align:center; color:var(--tenue); font-size:.88rem; line-height:1.5}
.aviso{display:none; margin:0 0 16px; padding:11px 13px; border-radius:11px; font-size:.84rem; line-height:1.4; background:var(--aviso-ok-bg); border:1px solid var(--aviso-ok-bd); color:var(--aviso-ok)}
.aviso.ver-aviso{display:block}
.aviso.malo{background:var(--aviso-mal-bg); border-color:var(--aviso-mal-bd); color:var(--aviso-mal)}
.aviso .enlace{color:inherit; text-decoration:underline; font-weight:600}
.enviado{text-align:center}
.enviado .sobre{width:64px; height:64px; margin:4px auto 14px; border-radius:18px; background:rgba(255,117,31,.14); display:grid; place-items:center; color:var(--naranja)}
.enviado .sobre svg{width:30px; height:30px}
.leyenda{position:relative; z-index:2; text-align:center; color:var(--tenue); font-size:.75rem; margin-top:10px}

@media (max-height:900px){ :root{--s:1} .tarjeta h1{font-size:1.3rem} }
@media (max-height:780px){ :root{--s:.8} .sub{margin-bottom:12px} }
@media (max-height:680px){ :root{--s:.6} .tarjeta{padding-top:28px} .campo{margin-bottom:8px} .campo input{height:46px; padding-top:17px} .campo label{top:13px} .ver{top:7px} .sub{margin-bottom:10px} .fila{margin-bottom:10px} .pie{margin-top:10px} .leyenda{display:none} }
@media (max-width:520px){ .par{grid-template-columns:1fr} }
@media (max-width:420px){ .tarjeta{padding:30px 18px 20px} .fila{flex-wrap:wrap} }
@media (prefers-reduced-motion:reduce){ .escena *, .tarjeta{animation:none!important; transition:none!important} }

/* ---------- panel de administración ---------- */
.adm{width:min(1100px,100%); margin:0 auto; padding:28px 16px 60px}
.adm h1{margin:0 0 4px; font-size:1.5rem; letter-spacing:-.01em}
.adm .sub{margin:0 0 18px; max-width:none; text-align:left}
.adm-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px}
.adm-bar input{flex:1 1 220px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--borde); background:var(--tarjeta); color:var(--texto); font:500 .9rem Inter,sans-serif}
.adm-bar .cuenta{font-size:.85rem; color:var(--tenue)}
.adm-tabla{width:100%; border-collapse:collapse; background:var(--tarjeta); border:1px solid var(--borde); border-radius:14px; overflow:hidden; font-size:.86rem}
.adm-tabla th,.adm-tabla td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--borde); vertical-align:top}
.adm-tabla th{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--tenue); font-weight:600}
.adm-tabla small{display:block; color:var(--tenue); font-size:.76rem}
.adm-est{display:inline-block; padding:2px 9px; border-radius:20px; font-size:.74rem; font-weight:600}
.adm-est.activo{background:var(--aviso-ok-bg); color:var(--aviso-ok)}
.adm-est.pendiente{background:rgba(247,208,70,.18); color:#8A6D00}
:root[data-theme="dark"] .adm-est.pendiente{color:#F7D046}
.adm-est.bloqueado{background:var(--aviso-mal-bg); color:var(--aviso-mal)}
.adm-b{height:30px; padding:0 10px; margin:0 4px 4px 0; border-radius:8px; border:1px solid var(--borde); background:var(--campo); color:var(--texto); font:600 .76rem Inter,sans-serif; cursor:pointer}
.adm-b:hover{border-color:var(--naranja)}
.adm-vacio{padding:30px; text-align:center; color:var(--tenue)}
.adm-h2{margin-top:34px!important; font-size:1.2rem!important}
@media (max-width:760px){
  .adm-tabla thead{display:none}
  .adm-tabla tr{display:block; border-bottom:1px solid var(--borde); padding:8px 0}
  .adm-tabla td{display:block; border:0; padding:4px 12px}
}

/* ---------- Mi perfil: avatar del ingenierito ---------- */
.tarjeta.pf{display:grid; grid-template-columns:220px 1fr; gap:28px; width:min(820px,100%); padding:30px 30px 22px; align-items:start}
.pf-av{width:220px; height:220px; border-radius:50%; overflow:hidden; background:var(--campo); border:1px solid var(--borde)}
.pf-av svg{width:100%; height:100%; display:block}
.pf .tarjeta h1,.pf h1{text-align:left}
.pf .sub{text-align:left; margin-left:0; max-width:none}
.pf-grupo{display:flex; align-items:center; gap:12px; margin:0 0 10px}
.pf-grupo b{width:82px; flex:none; font-size:.8rem; color:var(--tenue); font-weight:600}
.pf-op{display:flex; flex-wrap:wrap; gap:7px}
.pf-b{width:30px; height:30px; border-radius:50%; border:2px solid var(--borde); cursor:pointer; padding:0; background:var(--campo); transition:transform .15s, box-shadow .15s}
.pf-b:hover{transform:scale(1.08)}
.pf-b[aria-pressed="true"]{box-shadow:0 0 0 2px var(--fondo), 0 0 0 4px var(--naranja)}
.pf-b-av{width:44px; height:44px; overflow:hidden}
.pf-b-av svg{width:100%; height:100%; display:block}
.pf-correo{margin:2px 2px 14px; font-size:.82rem; color:var(--tenue)}
.pf-correo b{color:var(--texto); font-weight:600}
.pf .pie{text-align:left}
@media (max-width:720px){ .tarjeta.pf{grid-template-columns:1fr; justify-items:center} .pf-der{width:100%} .pf-av{width:150px; height:150px} }

/* ---------- Chat ---------- */
.ch-body{overflow:hidden}
.ch{display:grid; grid-template-columns:300px 1fr; gap:14px; height:calc(100vh - var(--v3-hdr-h,80px)); height:calc(100dvh - var(--v3-hdr-h,80px)); width:min(1180px,100%); margin:0 auto; padding:10px 16px 14px}
.ch-lado,.ch-panel{background:var(--tarjeta); border:1px solid var(--borde); border-radius:18px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--sombra); min-height:0}
.ch-lado{display:flex; flex-direction:column; padding:14px 10px; overflow-y:auto}
.ch-lado-top{display:flex; align-items:center; justify-content:space-between; padding:0 6px 8px}
.ch-lado h1{margin:0; font-size:1.25rem}
.ch-lado h2{margin:14px 8px 6px; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tenue); font-weight:600}
.ch-perfil .ch-av{width:38px; height:38px}
.ch-lado input[type=search]{margin:0 4px 6px; height:38px; padding:0 12px; border-radius:10px; border:1px solid var(--borde); background:var(--campo); color:var(--texto); font:500 .85rem Inter,sans-serif}
.ch-item{position:relative; display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border:0; border-radius:12px; background:none; color:var(--texto); font:inherit; text-align:left; cursor:pointer}
.ch-item:hover{background:var(--campo)}
.ch-item.activa{background:rgba(255,117,31,.12)}
.ch-txt{display:flex; flex-direction:column; min-width:0; flex:1}
.ch-txt b{font-size:.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ch-txt small{font-size:.74rem; color:var(--tenue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ch-punto{width:9px; height:9px; border-radius:50%; background:var(--naranja); flex:none}
.ch-punto[hidden]{display:none}
.ch-sala{display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:50%; background:var(--azul); color:#fff; font-weight:700}
.ch-av{display:block; width:36px; height:36px; flex:none; border-radius:50%; overflow:hidden; background:var(--campo)}
.ch-av svg{width:100%; height:100%; display:block}
.ch-vacio{margin:4px 8px; font-size:.8rem; color:var(--tenue)}
.ch-panel{display:flex; flex-direction:column; overflow:hidden}
.ch-panel-top{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--borde)}
.ch-panel-top .ch-txt b{font-size:.98rem}
.ch-volver{display:none; width:34px; height:34px; border:0; border-radius:9px; background:var(--campo); color:var(--texto); font-size:1.1rem; cursor:pointer}
.ch-panel .aviso{margin:10px 16px 0}
.ch-msgs{flex:1; min-height:0; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px}
.ch-inicio{margin:auto; text-align:center}
.ch-m{display:flex; gap:10px; align-items:flex-start; max-width:78%}
.ch-m.mio{align-self:flex-end; flex-direction:row-reverse}
.ch-m-c{background:var(--campo); border:1px solid var(--borde); border-radius:4px 14px 14px 14px; padding:8px 12px 6px; min-width:0}
.ch-m.mio .ch-m-c{background:rgba(23,76,115,.12); border-color:rgba(23,76,115,.22); border-radius:14px 4px 14px 14px}
:root[data-theme="dark"] .ch-m.mio .ch-m-c{background:rgba(44,120,180,.22); border-color:rgba(91,163,217,.3)}
.ch-m-cab{display:flex; align-items:baseline; gap:8px; font-size:.76rem}
.ch-m-cab b{font-weight:600}
.ch-m-cab time{color:var(--tenue); font-size:.7rem}
.ch-tag{padding:0 6px; border-radius:6px; background:var(--naranja); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.03em}
.ch-m p{margin:3px 0 2px; font-size:.9rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere}
.ch-m.borrado p{font-style:italic; color:var(--tenue)}
.ch-m-acc{display:flex; gap:10px; opacity:0; transition:opacity .15s}
.ch-m:hover .ch-m-acc,.ch-m:focus-within .ch-m-acc{opacity:1}
.ch-m-acc button{border:0; background:none; padding:0; color:var(--tenue); font:500 .7rem Inter,sans-serif; cursor:pointer}
.ch-m-acc button:hover{color:var(--error); text-decoration:underline}
.ch-escribir{display:flex; gap:8px; align-items:flex-end; padding:10px 14px 4px; border-top:1px solid var(--borde)}
.ch-escribir textarea{flex:1; resize:none; min-height:44px; max-height:140px; padding:11px 14px; border-radius:12px; border:1px solid var(--borde); background:var(--campo); color:var(--texto); font:500 .92rem/1.4 Inter,sans-serif; outline:none}
.ch-escribir textarea:focus{border-color:rgba(255,117,31,.75); box-shadow:0 0 0 3px rgba(255,117,31,.16)}
.ch-enviar{width:44px; height:44px; flex:none; border:0; border-radius:12px; background:var(--naranja); display:grid; place-items:center; cursor:pointer}
.ch-enviar svg{width:20px; height:20px}
.ch-enviar[disabled]{opacity:.6}
.ch-nota{margin:0; padding:2px 16px 10px; font-size:.7rem; color:var(--tenue)}
@media (hover:none){ .ch-m-acc{opacity:1} }
@media (max-width:760px){
  .ch{grid-template-columns:1fr; padding:8px 10px 10px}
  .ch-panel{display:none}
  body.ch-abierta .ch-lado{display:none}
  body.ch-abierta .ch-panel{display:flex}
  .ch-volver{display:block}
  .ch-m{max-width:92%}
}