/* Vault — hoja única. La CSP es style-src 'self': no hay estilos en línea en ninguna parte. Los dos temas viven como variables sobre , que el SERVIDOR escribe leyendo una cookie. Eso evita el parpadeo blanco al cargar: la solución habitual es un script en línea que aplique el tema antes de pintar, y la CSP no lo permite. */ :root, :root[data-tema="oscuro"]{ --fondo:#0a0f1a; --fondo-2:#0d1422; --panel:#0c1320; --tarjeta:#141c2b; --borde:#1f2b3d; --borde-vivo:#2b3d55; --campo:#111a29; --texto:#e7eefb; --tenue:#8fa2bd; --apagado:#64768f; --celeste:#38d0f2; --celeste-2:#3b82f6; --violeta:#6366f1; --alerta:#ff6b6b; --alerta-fondo:#2a1417; --alerta-borde:#4a2126; --ok:#34d399; --tinte:rgba(56,208,242,.10); --tinte-vivo:rgba(56,208,242,.20); --sombra:0 6px 20px rgba(0,0,0,.35); } :root[data-tema="claro"]{ --fondo:#f2f6fb; --fondo-2:#ffffff; --panel:#ffffff; --tarjeta:#ffffff; --borde:#dfe7f1; --borde-vivo:#c9d6e6; --campo:#f7fafd; --texto:#16202e; --tenue:#5b6b7f; --apagado:#8494a8; --celeste:#0e8fb5; --celeste-2:#2563eb; --violeta:#4f46e5; --alerta:#b3261e; --alerta-fondo:#fdecea; --alerta-borde:#f3c6c2; --ok:#0f7a3d; --tinte:rgba(14,143,181,.09); --tinte-vivo:rgba(14,143,181,.22); --sombra:0 2px 10px rgba(22,32,46,.07); } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--fondo);color:var(--texto); font:15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased} a{color:var(--celeste);text-decoration:none} a:hover{text-decoration:underline} .ico{width:21px;height:21px;display:block;flex:0 0 auto} /* ── pantallas de acceso (login, activación) ────────────────────────────── */ .centro{min-height:100%;display:flex;flex-direction:column;align-items:center; justify-content:center;padding:2.5rem 1.25rem} .marca{display:flex;flex-direction:column;align-items:center;gap:.85rem;margin-bottom:1.9rem} .marca .logo{width:88px;height:88px;display:block; filter:drop-shadow(0 6px 20px rgba(56,208,242,.22))} .marca .texto{font-size:1.5rem;font-weight:700;letter-spacing:-.02em} .marca .texto em{font-style:normal;background:linear-gradient(90deg,var(--celeste),var(--violeta)); -webkit-background-clip:text;background-clip:text;color:transparent} .tarjeta-auth{width:100%;max-width:25rem;background:var(--tarjeta);border:1px solid var(--borde); border-radius:16px;padding:1.75rem;box-shadow:var(--sombra)} .tarjeta-auth h1{font-size:1.15rem;margin:0 0 .3rem;font-weight:650} .sub{color:var(--tenue);font-size:.9rem;margin:0 0 1.4rem} .pie{color:var(--apagado);font-size:.8rem;margin-top:1.75rem} label{display:block;font-size:.78rem;font-weight:600;color:var(--tenue);margin:1rem 0 .35rem; text-transform:uppercase;letter-spacing:.05em} /* Por exclusión y no por enumeración: `input[type=text]` no matchea a `` sin atributo, y esos campos quedaban con el estilo crudo del navegador. */ input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea{ width:100%;padding:.65rem .8rem;min-height:2.6rem; background:var(--campo);border:1px solid var(--borde-vivo);border-radius:10px; color:var(--texto);font:inherit;line-height:1.3} input::placeholder,textarea::placeholder{color:var(--apagado)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--celeste); box-shadow:0 0 0 3px var(--tinte-vivo)} /* Los desplegables traen su propia flecha del sistema y quedan más altos que los campos: se igualan a mano para que una fila de formulario tenga todos los controles del mismo alto. */ select{appearance:none;-webkit-appearance:none;padding-right:2.2rem; background-image:linear-gradient(45deg,transparent 50%,var(--tenue) 50%), linear-gradient(135deg,var(--tenue) 50%,transparent 50%); background-position:calc(100% - 1.05rem) 1.15rem,calc(100% - .75rem) 1.15rem; background-size:6px 6px,6px 6px;background-repeat:no-repeat} .btn{margin-top:1.5rem;width:100%;border:0;border-radius:10px;padding:.8rem 1rem; background:linear-gradient(90deg,var(--celeste),var(--celeste-2)); color:#fff;font:inherit;font-weight:700;cursor:pointer} :root[data-tema="oscuro"] .btn{color:#06121f} .btn:hover{filter:brightness(1.08)} .btn:focus-visible{outline:2px solid var(--celeste);outline-offset:2px} .error{background:var(--alerta-fondo);border:1px solid var(--alerta-borde);color:var(--alerta); padding:.7rem .85rem;border-radius:10px;font-size:.88rem;margin-bottom:1rem} .aviso{background:var(--tinte);border:1px solid var(--borde-vivo);padding:.9rem 1rem; border-radius:10px;font-size:.88rem;color:var(--tenue)} /* ── segundo factor ─────────────────────────────────────────────────────── */ .qr{display:block;margin:1.2rem auto .8rem;width:190px;height:190px;background:#fff; border-radius:12px;padding:.55rem} .semilla{text-align:center;font-size:.8rem;color:var(--tenue);word-break:break-all;margin:0 0 .5rem} .semilla strong{color:var(--celeste);font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em} .mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.08em} .codigos{list-style:none;padding:0;margin:1.2rem 0;display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem} .codigos li{background:var(--campo);border:1px solid var(--borde-vivo);border-radius:9px; padding:.55rem;text-align:center;font-family:ui-monospace,Consolas,monospace; letter-spacing:.05em;color:var(--celeste);font-size:.9rem} /* ── cáscara: barra arriba, menú al costado ─────────────────────────────── */ .cascara{display:grid;grid-template-columns:15rem 1fr;grid-template-rows:auto 1fr; grid-template-areas:"barra barra" "menu principal";min-height:100vh} .barra{grid-area:barra;background:var(--fondo-2);border-bottom:1px solid var(--borde); padding:.6rem 1.1rem;display:flex;align-items:center;gap:.7rem} .barra .sello{width:30px;height:30px;display:flex;align-items:center;justify-content:center} .barra .sello img{width:28px;height:28px;display:block} .barra .texto{font-weight:700;letter-spacing:-.01em;font-size:1.02rem} .barra .texto em{font-style:normal;background:linear-gradient(90deg,var(--celeste),var(--violeta)); -webkit-background-clip:text;background-clip:text;color:transparent} .barra .derecha{margin-left:auto;display:flex;align-items:center;gap:.6rem} .quien{font-size:.85rem;color:var(--tenue);white-space:nowrap} .quien b{color:var(--texto);font-weight:600} .chico{background:transparent;border:1px solid var(--borde-vivo);color:var(--tenue); border-radius:9px;padding:.34rem .6rem;font:inherit;font-size:.84rem;cursor:pointer; display:inline-flex;align-items:center;gap:.35rem;line-height:1;text-decoration:none} .chico:hover{border-color:var(--celeste);color:var(--texto);text-decoration:none} .chico .ico{width:16px;height:16px} .barra form{margin:0} .menu{grid-area:menu;background:var(--panel);border-right:1px solid var(--borde); padding:1rem .7rem;display:flex;flex-direction:column;gap:.15rem} .menu a{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:10px; color:var(--tenue);font-size:.92rem} .menu a:hover{background:var(--tinte);color:var(--texto);text-decoration:none} .menu a.activo{background:var(--tinte-vivo);color:var(--texto);font-weight:600} .menu a.activo .ico{color:var(--celeste)} .menu .grupo{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--apagado); margin:1.1rem .7rem .35rem} .principal{grid-area:principal;padding:1.75rem 1.75rem 3rem;max-width:64rem} .principal h1{font-size:1.35rem;margin:0 0 .25rem;letter-spacing:-.01em} /* ── panel: fichas de estado ────────────────────────────────────────────── */ .fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem; margin:1.4rem 0 2rem} .ficha{background:var(--tarjeta);border:1px solid var(--borde);border-radius:13px;padding:1rem 1.1rem} .ficha .rotulo{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--apagado)} .ficha .valor{font-size:1.7rem;font-weight:700;line-height:1.2;margin-top:.2rem; font-variant-numeric:tabular-nums} .ficha .pista{font-size:.8rem;color:var(--tenue)} .ficha.atencion .valor{color:var(--alerta)} .ficha.bien .valor{color:var(--ok)} .bloque{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px; padding:1.25rem;margin-bottom:1.1rem} .bloque h2{font-size:1rem;margin:0 0 .2rem} .bloque p{margin:0;color:var(--tenue);font-size:.89rem} .vacio{display:flex;gap:.9rem;align-items:flex-start} .ico-caja{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:11px;color:var(--celeste); background:var(--tinte);border:1px solid var(--borde-vivo);flex:0 0 auto} @media (max-width:820px){ .cascara{grid-template-columns:1fr;grid-template-areas:"barra" "menu" "principal"} .menu{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--borde); padding:.5rem .6rem} .menu .grupo{display:none} .menu a{white-space:nowrap} .principal{padding:1.25rem} .quien{display:none} } @media (max-width:480px){ .tarjeta-auth{border:0;background:transparent;padding:0;box-shadow:none} .centro{justify-content:flex-start;padding-top:3.5rem} } @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ── tablas, pastillas y formularios de las pantallas de gestión ─────────── */ .tabla-caja{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px; overflow-x:auto;margin-bottom:1.1rem} .tabla{width:100%;border-collapse:collapse;font-size:.9rem} .tabla th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em; color:var(--apagado);font-weight:600;padding:.7rem .9rem;border-bottom:1px solid var(--borde)} .tabla td{padding:.7rem .9rem;border-bottom:1px solid var(--borde);vertical-align:top} .tabla tr:last-child td{border-bottom:0} .tabla .der,.der{text-align:right} .menor{font-size:.82rem;color:var(--tenue)} .rojo{color:var(--alerta)} .acciones{white-space:nowrap;display:flex;gap:.6rem;justify-content:flex-end;align-items:center} .acciones form{margin:0} .acciones button{background:none;border:0;color:var(--celeste);font:inherit;font-size:.85rem; cursor:pointer;padding:0} .acciones button:hover{text-decoration:underline} .pastilla{display:inline-block;font-size:.74rem;padding:.15rem .55rem;border-radius:999px; border:1px solid transparent;white-space:nowrap} .pastilla.verde{background:rgba(52,211,153,.13);color:var(--ok);border-color:rgba(52,211,153,.28)} .pastilla.roja{background:var(--alerta-fondo);color:var(--alerta);border-color:var(--alerta-borde)} .pastilla.azul{background:var(--tinte);color:var(--celeste);border-color:var(--borde-vivo)} .pastilla.gris{background:var(--campo);color:var(--tenue);border-color:var(--borde-vivo)} .ok{background:rgba(52,211,153,.10);border:1px solid rgba(52,211,153,.30);color:var(--ok); padding:.7rem .85rem;border-radius:10px;font-size:.88rem;margin-bottom:1rem} .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem 1rem; margin-top:1rem} .rejilla .ancho-total{grid-column:1/-1} .rejilla label{margin-top:0} .btn.angosto{width:auto;margin-top:.6rem;padding:.6rem 1.1rem} .btn.peligro{background:linear-gradient(90deg,#ef4444,#b91c1c);color:#fff} /* ── prueba de conexión: un renglón por paso ─────────────────────────────── */ .pasos{list-style:none;padding:0;margin:1.2rem 0 0} .pasos li{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0; border-top:1px solid var(--borde)} .pasos .marca-paso{font-weight:700;width:1.2rem;flex:0 0 auto;text-align:center} .pasos li.bien .marca-paso{color:var(--ok)} .pasos li.mal .marca-paso{color:var(--alerta)} .sugerencia{font-size:.84rem;color:var(--tenue);margin-top:.2rem} /* ── diferencias ─────────────────────────────────────────────────────────── */ .diff{margin:0;padding:.9rem 1rem;background:var(--campo);border:1px solid var(--borde-vivo); border-radius:10px;overflow-x:auto;font-family:ui-monospace,Consolas,monospace; font-size:.82rem;line-height:1.5;white-space:pre} .diff .mas{color:var(--ok);display:block} .diff .menos{color:var(--alerta);display:block} .diff .tramo{color:var(--celeste);display:block;opacity:.85} /* En los formularios en rejilla el botón no ocupa todo el ancho: un botón de 900 px para confirmar seis campos se lee como una barra, no como un botón. */ .rejilla .btn{width:auto;margin-top:.2rem;padding:.65rem 1.4rem} .rejilla .ancho-total{margin-top:.4rem} .bloque form.rejilla{margin-bottom:0}