/* ============================================================================
   login-glass.css — EL CRISTAL DE LOS DOS LOGINS (tanda 3c · SPEC_APP_TECNICO_V3, 03/09/2026)
   Lo comparten public/login.html (escritorio) y public/app-tecnico/login.html (técnico).
   Antes vivía inline en login.html y el del técnico era un navy sólido con otra tarjeta: dos
   pantallas de entrada con dos aspectos para la misma marca. Ahora hay UNA hoja: si cambia el
   cristal, cambia en las dos (R-CONVERGENCIA). Los VALORES siguen en tokens.css (P-SSU); aquí
   sólo se les da uso. Lo que es SOLO del escritorio (escaparate, cookies, alta, versión) sigue
   inline en login.html.
   ============================================================================ */


/* ==========================================================================
   KREPKO · Login "liquid glass" claro — tokens de marca 2026
   navy #0A2340 · teal #12B8AB · naranja #FF8C42 (SOLO acción)
   Cristal claro: blanco translúcido + blur 20px, borde blanco, sombra suave
   ========================================================================== */
:root{
  /* Los valores viven en /css/tokens.css (P-SSU). Aquí solo se les da el
     nombre corto que usa el CSS de esta maqueta. */
  --navy:var(--k-navy); --teal:var(--k-teal); --teal-ink:var(--k-teal-ink);
  --naranja:var(--k-naranja); --naranja-hover:var(--k-naranja-hover);
  --ink:var(--k-ink); --ink-2:var(--k-ink-2); --ink-3:var(--k-ink-3);
  --glass:var(--k-glass);
  --glass-input:var(--k-glass-input);
  --glass-border:var(--k-glass-border);
  --hairline:var(--k-glass-line);
  --glass-blur:var(--k-glass-blur);
  --r-xl:var(--k-r-glass); --r:14px; --r-sm:11px;
  --font-brand:var(--k-font-brand);
  --font-ui:var(--k-font-ui);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  font-family:var(--font-ui);font-size:15px;color:var(--ink);
  background:
    radial-gradient(820px 560px at 90% -8%, rgba(18,184,171,.16), transparent 60%),
    radial-gradient(760px 560px at -8% 104%, rgba(255,140,66,.13), transparent 55%),
    radial-gradient(640px 480px at 68% 72%, rgba(57,135,229,.10), transparent 60%),
    linear-gradient(150deg,#F6F9FB 0%,#F0F4F8 55%,#EAF0F6 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

.blob{position:fixed;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none;z-index:0}

.blob.b1{width:420px;height:420px;background:rgba(18,184,171,.20);top:-130px;right:15%}

.blob.b2{width:380px;height:380px;background:rgba(255,140,66,.16);bottom:-120px;left:5%}

.blob.b3{width:300px;height:300px;background:rgba(109,167,236,.18);top:40%;left:44%}

.watermark{position:fixed;right:-150px;top:-130px;width:600px;opacity:.04;pointer-events:none;z-index:0}


.login{position:relative;z-index:1;display:flex;align-items:center;gap:48px;min-height:100vh;padding:44px 56px}


/* ----- cristal claro ----- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:0 22px 60px rgba(16,42,67,.14), 0 2px 8px rgba(16,42,67,.06), inset 0 1px 0 rgba(255,255,255,.95);
  position:relative;overflow:hidden;
}

.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 30%, transparent 48%);
}


/* ----- panel formulario ----- */
.panel-form{width:min(440px,100%);flex:none;border-radius:var(--r-xl);padding:40px 42px 30px;display:flex;flex-direction:column}

.brand{display:flex;align-items:center;gap:11px;position:relative}

.brand svg{width:36px;height:auto;flex:none}

.brand .wordmark{font-family:var(--font-brand);font-weight:800;font-size:20px;letter-spacing:.02em;color:var(--navy)}

h1{font-family:var(--font-brand);font-weight:700;font-size:25px;letter-spacing:-.01em;margin-top:32px;position:relative;color:var(--ink)}

.sub{color:var(--ink-2);font-size:14px;margin-top:6px;position:relative}

form{margin-top:26px;display:flex;flex-direction:column;gap:16px;position:relative}

label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}

.field input{
  width:100%;height:47px;padding:0 15px;font:inherit;color:var(--ink);
  background:var(--glass-input);
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  transition:border-color .12s, box-shadow .12s, background .12s;
}

.field input::placeholder{color:var(--ink-3)}

.field input:focus{
  outline:none;border-color:var(--teal);background:rgba(255,255,255,.95);
  box-shadow:0 0 0 3px rgba(18,184,171,.18);
}

.pw-wrap{position:relative}

.pw-wrap input{padding-right:48px}

.pw-toggle{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;border:none;background:none;
  color:var(--ink-3);cursor:pointer;border-radius:9px;
}

.pw-toggle:hover{background:rgba(19,26,38,.06);color:var(--ink-2)}

.row-aux{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:10px}

.remember{display:flex;align-items:center;gap:8px;color:var(--ink-2);cursor:pointer;white-space:nowrap}

.remember input{width:16px;height:16px;accent-color:var(--teal)}

.forgot{color:var(--teal-ink);text-decoration:none;font-weight:500;white-space:nowrap}

.forgot:hover{color:var(--navy);text-decoration:underline}

.btn-entrar{
  height:49px;border:none;border-radius:var(--r-sm);cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 44%), var(--naranja);
  color:#FFFFFF;font:600 15px var(--font-ui);
  box-shadow:0 10px 24px rgba(255,140,66,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition:filter .12s, transform .06s;
}

.btn-entrar:hover{filter:brightness(1.05)}

.btn-entrar:active{transform:translateY(1px)}

.btn-entrar:focus-visible{outline:3px solid rgba(18,184,171,.5);outline-offset:2px}

.error{
  display:none;background:rgba(208,59,59,.10);border:1px solid rgba(208,59,59,.25);
  color:#B02F2F;border-radius:var(--r-sm);padding:11px 14px;font-size:13.5px;font-weight:500;position:relative;
}

.error.visible{display:block}

.foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:28px;position:relative}



#forgotPanel{display:none;margin-top:14px;padding:15px;background:var(--glass-input);
  border:1px solid var(--hairline);border-radius:var(--r-sm);position:relative}

#forgotMsg{display:none;text-align:center;font-size:12.5px;margin-top:10px;color:var(--ink-2)}

.btn-sec{width:100%;height:44px;margin-top:8px;border:1px solid var(--teal);border-radius:var(--r-sm);
  background:transparent;color:var(--teal-ink);font:600 14px var(--font-ui);cursor:pointer}

.btn-sec:hover{background:rgba(18,184,171,.08)}

/* En 390px «Mantener sesión» y «¿Has olvidado tu contraseña?» no caben en una
   línea: la maqueta los deja en nowrap y el enlace se salía del cristal. Que
   baje en vez de cortarse — un enlace a medias no se puede ni leer ni pulsar. */
@media (max-width:430px){
  .row-aux{flex-wrap:wrap;gap:8px}
  .row-aux .forgot{white-space:normal}
}


/* ======================================================================
   Modo oscuro — SOLO esta pantalla (Vincent, 29-30/08: el interior de la
   app sigue en blanco y limpio). Las variables las redefine tokens.css
   bajo .k-dark-scope; aquí van únicamente las reglas que NO son variables
   y que el fichero krepko-login-oscuro.html resuelve de otra forma.
   ====================================================================== */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) body{
    background:
      radial-gradient(900px 600px at 88% -10%, rgba(18,184,171,.28), transparent 60%),
      radial-gradient(800px 600px at -10% 105%, rgba(255,140,66,.20), transparent 55%),
      radial-gradient(700px 500px at 65% 70%, rgba(57,135,229,.16), transparent 60%),
      linear-gradient(152deg,#081A30 0%,#0A2340 55%,#0D2C4F 100%);
  }
  html:not([data-theme="light"]) .glass{
    box-shadow:0 24px 70px rgba(3,10,22,.45), inset 0 1px 0 rgba(255,255,255,.28);
  }
  html:not([data-theme="light"]) .glass::before{
    background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 28%, transparent 46%);
  }
  html:not([data-theme="light"]) .blob{opacity:.5;filter:blur(70px)}
  html:not([data-theme="light"]) .blob.b1{background:rgba(18,184,171,.35)}
  html:not([data-theme="light"]) .blob.b2{background:rgba(255,140,66,.25)}
  html:not([data-theme="light"]) .blob.b3{background:rgba(109,167,236,.28)}
  html:not([data-theme="light"]) .watermark{opacity:.05}
  html:not([data-theme="light"]) .watermark svg g{fill:#7FB2E8}
  html:not([data-theme="light"]) .brand .wordmark,
  html:not([data-theme="light"]) .claim h2{color:var(--k-ink)}
  html:not([data-theme="light"]) .brand svg g{fill:#F4F8FC}
  html:not([data-theme="light"]) .field input{border-color:rgba(255,255,255,.18)}
  html:not([data-theme="light"]) .field input:focus{background:rgba(255,255,255,.11)}
  html:not([data-theme="light"]) .pw-toggle:hover{background:rgba(255,255,255,.10)}
  html:not([data-theme="light"]) .error{background:rgba(208,59,59,.22);border-color:rgba(230,103,103,.4);color:#FFC9C9}
  html:not([data-theme="light"]) .mini .delta{color:#8BE99A}
  html:not([data-theme="light"]) .chip{border-color:rgba(255,255,255,.16)}
  html:not([data-theme="light"]) .chip.ok{background:rgba(12,163,12,.22);color:#8BE99A}
  html:not([data-theme="light"]) .chip.firmado{background:rgba(18,184,171,.2);color:#63DFD2}
  html:not([data-theme="light"]) .plan .slot.s-ghost{background:rgba(255,255,255,.09)}
  html:not([data-theme="light"]) #cookieBanner button{color:#fff}
  /* El logo lo sube el TENANT y no sabemos de qué color es: un PNG con tinta
     oscura y fondo transparente desaparece sobre el navy. Invertirlo con un
     filtro destrozaría los que sí son de color, así que va sobre una tarjeta
     blanca — legible sea cual sea el logo, y sin tocar el logo. */
  html:not([data-theme="light"]) #loginLogo:has(img){
    background:rgba(255,255,255,.94);border-radius:10px;padding:7px 11px;
    align-self:flex-start;box-shadow:0 2px 10px rgba(3,10,22,.28)
  }
}