/* Pantalla de acceso de meollo.uk (y de los demas sitios), avisos del portero
   y "toteserver duerme". v2 "Liquid Glass" (2026-09-23): mismo lenguaje que el
   portal (gate/portal/portal.css): tipografia del sistema, tarjeta de cristal
   con reflejo, campos y botones de 50 px en capsula, siempre oscuro. */
:root{
  color-scheme:dark;
  --acc:#ffb340; --acc-2:#ff9f0a; --acc-ink:#2a1700;
  --cy:#64d2ff; --pu:#bf9dff; --rd:#ff453a; --rd-dim:rgba(255,69,58,.16); --gr:#30d158;
  --base:#05070b; --ink:#f5f7fa; --dim:#aeb4bf; --faint:#6e7581;
  --well:rgba(255,255,255,.08); --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.22);
  --glass:rgba(34,38,48,.58);
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","IBM Plex Sans",system-ui,sans-serif;
  --sans:var(--sys);
  --ease:cubic-bezier(.25,.8,.25,1); --spring:cubic-bezier(.32,1.3,.5,1);
  --r-xs:14px; --r-s:999px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(120% 60% at 50% -10%,#1b2233 0%,var(--base) 60%);color:var(--ink);
  font:16px/1.4 var(--sys);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
  display:grid;place-items:center;overflow-x:hidden;min-height:100%;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.orb{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:-1;animation:drift 26s ease-in-out infinite alternate}
.o1{width:70vmax;height:70vmax;background:#ff9f0a;left:-32vmax;top:-36vmax;opacity:.30}
.o2{width:60vmax;height:60vmax;background:#0a84ff;right:-30vmax;bottom:-30vmax;opacity:.24;animation-delay:-9s}
.o3{width:45vmax;height:45vmax;background:#bf5af2;right:-6vmax;top:-12vmax;opacity:.22;animation-delay:-16s}
@keyframes drift{to{transform:translate(5vmax,4vmax) scale(1.1)}}

main{position:relative;width:100%;max-width:400px}
.card{
  position:relative;overflow:hidden;padding:30px 22px 22px;border-radius:34px;
  background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(185%);backdrop-filter:blur(28px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 .5px rgba(255,255,255,.14),0 30px 70px -28px rgba(0,0,0,.85);
  display:flex;flex-direction:column;gap:14px;text-align:center;
  animation:pop .5s var(--spring) both;
}
/* reflejo especular del cristal */
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 34%)}
.card > *{position:relative}
@keyframes pop{0%{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none}}
.logo{align-self:center;width:68px;height:68px;border-radius:18px;box-shadow:0 12px 30px -10px rgba(255,159,10,.55),inset 0 0 0 .5px rgba(255,255,255,.2)}
h1{margin:4px 0 0;font:800 30px/1.1 var(--sys);letter-spacing:-.03em}
.sub{margin:-6px 0 4px;color:var(--dim);font-size:15px;line-height:1.45}
.to{align-self:center;margin:-4px 0 2px;padding:6px 14px;border-radius:999px;font-size:13.5px;
  color:var(--dim);background:var(--well);box-shadow:inset 0 0 0 .5px var(--line)}
.to b{color:var(--ink);font-weight:600}

.f{display:flex;flex-direction:column;gap:6px;text-align:left}
.f span{padding-left:6px;font-size:13px;font-weight:500;color:var(--dim)}
input[type=text],input:not([type]),input[type=password]{
  width:100%;min-height:52px;padding:0 18px;border-radius:var(--r-xs);border:0;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 .5px var(--line);
  color:var(--ink);font:17px var(--sys);outline:none;transition:box-shadow .2s var(--ease),background .2s;
}
input:focus{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 2px var(--cy)}
input::placeholder{color:var(--faint)}

/* interruptor tipo iOS */
.chk{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 8px 0 16px;border-radius:var(--r-xs);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 .5px var(--line);text-align:left;color:var(--ink);font-size:15px;cursor:pointer}
.chk > span:last-child{order:-1;flex:1;line-height:1.3}
.chk .sw{position:relative;flex:none;width:51px;height:31px;cursor:pointer}
.chk input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chk i{position:absolute;inset:0;border-radius:99px;background:rgba(120,120,128,.36);transition:background .25s var(--ease)}
.chk i::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.04);transition:translate .35s var(--spring)}
.chk input:checked + i{background:var(--gr)}
.chk input:checked + i::after{translate:20px}
.chk input:focus-visible + i{box-shadow:0 0 0 3px rgba(100,210,255,.5)}

/* botones en capsula */
button,a.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin-top:2px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#ffc15e,var(--acc-2));color:var(--acc-ink);font:600 17px var(--sys);letter-spacing:-.01em;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 26px -12px var(--acc-2);transition:transform .35s var(--spring),filter .2s;
}
button:active,a.btn:active{transform:scale(.96);filter:brightness(1.08)}
button:disabled{opacity:.55;cursor:default}
button.pk svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* con llave disponible, la contraseña pasa a secundaria */
.has-pk button[type=submit]{background:rgba(255,255,255,.1);color:var(--ink);box-shadow:inset 0 0 0 .5px var(--line-2),inset 0 1px 0 rgba(255,255,255,.12)}
.or{display:flex;align-items:center;gap:12px;margin:2px 0;color:var(--faint);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:.5px;background:var(--line-2)}

.err,.pk-err{margin:0;padding:12px 14px;border-radius:var(--r-xs);background:var(--rd-dim);box-shadow:inset 0 0 0 .5px rgba(255,69,58,.35);
  color:#ff8a80;font-size:14px;line-height:1.4;text-align:left}
.pk-hint{margin:0;color:var(--dim);font-size:13.5px;line-height:1.5}
.pk-hint a{color:var(--cy);font-weight:500;text-decoration:none;white-space:nowrap}
.foot{margin:4px 0 0;color:var(--faint);font-size:12px}
.foot a{color:var(--dim)}
@media (prefers-reduced-motion:reduce){.orb,.card{animation:none}}

/* --- fondo Matrix (solo en meollo.uk/entrar, 2026-09-24) ------------------
   El canvas va detras de todo; las luces de color se apagan para que la
   lluvia sea verde pura, y la tarjeta se oscurece un poco para que se lea
   perfecto encima (el cristal sigue desenfocando los caracteres). */
.mx{position:fixed;inset:0;z-index:-2;display:block;background:#020604}
.mx-on .orb{display:none}
.mx-on body{background:#020604}
.mx-on .card{background:rgba(4,12,8,.42);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(180,255,210,.24),inset 0 0 0 .5px rgba(120,255,170,.26),0 40px 90px -30px rgba(0,0,0,.95),0 0 80px -24px rgba(61,255,138,.35)}
.mx-on .card::before{background:linear-gradient(160deg,rgba(190,255,215,.14),rgba(255,255,255,0) 36%)}
.mx-on .logo{box-shadow:0 12px 34px -10px rgba(61,255,138,.55),inset 0 0 0 .5px rgba(255,255,255,.2)}
.mx-on input[type=text],.mx-on input:not([type]),.mx-on input[type=password]{background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 .5px rgba(120,255,170,.22)}
.mx-on input:focus{background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 2px #3dff8a}
.mx-on .chk{background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 .5px rgba(120,255,170,.18)}
.mx-on button,.mx-on a.btn{background:linear-gradient(180deg,#7dffb4,#22d66f);color:#021a0c;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px -10px rgba(34,214,111,.8)}
.mx-on .has-pk button[type=submit]{background:rgba(0,0,0,.4);color:var(--ink);box-shadow:inset 0 0 0 .5px rgba(120,255,170,.3)}
.mx-on .sub,.mx-on .f span,.mx-on .or{color:#b9d6c4}

/* --- cuadro minimo e informal de meollo.uk/entrar (2026-09-25) ------------
   Solo el logo y lo necesario para entrar: fuera titulo, subtitulo, "para
   abrir X" y pie; los nombres de los campos pasan a ir dentro (placeholder +
   icono; el <span> queda oculto solo a la vista, para lectores de pantalla).
   El logo asoma por encima del cuadro, ladeado y flotando; un filo de luz
   verde da la vuelta al borde. Solo afecta a data-site=portal. */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
[data-site=portal] main{max-width:340px;padding-top:46px}
[data-site=portal] .card{overflow:visible;padding:62px 18px 18px;gap:12px;border-radius:32px}
[data-site=portal] .card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0 62%,rgba(61,255,138,.15) 72%,#3dff8a 86%,rgba(200,255,220,.9) 88%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:filo 7s linear infinite}
@keyframes filo{to{--a:360deg}}
[data-site=portal] .logo{position:absolute;top:-44px;left:50%;width:88px;height:88px;margin:0;border-radius:24px;
  transform:translateX(-50%) rotate(-7deg);animation:flota 5s ease-in-out infinite;
  box-shadow:0 18px 40px -12px rgba(61,255,138,.6),0 0 0 5px rgba(2,6,4,.55),inset 0 0 0 .5px rgba(255,255,255,.25)}
@keyframes flota{50%{transform:translateX(-50%) translateY(-6px) rotate(-3deg)}}
[data-site=portal] h1,[data-site=portal] .f > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-site=portal] .sub,[data-site=portal] .to,[data-site=portal] .foot{display:none}
[data-site=portal] .f{gap:0}
[data-site=portal] .f input{min-height:54px;padding:0 20px 0 50px;border-radius:999px;font-size:17px;
  background:rgba(0,0,0,.42) var(--ic) no-repeat 19px 50%/19px;box-shadow:inset 0 0 0 1px rgba(120,255,170,.16)}
[data-site=portal] .f input:focus{background:rgba(0,0,0,.55) var(--ic) no-repeat 19px 50%/19px;box-shadow:inset 0 0 0 2px #3dff8a,0 0 0 5px rgba(61,255,138,.14)}
[data-site=portal] .f input::placeholder{color:#7f9a8a}
[data-site=portal] input[name=user]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd9a3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E")}
[data-site=portal] input[name=pass]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd9a3' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='3'/%3E%3Cpath d='M8 10.5V8a4 4 0 018 0v2.5'/%3E%3C/svg%3E")}
[data-site=portal] input[name=code]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd9a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
[data-site=portal] .chk{justify-content:center;gap:10px;min-height:34px;padding:0;background:none;box-shadow:none;font-size:14px;color:#b9d6c4}
[data-site=portal] .chk > span:last-child{flex:none}
[data-site=portal] .chk .sw{width:40px;height:24px}
[data-site=portal] .chk i::after{width:20px;height:20px}
[data-site=portal] .chk input:checked + i{background:#22d66f}
[data-site=portal] .chk input:checked + i::after{translate:16px}
[data-site=portal] button,[data-site=portal] a.btn{min-height:54px;font-weight:700}
[data-site=portal] button[type=submit]::after{content:"→";font-size:19px;transition:transform .35s var(--spring)}
[data-site=portal] button[type=submit]:hover::after,[data-site=portal] button[type=submit]:focus-visible::after{transform:translateX(4px)}
[data-site=portal] .err,[data-site=portal] .pk-err{border-radius:18px}
@media (prefers-reduced-motion:reduce){[data-site=portal] .card::after,[data-site=portal] .logo{animation:none}}