/* Pantalla de acceso del portal (portada sin sesión). Independiente de portal.css: esta página no
   monta la SPA, así que se queda con lo justo y los mismos tokens de marca que el portal. */
:root{--bg:#080A0E;--panel:#111419;--line:#232833;--t1:#F4F6F8;--t2:#8F96A3;--t3:#5B626E;
      --teal-d:#2A8D79;--teal:#57BEB0;--teal-l:#7FD8CB;--grad:linear-gradient(100deg,#2A8D79 0%,#57BEB0 100%);
      --ojo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}

*{box-sizing:border-box}
html,body{height:100%}
body.ob-login{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--t1);
  background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex}
::selection{background:rgba(87,190,176,.28)}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── Columna del formulario ── */
.ob-panel{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:48px 32px;overflow:hidden}
/* El mismo fondo ambiental que el portal (resplandores y rejilla): al entrar no cambia de casa.
   Sin columna de marca: con verde a pantalla completa y con claim no gustó (Javier, 9-oct-2026). */
.ob-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 8% -5%,rgba(42,141,121,.26),transparent 60%),
    radial-gradient(45% 45% at 105% 8%,rgba(87,190,176,.12),transparent 55%),
    radial-gradient(60% 60% at 50% 120%,rgba(42,141,121,.12),transparent 60%)}
.ob-panel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 80%);mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 80%)}
/* La tarjeta es la misma «glass» de los paneles del portal. */
.ob-form-wrap{position:relative;z-index:1;width:100%;max-width:448px;padding:44px 44px 36px;
  background:rgba(20,24,31,.55);border:1px solid rgba(255,255,255,.08);border-radius:22px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 70px -35px rgba(0,0,0,.9)}
.ob-logo{display:block;height:30px;width:auto;margin-bottom:38px}

.ob-login h1{font-size:30px;line-height:1.15;letter-spacing:-.03em;font-weight:800;margin:0 0 10px}
.ob-sub{margin:0 0 30px;color:var(--t2);font-size:14.5px;line-height:1.6}

.ob-login label{display:block;font-size:12.5px;font-weight:600;color:#B7BDC7;margin-bottom:7px}
.ob-login input[type=password],.ob-login input[type=text]{
  width:100%;min-height:48px;padding:0 14px;font:400 15px Inter,system-ui,sans-serif;color:var(--t1);
  background:#0C0E13;border:1px solid var(--line);border-radius:11px;margin-bottom:18px;
  transition:border-color .15s,box-shadow .15s}
.ob-login input::placeholder{color:var(--t3)}
.ob-login input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(87,190,176,.16)}
/* El autocompletado de Chrome pinta el campo de amarillo claro: en oscuro queda fatal. */
.ob-login input:-webkit-autofill{-webkit-text-fill-color:var(--t1);-webkit-box-shadow:0 0 0 1000px #0C0E13 inset;caret-color:var(--t1)}

/* El campo de contraseña lleva el ojo dentro, así que el margen lo pone el contenedor. */
.ob-pass{position:relative;margin-bottom:18px}
.ob-pass input{margin-bottom:0!important;padding-right:48px!important}
.ob-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border:0;background:transparent;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.ob-eye::before{content:"";width:19px;height:19px;background:var(--t2);
  -webkit-mask:var(--ojo) center/contain no-repeat;mask:var(--ojo) center/contain no-repeat}
.ob-eye[aria-pressed=true]::before{background:var(--teal)}
.ob-eye:hover{background:rgba(255,255,255,.05)}

.ob-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.ob-login .ob-check{display:flex;align-items:center;gap:9px;margin:0;font-size:13px;font-weight:400;color:var(--t2);cursor:pointer}
.ob-check input{width:17px;height:17px;accent-color:var(--teal-d);margin:0;cursor:pointer}
.ob-link{color:var(--teal);font-size:13px;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.ob-link:hover{color:var(--teal-l);border-bottom-color:var(--teal-l)}

.ob-submit{width:100%;min-height:50px;border:0;border-radius:11px;background:var(--grad);color:#fff;
  font:700 15px Inter,system-ui,sans-serif;cursor:pointer;transition:filter .15s,transform .15s;
  box-shadow:0 14px 30px -14px rgba(87,190,176,.55)}
.ob-submit:hover{filter:brightness(1.07)}
.ob-submit:active{transform:translateY(1px)}
.ob-submit:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.ob-help{margin:24px 0 0;font-size:13px;color:var(--t2);line-height:1.6}
.ob-legal{margin:30px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;color:var(--t3)}
.ob-legal a{color:var(--t3);text-decoration:underline;text-underline-offset:2px}
.ob-legal a:hover{color:var(--t2)}

/* Aviso y error: mismo sitio y mismo tamaño, para que la página no salte al fallar. */
.ob-alert,.ob-note{margin:0 0 22px;padding:13px 15px;border-radius:11px;font-size:13.5px;line-height:1.55}
.ob-alert{background:rgba(229,115,103,.08);border:1px solid rgba(229,115,103,.32);color:#F0A99F}
.ob-note{background:rgba(87,190,176,.08);border:1px solid rgba(87,190,176,.3);color:var(--teal-l)}

/* ── Móvil: el formulario arriba, no centrado en vertical ── */
@media (max-width:700px){
  .ob-panel{padding:40px 16px;align-items:flex-start;padding-top:8vh}
  .ob-login h1{font-size:26px}
  .ob-logo{margin-bottom:32px}
  .ob-form-wrap{padding:32px 22px 26px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}