/* portal.css — estilos del portal de cliente.
   Extraído de rental/portal_html.py el 2026-09-05 (13.601 chars). Igual que el JS:
   el documento va con Cache-Control: no-store, así que esto se reenviaba entero en
   cada carga. Ahora se cachea aparte con ?v=<mtime-size>.
   Sin interpolación de Python (verificado: 0 marcadores, 0 Jinja). */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/fraunces-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/fraunces-600.woff2) format('woff2')}
:root{
 color-scheme:dark;
 --gold:#C7AA5E;--gold-body:#e8c547;--gold-hover:#f0d060;
 --void:#060a14;--bg:#080c1a;--surface:#0f1628;--surface-2:#0a0f1c;
 --border:rgba(255,255,255,.08);--border-gold:rgba(199,170,94,.15);
 --text:#e2e8f0;--muted:#94a3b8;--nav:rgba(200,212,230,.78);--font:'Inter',system-ui,sans-serif;--display:'Fraunces',Georgia,serif;
 --ok:#2dd4bf;--warn:#f0883e;--danger:#f85149;--track:#0a0f1c;--ha:#c1444a;
 /* Azules de datos (Luna, banda de noche, series secundarias). Existían quemados
    en 15 sitios del JS, y por eso las gráficas ignoraban el modo nocturno. */
 --info:#60a5fa;--info-2:#93c5fd;--linea:#e2e8f0;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font)}
h1.t,.auth-hero h1,.kpi b,.kpi .v,.paybox .amount{font-family:var(--display);letter-spacing:-.005em}
#dsk-header{position:sticky;top:0;z-index:9999;background:rgba(6,10,20,.97);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid rgba(199,170,94,.12);box-shadow:0 1px 24px rgba(0,0,0,.4)}
.head-in{max-width:1220px;margin:0 auto;padding:0 2rem;min-height:68px;display:flex;
 align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.logo img{height:44px;filter:drop-shadow(0 0 12px rgba(199,170,94,.15))}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:.1rem;flex-wrap:wrap}
.menu button{background:none;border:none;cursor:pointer;padding:.55rem .85rem;color:var(--nav);
 font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;font-family:var(--font);transition:.2s}
.menu button:hover{color:#fff;background:rgba(255,255,255,.05)}.menu button.active{color:var(--gold)}
main{max-width:1220px;margin:0 auto;padding:2rem}
h1.t{font-size:1.4rem;font-weight:800;color:#fff;margin:0 0 .3rem}h1.t em{color:var(--gold-body);font-style:normal}
.sub{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem}
.grid{display:grid;gap:1rem}.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.gal{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem}
.gal-thumb{position:relative;overflow:hidden;border-radius:8px}
.gal-thumb .gal-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,20,.92),transparent 55%);opacity:0;transition:.2s;display:flex;align-items:flex-end;padding:.5rem;font-size:.72rem;color:#e2e8f0;font-weight:600}
.gal-thumb:hover .gal-ov{opacity:1}
.grid.gal .card{padding:.4rem}.grid.gal .card strong{font-size:.78rem}

/* ==================================================================== */
/* MODO NOCTURNO                                                         */
/* Un tema oscuro NO es un modo nocturno. La adaptación a la oscuridad    */
/* tarda ~20 min en formarse y se pierde en segundos: la rompen el blanco */
/* puro de h1, el amarillo saturado de los KPI y, sobre todo, el AllSky   */
/* y las miniaturas de la galería a brillo completo.                     */
/* El ojo escotópico es casi ciego al rojo profundo (~630 nm): por eso el */
/* rojo conserva la visión nocturna y cualquier otro color la destruye.  */
/* Sólo se redefinen tokens; ningún componente sabe que esto existe.     */
/* ==================================================================== */
:root[data-night="1"]{
 --gold:#8a2f22;--gold-body:#c4402c;--gold-hover:#d4553f;
 --void:#050202;--bg:#080404;--surface:#150808;--surface-2:#0d0505;
 --border:rgba(200,80,60,.14);--border-gold:rgba(196,64,44,.18);
 --text:#c07a68;--muted:#8a5648;--nav:#a35c4a;
 --ok:#a04030;--warn:#b85a35;--danger:#e04a2a;--track:#0d0505;--ha:#8a2f22;
 --info:#7a3325;--info-2:#964433;--linea:#c07a68;
}
/* Imágenes y lienzos: una foto del cielo a brillo pleno anula todo lo anterior. */
:root[data-night="1"] img,
:root[data-night="1"] canvas,
:root[data-night="1"] video,
:root[data-night="1"] .hero-sky,
:root[data-night="1"] .auth-sky{
 filter:brightness(.42) saturate(.15) sepia(1) hue-rotate(-32deg);
}
:root[data-night="1"] h1.t{color:var(--text)}
:root[data-night="1"] .btn{color:#180706}

/* Atenuador propio: en un móvil, el brillo del sistema al mínimo sigue siendo
   demasiado para una pupila adaptada. Este velo baja por debajo de lo que permite
   el hardware.
   🔴 NO usar `filter:brightness()` en <body>: convierte el body en bloque
   contenedor de sus descendientes position:fixed y descoloca `.msg` (el toast),
   además de forzar una capa de composición en cada scroll. */
:root{--dim:1}
body::after{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:99999;
 background:#000;opacity:calc(1 - var(--dim));
}

/* Controles de la barra */
/* Los controles van por encima del velo: si se atenuaran con el resto, a brillo
   mínimo no habría forma de volver a subirlo (y la preferencia se restaura al
   recargar, así que te quedarías atrapado). */
.nightbtn,.dimmer{position:relative;z-index:100000}
.nightbtn{background:none;border:1px solid var(--border);color:var(--nav);
 border-radius:8px;min-width:44px;min-height:44px;cursor:pointer;font-size:1rem;line-height:1}
:root[data-night="1"] .nightbtn{border-color:var(--gold);color:var(--gold-hover)}
.dimmer{width:74px;accent-color:var(--gold-body);vertical-align:middle}
@media(max-width:768px){.dimmer{width:56px}}

@media(max-width:768px){
 .head-in{padding:0 .9rem;min-height:54px}
 main{padding:1rem .9rem}
 .card{padding:1rem}
 /* 44px de lado: el mínimo de WCAG 2.2 AA y de Apple HIG. Estas pestañas se
    pulsan de noche, con una mano y medio dormido; a 26px se falla constantemente. */
 .menu{gap:0}
 .menu button{padding:.7rem .6rem;font-size:.72rem;letter-spacing:.02em;min-height:44px}
 .btn,.btn.sm{min-height:44px;display:inline-flex !important;align-items:center;justify-content:center}
 /* iOS hace zoom al enfocar cualquier campo de <16px y no vuelve. 16px es el
    umbral exacto de Safari. No se usa maximum-scale porque también anularía el
    zoom manual, que es una ayuda de accesibilidad. */
 input,select,textarea{font-size:16px !important}
 /* Los ± del enfocador MUEVEN hardware y no piden confirmación: con 6px de hueco
    se pulsa el de al lado. 10px separa lo suficiente sin romper la fila. */
 .fgroup .frow,.frow{gap:10px;flex-wrap:wrap}
 .logo img{height:32px}
 h1.t{font-size:1.2rem}.sub{font-size:.82rem;margin-bottom:1rem}
 .grid.cards{grid-template-columns:1fr}
 .grid.gal{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
 .btn{padding:.6rem 1rem}.row{gap:.6rem}
}
.card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:1.4rem 1.5rem}
.kpi .card{text-align:center}.kpi b{display:block;font-size:2rem;color:var(--gold-body);font-weight:800;line-height:1}
.kpi span{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.hero-sky{position:relative;border-radius:14px;overflow:hidden;margin-bottom:1rem;min-height:150px;display:flex;align-items:flex-end;background:#02040a url('/allsky-live.jpg') center/cover no-repeat}
.hero-sky:after{content:'';position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 0,transparent 25%,rgba(6,10,20,.9) 100%)}
.hero-sky-in{position:relative;z-index:1;padding:1.1rem 1.3rem}
.btn{padding:.65rem 1.4rem;border-radius:6px;font-weight:700;font-size:.88rem;background:var(--gold-body);
 color:#080c1a;cursor:pointer;border:none;font-family:var(--font);text-decoration:none;display:inline-block;transition:.2s}
.btn:hover{background:var(--gold-hover);transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1.5px solid rgba(224,232,245,.35);color:#e0e8f5}
.btn.danger{background:transparent;border:1.5px solid rgba(248,81,73,.5);color:var(--danger)}
.btn.danger:hover{background:rgba(248,81,73,.12)}
.btn.sm{padding:.4rem .8rem;font-size:.78rem}
label{display:block;font-size:.74rem;color:var(--muted);margin:.55rem 0 .22rem;text-transform:uppercase;letter-spacing:.03em}
input,select{width:100%;padding:.55rem;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.88rem;font-family:var(--font)}
input[type=checkbox],input[type=radio]{width:auto;padding:0;margin:0;background:transparent;border:0;border-radius:0;accent-color:var(--gold-body);vertical-align:middle;cursor:pointer;flex:none}
.row{display:flex;gap:1rem;flex-wrap:wrap}.row>*{flex:1;min-width:140px}
.tabs2{display:flex;gap:.5rem;margin-bottom:1rem}
.pill{display:inline-block;padding:.18rem .55rem;border-radius:99px;font-size:.7rem;font-weight:600}
.pill.activo,.pill.paid{background:rgba(45,212,191,.18);color:#2dd4bf}
.pill.ha{background:rgba(193,68,74,.18);color:#e78a8f;border:1px solid rgba(193,68,74,.35)}
.pill.pendiente_activacion{background:rgba(232,197,71,.18);color:var(--gold-body)}
.pill.en_proceso,.pill.open{background:rgba(96,165,250,.18);color:#60a5fa}
.pill.expirado,.pill.cancelado,.pill.cancelled{background:rgba(148,163,184,.18);color:var(--muted)}
table{border-collapse:collapse;width:100%;font-size:.76rem;margin-top:.6rem}
th,td{border:1px solid var(--border);padding:.32rem .4rem;text-align:center}
td.free{background:rgba(45,212,191,.12);cursor:pointer}td.free.sel{background:var(--gold-body);color:#080c1a;font-weight:800}
td.occupied{background:rgba(248,81,73,.16);color:#f85149}td.blocked{background:rgba(199,170,94,.16);color:var(--gold)}
.msg{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:10000;max-width:92vw;
 padding:.7rem 1.1rem;border-radius:8px;font-size:.88rem;display:none;box-shadow:0 8px 28px rgba(0,0,0,.55)}
.msg.err{background:rgba(248,81,73,.15);color:#f85149;display:block}.msg.ok{background:rgba(45,212,191,.15);color:#2dd4bf;display:block}
.orderline{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.85rem}
.orderline:last-child{border-bottom:none}
small{color:var(--muted)}.hide{display:none}
/* Solo-admin (enfoque/focuser): ocultos al cliente; Fase D los muestra al administrador */
.adminonly{display:none}
body.is-admin .adminonly{display:revert}
.banner{background:rgba(232,197,71,.1);border:1px solid var(--border-gold);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1.3rem;font-size:.88rem}
.bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin:.4rem 0}
.bar>i{display:block;height:100%;background:var(--gold-body)}
.bar.ok>i{background:var(--ok)}
/* Bloques agrupados del Focuser y secciones plegables de Control */
.fgroup{border:1px solid var(--border);border-radius:8px;padding:.6rem .7rem;margin-top:.6rem}
.fgroup>h4{margin:0 0 .5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.fgroup .frow{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.fgroup input,.fgroup select{width:auto;padding:.35rem .5rem;font-size:.82rem}
details.sec{margin-top:1.6rem;border-top:1px solid var(--border);padding-top:.7rem}
details.sec>summary{cursor:pointer;font-size:1.05rem;font-weight:800;color:#fff;list-style:none;display:flex;gap:.4rem;align-items:center}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary:before{content:"▸";color:var(--gold);font-size:.8rem}
details.sec[open]>summary:before{content:"▾"}
details.sec>summary small{font-weight:400}
details.folder{border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02);padding:.55rem .7rem}
details.folder>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.2rem;font-size:.92rem;color:#e2e8f0}
details.folder>summary::-webkit-details-marker{display:none}
details.folder>summary:before{content:"▸";color:var(--gold);font-size:.72rem;margin-right:.35rem}
details.folder[open]>summary:before{content:"▾"}
details.folder[open]{background:rgba(255,255,255,.04)}
/* Planificador: paso de secuencia (estilo NINA) + barra de config de la lista */
.seqstep{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.85rem}
.seqstep:last-child{border-bottom:none}
.seqstep .seqname{flex:1;min-width:11rem}
.seqstep .seqmeta{color:var(--muted);font-size:.78rem;white-space:nowrap}
.seqstep .seqend{font-size:.78rem;color:var(--muted);display:flex;gap:.3rem;align-items:center}
.seqstep .seqend select,.seqstep .seqend input{width:auto;padding:.25rem .4rem;font-size:.78rem}
.seqstep .seqdel{color:var(--danger);text-decoration:none;font-weight:700;font-size:.9rem}
.seqflow{font-size:.74rem;color:var(--muted);margin:.15rem 0}.seqflow.ok{color:var(--ok)}
.cfgbar{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;margin:.5rem 0;padding:.45rem .65rem;background:var(--surface-2);border-radius:8px}
.live{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;margin:.6rem 0}
.live b{color:#fff}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2dd4bf;margin-right:.3rem}
.paybox{max-width:440px;margin:2rem auto;background:var(--surface);border:1px solid var(--border-gold);border-radius:14px;padding:2rem;text-align:center}
.paybox .amount{font-size:2.4rem;font-weight:800;color:var(--gold-body);margin:.6rem 0}
.simbadge{display:inline-block;background:rgba(96,165,250,.18);color:#60a5fa;font-size:.7rem;padding:.2rem .6rem;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
#dsk-footer{background:#060a14;border-top:1px solid rgba(255,255,255,.06);margin-top:3rem}
.foot{max-width:1100px;margin:0 auto;padding:1.4rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.foot img{height:38px;opacity:.9}.foot small{color:#4e5f74}
.footbottom{border-top:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.15);padding:.7rem;text-align:center;font-size:.72rem;color:#7d8ea3}
/* ── Nav de la web dentro del portal (que no se pierda la navegación del sitio) ── */
.webnav{list-style:none;margin:0;padding:0;display:flex;gap:.05rem;flex-wrap:wrap;align-items:center}
.webnav a{color:var(--nav);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:.5rem .7rem;border-radius:6px;transition:.2s}
.webnav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.webnav a.active{color:var(--gold)}
.portalbar{border-top:1px solid rgba(199,170,94,.1);min-height:46px;max-width:1220px;margin:0 auto;padding:0 2rem;display:flex;align-items:center}
/* ── Entrada al portal: el cielo de La Palma en vivo + tarjeta de cristal ── */
.authwrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;
 min-height:calc(100vh - 240px);overflow:hidden;border-radius:20px;border:1px solid var(--border-gold);
 padding:clamp(1.5rem,4vw,3.5rem);margin-top:1rem;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.auth-sky{position:absolute;inset:0;z-index:0;background:#02040a url('/allsky-live.jpg') center/cover no-repeat;
 animation:authfade 1.3s ease both}
@keyframes authfade{from{opacity:0;transform:scale(1.05)}to{opacity:.6;transform:scale(1)}}
.authwrap::after{content:"";position:absolute;inset:0;z-index:1;
 background:radial-gradient(125% 95% at 26% 36%,rgba(6,10,20,.42),rgba(6,10,20,.92) 74%)}
.auth-hero,.auth-card{position:relative;z-index:2}
.auth-logo{height:52px;filter:drop-shadow(0 0 18px rgba(199,170,94,.35));margin-bottom:.4rem}
.auth-hero h1{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:300;line-height:1.08;color:#fff;letter-spacing:-.015em;margin:.7rem 0 1rem}
.auth-hero h1 em{display:block;font-style:normal;font-weight:800;color:var(--gold-body)}
.auth-hero p{color:#d4dcea;font-size:1.02rem;line-height:1.65;max-width:38ch;margin:0 0 1.1rem}
.auth-hero p strong{color:#fff}
.auth-live{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.auth-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:authpulse 2.2s infinite}
@keyframes authpulse{0%{box-shadow:0 0 0 0 rgba(45,212,191,.5)}70%{box-shadow:0 0 0 9px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}}
.auth-card{background:rgba(9,14,28,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
 border:1px solid var(--border-gold);border-radius:16px;padding:2rem;box-shadow:0 24px 60px rgba(0,0,0,.55)}
@media(max-width:820px){.authwrap{grid-template-columns:1fr;gap:1.3rem;min-height:auto}.auth-hero p{max-width:none}
 .webnav a{font-size:.7rem;padding:.4rem .5rem}.portalbar{padding:0 .9rem}}
@media(prefers-reduced-motion:reduce){.auth-sky,.auth-dot{animation:none}}