/*
 * CPQ — Estilos de la página de acceso (login.html)
 * Fondo shader WebGL + fallback estático + viñeta de enfoque.
 * Integrado desde el prototipo raw/login_shader_opcion_a_ajustada_1.html (2026-06-11).
 * login es dark fijo (sin data-theme, por acuerdo); los colores derivan de
 * tokens.css — el shader los lee en runtime (getComputedStyle → uniforms,
 * Liquid Glass 2026-07-12); la vieja excepción de sync quedó retirada.
 */
/* ═══ Estilos de página — login y recuperar-password (PND-011 lote 4, 2026-06-11)
   Migrados desde los <style> de ambos HTML (ya sin bloque inline).
   Scoping: body.pg-login / body.pg-recuperar para las divergencias. ═══ */

/* ── Base compartida por ambas páginas ── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* login/recuperar no cargan cpq-shared.css — utilidad de ocultamiento local (lote 6) */
.hidden{display:none!important}
body{font-family: var(--sans); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; -webkit-font-smoothing: antialiased;}
.card-logo{display: flex; justify-content: center; margin-bottom: 24px;}
.card-logo img{max-width: 130px; height: auto; display: block;}
.card-tag{font-family: var(--mono); font-size:var(--fs-chip); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px;}
.form-group{margin-bottom: 16px;}
.form-label{display: block; font-family: var(--sans); font-size:var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;} /* converge al canon (Tanda B): sans por D5 */
.form-input{width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 9px 14px; color: var(--text); font-family: var(--sans); font-size:var(--fs-body); outline: none; transition: border-color .15s;} /* converge al canon (Tanda B) */
.form-input:focus{border-color: var(--accent);}
.form-input.input-ok{border-color:var(--accent2)}
.form-input.input-err{border-color:var(--danger)}
.form-input::placeholder{color: var(--muted); opacity: .6;}
.auth-submit{width: 100%; padding: 11px; margin-top: 8px; background: var(--accent); color: var(--white); border: none; border-radius: 6px; font-family: var(--sans); font-size:var(--fs-data); font-weight: 500; cursor: pointer; transition: opacity .15s, transform .1s; display: flex; align-items: center; justify-content: center; gap: 8px;}
.auth-submit:hover{opacity: .88;}
.auth-submit:active{transform: scale(.99);}
.auth-submit:disabled{opacity: .45; cursor: not-allowed; transform: none;}
.auth-submit--ok{background:var(--accent2)}
.error-message{background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); border-radius: 6px; padding: 9px 12px; font-size:var(--fs-body); margin-top: 12px;}
.loading{display: flex; align-items: center; gap: 8px; color: var(--muted); font-size:var(--fs-body); margin-top: 12px; justify-content: center;}
.spinner{width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0;}
.success-message{background: color-mix(in srgb, var(--accent2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent); color: var(--accent2); border-radius: 6px; padding: 9px 12px; font-size:var(--fs-body); margin-top: 12px;}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Divergencias por página (base = valores de login) ── */
.login-card{width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 36px 32px 28px; position:relative; z-index:2;} /* z-index 2: la tarjeta queda sobre las capas del shader de fondo (fusión de la def ex ~:97) */
body.pg-recuperar .login-card{max-width:420px}
.auth-title{font-size:var(--fs-display); font-weight: 300; color: var(--text); margin-bottom: 28px;}
body.pg-recuperar .auth-title{margin-bottom:6px}
body.pg-login .card-footer{margin-top: 20px; display: flex; flex-direction: column; gap: 14px; align-items: center;}
body.pg-recuperar .card-footer{margin-top: 20px; text-align: center;}

/* ── Solo login (modal de recuperación, links, nota de dominio) ── */
.forgot-link{font-size:var(--fs-body-sm); color: var(--muted); cursor: pointer; background: none; border: none; font-family: var(--sans); transition: color .15s;}
.forgot-link:hover{color: var(--text);}
.domain-note{font-family: var(--mono); font-size:var(--fs-chip); color: var(--muted); letter-spacing: .04em; opacity: .7;}
.modal-overlay{position: fixed; inset: 0; background: var(--scrim); display: flex; justify-content: center; align-items: center; z-index: 100; backdrop-filter: blur(4px);}
.modal-card{width: 90%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 28px; position: relative; animation: fadeUp .2s ease; box-shadow: 0 24px 60px color-mix(in srgb, var(--shadow-color) 50%, transparent);}
.modal-close{position: absolute; top: 14px; right: 14px; background: none; border: 1px solid var(--border); color: var(--muted); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size:var(--fs-data); display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s;}
.modal-close:hover{border-color: var(--text); color: var(--text);}
.modal-close svg{width:14px;height:14px}
.req-icon svg{width:11px;height:11px;display:block;margin:0 auto}
.password-match-indicator svg{vertical-align:-1.5px;margin-right:4px}
.back-link svg{vertical-align:-1.5px;margin-right:4px}
.modal-tag{font-family: var(--mono); font-size:var(--fs-chip); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px;}
.modal-title{font-size:var(--fs-section); font-weight: 300; margin-bottom: 20px;}
@keyframes fadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }

/* ── Solo recuperar-password (requisitos, match, código) ── */
.auth-sub{font-size:var(--fs-body); color: var(--muted); margin-bottom: 28px; line-height: 1.5;}
.form-input[readonly]{opacity: .5; cursor: not-allowed;}
#resetCode{font-family: var(--mono); font-size:var(--fs-section); font-weight: 600; letter-spacing: .3em; text-align: center;}
.password-requirements{background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin-top: 8px;}
.requirement{display: flex; align-items: center; gap: 8px; font-size:var(--fs-body-sm); color: var(--muted); padding: 3px 0; transition: color .15s;}
.req-icon{font-family: var(--mono); font-size:var(--fs-label); width: 14px; flex-shrink: 0; text-align: center;}
.requirement.valid{color: var(--accent2);}
.requirement.invalid{color: var(--danger);}
.password-match-indicator{margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size:var(--fs-body-sm); font-family: var(--mono); display: none;}
.password-match-indicator.match{background: color-mix(in srgb, var(--accent2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent); color: var(--accent2); display: block;}
.password-match-indicator.no-match{background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); display: block;}
.back-link{font-size:var(--fs-body-sm); color: var(--muted); text-decoration: none; transition: color .15s;}
.back-link:hover{color: var(--text);}
.bg-layer{position:fixed;inset:0;z-index:0}
#shader-canvas{width:100%;height:100%;display:block}

/* Fallback si WebGL no está disponible o prefers-reduced-motion (lo activa JS) */
.bg-fallback{
  position:fixed;inset:0;z-index:0;display:none;
  background:
    radial-gradient(60% 80% at 20% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(50% 70% at 80% 70%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 60%),
    var(--bg);
}
.bg-fallback.visible{display:block}

/* Viñeta sutil para enfocar la tarjeta */
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(80% 80% at 50% 45%, transparent 40%, color-mix(in srgb, var(--bg) 55%, transparent) 100%);
}

/* Efecto vidrio (del prototipo, adoptado y afinado 2026-06-11): tarjeta
   translúcida que desenfoca y SATURA el shader detrás (saturate amplifica los
   acentos apagados del campo — clave sobre fondo oscuro), con canto superior
   iluminado y sombra de profundidad. Solo si el navegador soporta
   backdrop-filter — sin soporte, la tarjeta conserva su fondo opaco
   (legibilidad ante el campo animado). body.pg-login .login-card: gana sobre la base y
   aplica SOLO en login (recuperar no tiene shader detrás). */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  body.pg-login .login-card{
    /* vidrio grueso (iteración 2026-06-12): difusión profunda, transparencia 54%,
       esquinas de lámina (28px) y CANTO grueso dibujado por el ::before */
    background:color-mix(in srgb, var(--surface) 54%, transparent);
    backdrop-filter:blur(22px) saturate(1.6);
    -webkit-backdrop-filter:blur(22px) saturate(1.6);
    border-color:transparent;
    border-radius:28px;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent),
      0 2px 10px color-mix(in srgb, var(--shadow-color) 35%, transparent),
      0 28px 70px color-mix(in srgb, var(--shadow-color) 50%, transparent);
  }
  /* El canto de la lámina: anillo de 2.5px con luz asimétrica — brillante donde
     entra la luz (arriba-izquierda), oscuro al lado opuesto, con un re-brillo
     sutil en la esquina inferior derecha (los cantos atrapan luz dos veces). */
  body.pg-login .login-card::before{
    content:'';
    position:absolute; inset:0; border-radius:inherit; padding:4px;
    background:linear-gradient(135deg,
      color-mix(in srgb, var(--text) 55%, transparent),
      color-mix(in srgb, var(--text) 8%, transparent) 30%,
      color-mix(in srgb, var(--shadow-color) 30%, transparent) 55%,
      color-mix(in srgb, var(--text) 12%, transparent) 78%,
      color-mix(in srgb, var(--text) 45%, transparent));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
    pointer-events:none;
  }
}

/* Accesibilidad: con "reducir movimiento" del SO se anulan las animaciones del login (página autónoma — no carga cpq.css/cpq-shared.css) */
@media (prefers-reduced-motion: reduce){
  .spinner{animation:none}
  .modal-card{animation:none}
}

/* ── Liquid Glass (2026-07-12): con el shader-lente activo (body.glass-live,
   la añade cpq-login-shader.js) la tarjeta se ADELGAZA — la refracción, el
   canto especular y la sombra los dibuja el shader; el CSS solo garantiza
   la legibilidad del formulario. Sin WebGL no existe .glass-live y rige el
   vidrio esmerilado clásico de arriba. ── */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  body.pg-login.glass-live .login-card{
    /* SIN blur: cualquier desenfoque del fondo esmerila la lente del shader.
       El vidrio es nítido — solo un velo mínimo para asentar el formulario. */
    background:color-mix(in srgb, var(--surface) 8%, transparent);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
  }
  body.pg-login.glass-live .login-card::before{display:none}
  /* Mini-glass del modal de recuperación (aprobado 2026-07-12): la LENTE del
     shader salta al modal (morph en el frame loop); el CSS adelgaza el modal y
     quita el blur del velo — el desenfoque esmerilaría la lente (lección del
     glass del card). La tarjeta del login se desvanece mientras el modal está
     abierto (body.modal-open, lo marca login.html) para no dejar texto detrás. */
  body.pg-login.glass-live .modal-overlay{background:color-mix(in srgb, var(--bg) 45%, transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
  body.pg-login.glass-live .modal-card{background:color-mix(in srgb, var(--surface) 10%, transparent);border-color:transparent;box-shadow:none;animation:none}
  body.pg-login.glass-live .login-card{transition:opacity .25s}
  body.pg-login.glass-live.modal-open .login-card{opacity:0}
}