:root {
  --bg:#0b0e14; --panel:#121620; --inner:#191f2d; --line:#262d40;
  --fg:#e8eaf2; --muted:#8b93a7; --accent:#5792ef; --accent2:#3b6fd9; --err:#ff7b7b; --ok:#6ee7b7;
}
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body {
  margin:0; color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(900px 500px at 50% -10%, #12234a 0%, transparent 70%), var(--bg);
  min-height:100vh;
}
main { max-width:560px; margin:0 auto; padding:48px 16px; }
main.wide { max-width:860px; }

h1 {
  margin:0; font-size:2.4rem; font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(90deg, #9cc2fa, #5792ef, #3f78e0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h2 { font-size:1.05rem; margin:28px 0 8px; color:var(--fg); }
.sub { color:var(--muted); margin:.35rem 0 1.5rem; }

section {
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

/* zona de carga */
#drop {
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:40px 14px;
  border:2px dashed #34405e; border-radius:14px; background:var(--inner);
  cursor:pointer; text-align:center; transition:border-color .2s, background .2s, transform .2s;
}
#drop strong { font-size:1.1rem; }
#drop span { color:var(--muted); font-size:.9rem; }
#drop:hover { border-color:var(--accent); }
#drop.over { border-color:var(--accent2); background:#172540; transform:scale(1.01); }

.files { list-style:none; padding:0; margin:12px 0; }
.files li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); word-break:break-all; }
.files .size { color:var(--muted); font-size:.85rem; white-space:nowrap; }

.row { display:flex; gap:8px; align-items:center; margin-top:14px; }
.row input { flex:1; min-width:0; }
form.row { margin-top:0; }

input, select {
  font:inherit; padding:10px 12px; color:var(--fg); background:var(--inner);
  border:1px solid var(--line); border-radius:10px; outline:none; transition:border-color .2s, box-shadow .2s;
}
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(87,146,239,.25); }
input::placeholder { color:#5d6580; }

button {
  font:inherit; font-weight:600; padding:10px 18px; border:0; border-radius:10px; color:#fff; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 6px 22px rgba(87,146,239,.4); transition:transform .15s, box-shadow .2s, opacity .2s;
}
button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 8px 28px rgba(59,111,217,.4); }
button:disabled { opacity:.4; cursor:default; box-shadow:none; }
#send { margin-left:auto; }
button.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); box-shadow:none; padding:4px 12px; font-weight:400; }
button.ghost:hover:not(:disabled) { color:var(--fg); box-shadow:none; transform:none; }
button.danger { background:transparent; color:var(--err); border:1px solid var(--line); box-shadow:none; padding:2px 10px; font-weight:400; }
button.danger:hover:not(:disabled) { box-shadow:none; transform:none; border-color:var(--err); }

progress { width:100%; height:8px; margin-top:14px; border:0; border-radius:99px; overflow:hidden; background:var(--inner); accent-color:var(--accent); }
progress::-webkit-progress-bar { background:var(--inner); }
progress::-webkit-progress-value { background:linear-gradient(90deg, var(--accent), var(--accent2)); }

.status { color:var(--muted); min-height:1.5em; margin:10px 0 0; }
.status.err { color:var(--err); }
code { background:var(--inner); padding:1px 6px; border-radius:5px; }

/* sesión */
.topbar { display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:.9rem; color:var(--muted); }
.topbar .spacer { flex:1; }
.topbar a { color:#a9c8fa; text-decoration:none; }
.topbar a:hover { text-decoration:underline; }

/* login */
#login-view p:first-child, #confirm-view p:first-child { margin-top:0; }
#login-view, #confirm-view { background:var(--panel); }
#login-view form { background:var(--inner); border:1px solid var(--line); border-radius:12px; padding:12px; }
#login-view .status:not(.err):not(:empty) { color:var(--ok); background:rgba(110,231,183,.08); border:1px solid rgba(110,231,183,.25); border-radius:10px; padding:10px 12px; }
#login-view .status.err:not(:empty), #confirm-view .status.err:not(:empty) { background:rgba(255,123,123,.08); border:1px solid rgba(255,123,123,.25); border-radius:10px; padding:10px 12px; }

/* admin */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; }
.card b { display:block; font-size:1.6rem; }
.card span { color:var(--muted); font-size:.85rem; }
table { width:100%; border-collapse:collapse; font-size:.9rem; margin-top:8px; }
th, td { text-align:left; padding:9px 6px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:500; }
td.num, th.num { text-align:right; white-space:nowrap; }
.tag { font-size:.75rem; color:#a9c8fa; border:1px solid #284a85; border-radius:6px; padding:0 6px; }
.bar { display:inline-block; height:10px; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:3px; vertical-align:middle; min-width:2px; }

@media (max-width:480px) {
  h1 { font-size:2rem; }
  .row { flex-wrap:wrap; }
}

/* ---- portada (inspirada en el ejemplo) ---- */
body { display:flex; flex-direction:column; }
.bg { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; animation:float 22s ease-in-out infinite alternate; }
.b1 { width:520px; height:520px; background:#1f4fb8; top:-160px; left:-120px; }
.b2 { width:460px; height:460px; background:#2b6cd8; bottom:-180px; right:-100px; animation-delay:-8s; }
.b3 { width:380px; height:380px; background:#3b5fc6; top:40%; left:55%; animation-delay:-14s; }
@keyframes float { to { transform:translate(60px,40px) scale(1.15); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .blob, .ring { animation:none; } }

.site-header { width:100%; max-width:1200px; margin:0 auto; padding:22px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-header .topbar { margin:0; }
.brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-weight:700; font-size:1.2rem; letter-spacing:-.01em; }
.brand em { font-style:normal; background:linear-gradient(90deg,#9cc2fa,#5792ef); -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo { position:relative; width:36px; height:36px; display:grid; place-items:center; }
.ring { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,#3b6fd9,#3b6fd9,#4f86ec,#3b6fd9); filter:blur(3px); opacity:.8; animation:spin 12s linear infinite; }
.core { position:relative; width:100%; height:100%; border-radius:50%; background:var(--panel); border:1px solid rgba(87,146,239,.35); display:grid; place-items:center; }
.dot { width:12px; height:12px; border-radius:50%; background:linear-gradient(90deg,#9cc2fa,#3b6fd9); }

main.shell { flex:1; width:100%; max-width:1200px; margin:0 auto; padding:16px 20px 32px; display:flex; align-items:center; }
.card-main {
  width:100%; display:grid; grid-template-columns:1fr; gap:36px; align-items:center; padding:28px;
  background:rgba(18,22,32,.85); backdrop-filter:blur(18px); border:1px solid rgba(70,80,110,.6);
  border-radius:20px; box-shadow:0 25px 60px rgba(0,0,0,.5);
}
@media (min-width:900px) { .card-main { grid-template-columns:1.15fr 1fr; gap:56px; padding:48px; } }
.card-main section { background:none; border:0; box-shadow:none; padding:0; }
.card-main section > p:first-child { margin-top:0; }

.hero h1 { font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1.15; background:none; color:var(--fg); -webkit-text-fill-color:currentColor; margin:0 0 14px; }
.grad { background:linear-gradient(90deg,#9cc2fa,#5792ef,#3f78e0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { color:#b6bccd; margin:0 0 20px; }
.hero strong { color:#fff; font-weight:600; text-decoration:underline; text-decoration-color:rgba(87,146,239,.8); text-underline-offset:4px; }
.secure { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--muted); }
.secure svg { color:#7fb0f8; flex:none; }

#drop { min-height:300px; justify-content:center; gap:0; padding:32px 16px; }
.drop-ico { width:64px; height:64px; display:grid; place-items:center; margin-bottom:20px; border-radius:16px; color:#7fb0f8; background:rgba(87,146,239,.1); border:1px solid rgba(87,146,239,.3); transition:transform .3s; }
#drop:hover .drop-ico { transform:scale(1.06); }
.drop-btn { padding:12px 22px; border-radius:12px; color:#fff; font-weight:600; font-size:.9rem; background:linear-gradient(90deg,#3b6fd9,#2f5fc4); box-shadow:0 8px 24px rgba(40,80,170,.45); margin-bottom:12px; }
.drop-or { color:#c3c8d8; font-size:.9rem; margin-bottom:14px; }
.drop-max { color:#a9c8fa; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

.site-footer { width:100%; max-width:1200px; margin:0 auto; padding:18px 20px; border-top:1px solid rgba(38,45,64,.8); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); }
#ts-box { margin-top:12px; }

/* control de deslizar para confirmar */
.slider { position:relative; height:56px; max-width:420px; border-radius:14px; background:var(--inner); border:1px solid var(--line); overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none; }
.slider:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.slider-fill { position:absolute; left:0; top:0; bottom:0; width:0; pointer-events:none; background:linear-gradient(90deg, rgba(87,146,239,.18), rgba(87,146,239,.45)); }
.slider-label { position:absolute; inset:0; display:grid; place-items:center; padding-left:52px; pointer-events:none; color:var(--muted); font-weight:600; font-size:.95rem; }
.slider-handle { position:absolute; left:4px; top:4px; width:48px; height:46px; border-radius:10px; display:grid; place-items:center; color:#fff; cursor:grab; touch-action:none; background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 6px 18px rgba(87,146,239,.45); transition:left .25s ease; }
.slider.dragging .slider-handle { transition:none; cursor:grabbing; }
.slider.dragging .slider-fill, .slider.done .slider-fill { transition:none; }
.slider.done .slider-handle { cursor:default; }
@media (prefers-reduced-motion:no-preference) { .slider:not(.dragging):not(.done) .slider-handle svg { animation:nudge 1.8s ease-in-out infinite; } }
@keyframes nudge { 0%,100% { transform:translateX(0); } 50% { transform:translateX(4px); } }

/* aviso mientras se sube o descarga */
.warn { margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:.9rem; color:#fcd34d; background:rgba(252,211,77,.08); border:1px solid rgba(252,211,77,.28); }

/* usuario logueado */
.avatar { width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent2)); }
#who { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); }
@media (max-width:560px) { #who { display:none; } }


/* fondo de carpetas y documentos voladores, en HTML y CSS puros (homenaje a los Flying Toasters de After Dark) */
.sky-defs { position:absolute; width:0; height:0; }
.sky { position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.fly {
  --s:3; --u:calc(var(--s) * 1px); --bh:10;
  position:absolute; display:flex; align-items:flex-start;
  animation:fly-across 60s linear infinite;
}
.fly.doc { --bh:13; }
.fly .b { width:calc(14 * var(--u)); height:calc(10 * var(--u)); flex:none; }
.fly.doc .b { width:calc(10 * var(--u)); height:calc(13 * var(--u)); }
.fly .w {
  width:calc(8 * var(--u)); height:calc(7 * var(--u)); flex:none;
  margin-top:calc((var(--bh) * 0.45 - 5) * var(--u));
  transform-origin:50% calc(5 * var(--u));
  animation:flap .44s steps(1) infinite;
}
.fly:nth-child(3n) .w { animation-duration:.52s; }
.fly:nth-child(3n+1) .w { animation-duration:.38s; }
.fly svg { display:block; shape-rendering:crispEdges; }
@keyframes fly-across { to { transform:translate(-175vw, 95vh); } }
@keyframes flap { 0% { transform:scaleY(1); } 50% { transform:scaleY(-1); } }
.f1 { --s:3; left:124vw; top:-16vh; opacity:0.55; animation-duration:67s; animation-delay:-30s; }
.f2 { --s:2; left:68vw; top:-16vh; opacity:0.42; animation-duration:73s; animation-delay:0s; }
.f3 { --s:2; left:73vw; top:-16vh; opacity:0.42; animation-duration:82s; animation-delay:-43s; }
.f4 { --s:2; left:104vw; top:45vh; opacity:0.42; animation-duration:66s; animation-delay:-14s; }
.f5 { --s:3; left:51vw; top:-16vh; opacity:0.55; animation-duration:78s; animation-delay:-36s; }
.f6 { --s:4; left:49vw; top:-16vh; opacity:0.68; animation-duration:48s; animation-delay:-18s; }
.f7 { --s:3; left:104vw; top:39vh; opacity:0.55; animation-duration:78s; animation-delay:-33s; }
.f8 { --s:2; left:104vw; top:-11vh; opacity:0.42; animation-duration:81s; animation-delay:-23s; }
.f9 { --s:4; left:104vw; top:34vh; opacity:0.68; animation-duration:54s; animation-delay:-4s; }
.f10 { --s:2; left:112vw; top:-16vh; opacity:0.42; animation-duration:86s; animation-delay:-21s; }
.f11 { --s:3; left:30vw; top:-16vh; opacity:0.55; animation-duration:65s; animation-delay:-15s; }
.f12 { --s:4; left:81vw; top:-16vh; opacity:0.68; animation-duration:56s; animation-delay:-44s; }
.f13 { --s:2; left:13vw; top:-16vh; opacity:0.42; animation-duration:87s; animation-delay:-16s; }
.f14 { --s:3; left:104vw; top:-7vh; opacity:0.55; animation-duration:58s; animation-delay:-46s; }
.f15 { --s:3; left:46vw; top:-16vh; opacity:0.55; animation-duration:61s; animation-delay:-14s; }
.f16 { --s:4; left:118vw; top:-16vh; opacity:0.68; animation-duration:61s; animation-delay:-18s; }
@media (max-width:700px) { .f9, .f10, .f11, .f12, .f13, .f14, .f15, .f16 { display:none; } }
@media (prefers-reduced-motion:reduce) { .sky { display:none; } }

/* enlace a Abakos en el pie de página */
.site-footer a { color:#9cc2fa; text-decoration:none; font-weight:600; }
.site-footer a:hover { text-decoration:underline; }

/* pie de página con enlaces e idioma */
.site-footer { display:block; }
.foot-main { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-links { display:flex; flex-wrap:wrap; gap:8px 24px; }
.foot-links a { color:var(--muted); font-weight:500; text-decoration:none; }
.foot-links a:hover { color:var(--fg); text-decoration:none; }
.lang-btn { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; font-size:.85rem; font-weight:500; color:var(--fg); background:var(--inner); border:1px solid var(--line); box-shadow:none; }
.lang-btn:hover:not(:disabled) { transform:none; box-shadow:none; border-color:var(--accent); }
.foot-sub { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; font-size:.78rem; }

/* ventana para elegir idioma */
.lang-dialog { width:min(520px, calc(100vw - 32px)); padding:24px; color:var(--fg); background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lang-dialog::backdrop { background:rgba(5,8,14,.7); backdrop-filter:blur(4px); }
.lang-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.lang-head h2 { margin:0; font-size:1.1rem; }
.lang-x { padding:4px 10px; font-weight:400; color:var(--muted); background:transparent; border:1px solid var(--line); box-shadow:none; }
.lang-x:hover:not(:disabled) { transform:none; box-shadow:none; color:var(--fg); }
.lang-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.lang-grid button { padding:12px 8px; font-weight:600; color:var(--fg); background:var(--inner); border:1px solid var(--line); box-shadow:none; }
.lang-grid button:hover:not(:disabled) { transform:none; box-shadow:none; border-color:var(--accent); }
.lang-grid button.active { color:#fff; border-color:transparent; background:linear-gradient(135deg, var(--accent), var(--accent2)); }
@media (max-width:480px) { .lang-grid { grid-template-columns:1fr; } }

/* páginas de contenido: por qué, FAQ, seguridad y legal */
.card-main.single { grid-template-columns:1fr !important; max-width:820px; margin:0 auto; align-items:start; }
.doc h1 { font-size:clamp(1.8rem, 3.2vw, 2.4rem); margin:0 0 14px; }
.doc h2 { font-size:1.15rem; margin:30px 0 8px; color:var(--fg); }
.doc p, .doc li { color:#b6bccd; line-height:1.7; }
.doc ul { padding-left:20px; margin:8px 0; }
.doc li { margin:6px 0; }
.doc a { color:#9cc2fa; }
.doc .updated { color:var(--muted); font-size:.85rem; }
.doc details { border-bottom:1px solid var(--line); padding:12px 0; }
.doc summary { cursor:pointer; font-weight:600; color:var(--fg); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.doc summary::after { content:'+'; color:var(--accent); font-size:1.2rem; line-height:1; }
.doc details[open] summary::after { content:'–'; }
.doc details p { margin:10px 0 2px; }
.t { display:none; }
html[lang="es"] .t[lang="es"], html[lang="en"] .t[lang="en"], html[lang="pt"] .t[lang="pt"] { display:block; }

/* nombre del producto (SAPing en blanco, Drop en azul, negrita) y enlaces sin subrayado */
.bn { font-weight:inherit; color:#fff; white-space:nowrap; }
.bn em { font-style:normal; color:inherit; }
a.ext, .doc a.ext, .site-footer a.ext { color:#9cc2fa; font-weight:inherit; text-decoration:none; }
a.ext:hover, .doc a.ext:hover, .site-footer a.ext:hover { color:#cfe1fc; text-decoration:none; }

/* solicitar acceso */
.stack { display:flex; flex-direction:column; gap:10px; }
.stack .row { margin-top:4px; justify-content:space-between; }
textarea { font:inherit; padding:10px 12px; color:var(--fg); background:var(--inner); border:1px solid var(--line); border-radius:10px; outline:none; resize:vertical; transition:border-color .2s, box-shadow .2s; }
textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(87,146,239,.25); }
textarea::placeholder { color:#5d6580; }
.req-link { margin:14px 0 0; }
.linkbtn { padding:0; font-weight:400; color:#9cc2fa; background:none; border:0; box-shadow:none; }
.linkbtn:hover:not(:disabled) { color:#cfe1fc; transform:none; box-shadow:none; }

/* consola de administración */
.muted { color:var(--muted); }
.small { font-size:.8rem; }
.range-bar { display:flex; gap:12px 16px; flex-wrap:wrap; align-items:center; margin:18px 0 6px; font-size:.9rem; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg button { padding:6px 14px; font-weight:500; color:var(--muted); background:var(--inner); border:0; border-radius:0; box-shadow:none; }
.seg button:hover:not(:disabled) { transform:none; box-shadow:none; color:var(--fg); }
.seg button.on { color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent2)); }
.badge { display:inline-block; min-width:22px; padding:0 8px; border-radius:99px; color:#fff; font-size:.75rem; font-weight:700; text-align:center; background:var(--accent); vertical-align:middle; }
.req-card { border:1px solid var(--line); background:var(--inner); border-radius:12px; padding:12px 14px; margin:10px 0; }
.req-card .meta { color:var(--muted); font-size:.82rem; }
.req-card .why { margin:8px 0; color:#b6bccd; }
.acts { display:flex; gap:6px; flex-wrap:wrap; }
.acts button, .req-card button { padding:3px 10px; font-size:.8rem; font-weight:500; color:var(--fg); background:transparent; border:1px solid var(--line); box-shadow:none; }
.acts button:hover:not(:disabled), .req-card button:hover:not(:disabled) { transform:none; box-shadow:none; border-color:var(--accent); }
.acts button.danger, .req-card button.danger { color:var(--err); }
.tag.red { color:var(--err); border-color:rgba(255,123,123,.4); }
tr.dim td { opacity:.55; }
td .tag { margin-right:4px; }
.doc summary > span { flex:1; }

/* formulario de contacto: panel que se desliza desde la derecha */
.drawer { position:fixed; top:0; right:0; bottom:0; left:auto; margin:0; width:min(440px, 100vw); height:100vh; max-height:none; padding:0; color:var(--fg); background:var(--panel); border:0; border-left:1px solid var(--line); box-shadow:-20px 0 60px rgba(0,0,0,.5); overflow-y:auto; }
.drawer[open] { animation:drawer-in .28s cubic-bezier(.2,.8,.2,1); }
.drawer.closing { animation:drawer-out .2s ease-in forwards; }
.drawer::backdrop { background:rgba(5,8,14,.6); backdrop-filter:blur(3px); animation:drawer-fade-in .28s ease; }
.drawer.closing::backdrop { animation:drawer-fade-out .2s ease forwards; }
@keyframes drawer-in { from { transform:translateX(100%); } to { transform:none; } }
@keyframes drawer-out { to { transform:translateX(100%); } }
@keyframes drawer-fade-in { from { opacity:0; } }
@keyframes drawer-fade-out { to { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .drawer[open], .drawer.closing, .drawer::backdrop, .drawer.closing::backdrop { animation:none; } }
.drawer-inner { display:flex; flex-direction:column; gap:12px; padding:24px; min-height:100%; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; }
.drawer-head h2 { margin:0; font-size:1.25rem; }
.drawer-intro { margin:0 0 4px; color:#b6bccd; }
.drawer label { display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--muted); }
.drawer input, .drawer select, .drawer textarea { width:100%; }
.drawer .hint { margin:0; font-size:.8rem; color:var(--muted); }
.drawer-send { align-self:flex-start; }

/* consola: aprovechar el ancho de la pantalla y dar más aire */
main.wide { max-width:1360px; padding:36px 40px 72px; }
main.wide h1 { margin-bottom:6px; }
main.wide h2 { margin:40px 0 14px; font-size:1.2rem; }
main.wide .cards { grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:18px; margin-bottom:28px; }
main.wide .card { padding:20px 22px; }
main.wide .card b { font-size:2rem; }
main.wide .range-bar { gap:14px 24px; margin:22px 0 4px; }
main.wide #requests { display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:16px; }
main.wide #requests > p { grid-column:1 / -1; }
main.wide .req-card { margin:0; padding:18px 20px; }
main.wide #add-form { gap:14px; margin:0 0 20px; }
main.wide #add-form input, main.wide #add-form select { padding:12px 14px; }
main.wide table { font-size:.95rem; }
main.wide th, main.wide td { padding:15px 18px; }
main.wide th { font-size:.85rem; letter-spacing:.02em; }
main.wide td.num, main.wide th.num { padding-left:28px; }
main.wide tbody tr:hover td { background:rgba(87,146,239,.05); }
main.wide td:nth-last-child(2) { white-space:nowrap; }
main.wide .acts { gap:8px; }
main.wide .acts button { padding:5px 12px; }
@media (max-width:900px) {
  main.wide { padding:24px 16px 48px; }
  main.wide #requests { grid-template-columns:1fr; }
  main.wide table { display:block; overflow-x:auto; white-space:nowrap; }
}
.drawer .count { align-self:flex-end; font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.drawer .count.low { color:#fcd34d; }
.drawer .count.zero { color:var(--err); }

/* pantalla de confirmación: columnas iguales y bloque de la acción centrado */
@media (min-width:900px) { .card-main:not(.single) { grid-template-columns:1fr 1fr; } }
#confirm-view { text-align:center; }
#confirm-view .slider { margin:0 auto; }
#confirm-view .status { text-align:center; }

/* control de deslizar más sobrio: el texto y el track forman un solo bloque del mismo ancho */
#confirm-view > * { max-width:380px; margin-left:auto; margin-right:auto; }
#confirm-view > p:first-child { margin-top:0; margin-bottom:18px; line-height:1.5; }
.slider { height:54px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); border-radius:14px; }
.slider-fill { background:linear-gradient(90deg, rgba(87,146,239,.10), rgba(87,146,239,.30)); }
.slider-label { color:#8b93a7; font-weight:500; letter-spacing:.01em; }
.slider-handle { top:5px; left:4px; width:46px; height:42px; border-radius:10px; box-shadow:0 3px 12px rgba(87,146,239,.30); }

/* animaciones del control de deslizar */
/* 1) en reposo, un brillo recorre el texto invitando a deslizar */
.slider-label { background:linear-gradient(100deg, #8b93a7 0%, #8b93a7 38%, #eef1fa 50%, #8b93a7 62%, #8b93a7 100%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:slider-shimmer 3s linear infinite; }
@keyframes slider-shimmer { from { background-position:110% 0; } to { background-position:-110% 0; } }
.slider.dragging .slider-label { animation:none; }
/* 2) al arrastrar, la flecha crece un poco y brilla más; al soltar antes de tiempo vuelve con un pequeño rebote */
.slider-handle { transition:left .45s cubic-bezier(.34,1.56,.64,1), transform .15s ease, box-shadow .2s ease; }
.slider.dragging .slider-handle { transition:transform .15s ease, box-shadow .2s ease; transform:scale(1.06); box-shadow:0 6px 22px rgba(87,146,239,.55); }
.slider-fill { transition:width .45s cubic-bezier(.34,1.56,.64,1); }
.slider.dragging .slider-fill, .slider.done .slider-fill { transition:none; }
.slider { transition:border-color .25s ease, box-shadow .25s ease; }
.slider.dragging { border-color:rgba(87,146,239,.35); }
/* 3) al pasar el 92 % la flecha se convierte en un tilde: soltar ahora confirma */
.slider-handle .check { display:none; }
.slider.ready .slider-handle .arrow, .slider.done .slider-handle .arrow { display:none; }
.slider.ready .slider-handle .check, .slider.done .slider-handle .check { display:block; animation:slider-pop .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes slider-pop { from { transform:scale(.4); opacity:0; } to { transform:none; opacity:1; } }
/* 4) confirmado: el track se ilumina y el texto "Entrando…" late */
.slider.done { border-color:rgba(87,146,239,.65); box-shadow:0 0 0 3px rgba(87,146,239,.16), 0 0 26px rgba(87,146,239,.28); }
.slider.done .slider-label { background:none; color:#cfe1fc; animation:slider-pulse 1.1s ease-in-out infinite; }
@keyframes slider-pulse { 50% { opacity:.45; } }
@media (prefers-reduced-motion:reduce) {
  .slider-label, .slider.done .slider-label, .slider-handle, .slider-fill, .slider.ready .slider-handle .check, .slider.done .slider-handle .check { animation:none; transition:none; }
}

/* ventanas propias de la consola (reemplazan los cuadros del navegador) */
.modal { width:min(440px, calc(100vw - 32px)); padding:26px; color:var(--fg); background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.modal::backdrop { background:rgba(5,8,14,.65); backdrop-filter:blur(4px); }
.modal[open] { animation:modal-in .2s cubic-bezier(.2,.8,.2,1); }
@keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(.97); } }
@media (prefers-reduced-motion:reduce) { .modal[open] { animation:none; } }
.modal h3 { margin:0 0 8px; font-size:1.2rem; }
.modal p { margin:0 0 18px; color:#b6bccd; line-height:1.55; overflow-wrap:anywhere; }
.modal input { width:100%; margin-bottom:18px; }
.modal .btns { display:flex; justify-content:flex-end; gap:10px; }
.modal .btns button { padding:9px 20px; }
.modal .btns .ghost { padding:9px 18px; font-weight:500; }
.modal .btns .danger-solid { background:linear-gradient(135deg, #ef5350, #d32f2f); box-shadow:0 6px 18px rgba(239,83,80,.32); }

/* grillas de la consola: búsqueda, orden por columna, filtros y paginación */
.g-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 12px; }
.g-toolbar .spacer { flex:1; }
.g-search { flex:0 1 340px; min-width:220px; }
.g-field { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); }
.g-info { font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.g-table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.g-table th.sortable:hover { color:var(--fg); }
.g-table th:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.g-table th .arrow { display:inline-block; width:1em; margin-left:6px; color:var(--accent); font-size:.7rem; }
.g-empty td { text-align:center; color:var(--muted); padding:30px 16px; }
.g-pager { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:12px; }
.g-pager button { padding:5px 13px; font-weight:500; color:var(--fg); background:var(--inner); border:1px solid var(--line); box-shadow:none; }
.g-pager button:hover:not(:disabled) { transform:none; box-shadow:none; border-color:var(--accent); }
.g-pager button:disabled { opacity:.35; cursor:default; }
.g-pager .cur { padding:0 10px; font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.why-cell { display:inline-block; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; color:#b6bccd; }
@media (max-width:900px) { .g-search { flex:1 1 100%; } .g-table { display:table; white-space:nowrap; } .g-scroll { overflow-x:auto; } }

/* consola: mismo encabezado que la portada (logo con anillo) y título de página sobrio */
.site-header.wide { max-width:1360px; padding-left:40px; padding-right:40px; }
main.wide { padding-top:12px; }
main.wide .page-title { margin:0 0 6px; font-size:1.9rem; font-weight:800; letter-spacing:-.02em; background:none; color:var(--fg); -webkit-text-fill-color:currentColor; }
@media (max-width:900px) { .site-header.wide { padding-left:16px; padding-right:16px; } }

/* logo: nube con flechas de subir y bajar */
.logo { width:40px; height:40px; }
.logo svg { width:100%; height:100%; filter:drop-shadow(0 4px 10px rgba(87,146,239,.30)); transition:transform .25s ease; }
.brand:hover .logo svg { transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce) { .logo svg { transition:none; } .brand:hover .logo svg { transform:none; } }
.logo { width:44px; height:44px; } /* el circuito necesita un poco más de tamaño para leerse */

/* página 404: la nube con circuito como personaje */
.nf { align-items:center; justify-content:center; text-align:center; }
.nf-box { display:flex; flex-direction:column; align-items:center; width:100%; max-width:560px; margin:0 auto; padding:12px 0 48px; }
.nf-mascot { width:min(230px, 58vw); height:auto; overflow:visible; animation:nf-bob 4.2s ease-in-out infinite; }
@keyframes nf-bob { 50% { transform:translateY(-8px); } }
.nf-code { margin-top:6px; font-size:clamp(5rem, 17vw, 9rem); font-weight:800; line-height:1; letter-spacing:-.04em; background:linear-gradient(180deg, #cfe1fc 0%, #5792ef 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nf-box .t h1 { margin:10px 0 8px; font-size:1.9rem; background:none; color:var(--fg); -webkit-text-fill-color:currentColor; }
.nf-box .t p { margin:0 auto 22px; max-width:46ch; color:#b6bccd; line-height:1.65; }
.nf-btn { display:inline-block; padding:11px 24px; border-radius:10px; color:#fff; font-weight:600; text-decoration:none; background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 6px 22px rgba(87,146,239,.4); transition:transform .15s, box-shadow .2s; }
.nf-btn:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(87,146,239,.5); }
@media (prefers-reduced-motion:reduce) { .nf-mascot { animation:none; } }

/* la nube de la 404 mira hacia los lados y parpadea de vez en cuando */
.nf-eyes { animation:nf-look 7s ease-in-out infinite; }
.nf-mouth { animation:nf-mouth 7s ease-in-out infinite; }
.nf-eye { transform-box:fill-box; transform-origin:center; animation:nf-blink 7s infinite; }
@keyframes nf-look { 0%, 8% { transform:translateX(0); } 18%, 40% { transform:translateX(-.8px); } 52%, 74% { transform:translateX(.8px); } 86%, 100% { transform:translateX(0); } }
@keyframes nf-mouth { 0%, 8% { transform:translateX(0); } 18%, 40% { transform:translateX(-.35px); } 52%, 74% { transform:translateX(.35px); } 86%, 100% { transform:translateX(0); } }
@keyframes nf-blink { 0%, 44%, 49%, 100% { transform:scaleY(1); } 46.5% { transform:scaleY(.1); } }
@media (prefers-reduced-motion:reduce) { .nf-eyes, .nf-mouth, .nf-eye { animation:none; } }

/* usuarios: acciones compactas y menú "Más" */
.tag { white-space:nowrap; }
main.wide td.num, main.wide th.num { padding-left:14px; padding-right:14px; }
.acts { flex-wrap:nowrap; }
.menu { position:fixed; z-index:70; min-width:210px; padding:6px; display:flex; flex-direction:column; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.55); }
.menu button { padding:9px 12px; text-align:left; font-weight:500; color:var(--fg); background:transparent; border:0; border-radius:8px; box-shadow:none; }
.menu button:hover:not(:disabled) { transform:none; box-shadow:none; background:var(--inner); }
.menu button.danger { color:var(--err); }