/* ============================================================================
 * auth.css — Pantalla de acceso (liquid glass) con la paleta del cotizador.
 * ==========================================================================*/

/* El atributo hidden debe ganar aunque los formularios usen display:flex. */
.auth-gate[hidden], .auth-form[hidden], #auth-sol-pass-campo[hidden] { display: none !important; }

/* Arranque sin parpadeos (lo decide el script del <head>): con sesión guardada se
   muestra "Verificando sesión…" en vez del formulario; sin sesión, el formulario.
   En ambos casos el gate cubre la app desde el primer píxel. */
.auth-cargando {
  display: none; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 4px 8px; color: rgba(255, 255, 255, .9); font-size: 14px; letter-spacing: .2px;
}
.auth-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .32); border-top-color: #fff;
  animation: auth-spin .8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
html.boot-auth #auth-form { display: none !important; }
html.boot-auth #auth-cargando { display: flex; }
/* "Actualización" (top__meta) tiene display:flex en app.css; forzamos ocultarlo. */
.top__meta[hidden] { display: none !important; }
/* El chip de usuario va en el encabezado, alineado a la derecha y visible. */
.top .top__bar > #auth-chip { margin-left: auto; }

.pre-auth .app-shell,
.pre-auth .hoja,
.pre-auth .firma { filter: blur(2px); pointer-events: none; }

/* Con el login abierto se bloquea el scroll del fondo: evita la barra de
   desplazamiento a la derecha y que, en móvil, un scroll rápido alcance a ver la
   app sin iniciar sesión. (Al entrar, se quita .pre-auth y el scroll vuelve.) */
html:has(body.pre-auth) { overflow: hidden; }
/* position:fixed bloquea el scroll de forma fiable en todos los móviles (incl. iOS),
   donde overflow:hidden a veces no basta. El fondo (app-shell) queda recortado y el
   gate lo cubre; al entrar se quita .pre-auth y el scroll vuelve a la normalidad. */
body.pre-auth { position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; }

.auth-gate {
  position: fixed; inset: 0; z-index: 9000;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  /* TEAL profundo (serio pero con vida), con resplandores suaves. */
  background:
    radial-gradient(60% 55% at 88% -5%, rgba(34,193,210,.16) 0%, transparent 60%),
    radial-gradient(58% 48% at 6% 105%, rgba(10,160,184,.16) 0%, transparent 60%),
    linear-gradient(140deg, #07424c 0%, #0a555f 50%, #0c6a73 100%);
  -webkit-font-smoothing: antialiased;
}
/* Gráficos como los de la barra superior: línea cian arriba + aros concéntricos. */
.auth-gate::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, #22c1d2, #12b4cb 55%, rgba(18,180,203,0) 92%);
}
.auth-gate::after {
  content: ''; position: fixed; top: -150px; right: -120px; width: 460px; height: 460px; border-radius: 50%; z-index: 0; pointer-events: none;
  border: 1px solid rgba(160,230,255,.18);
  box-shadow: 0 0 0 42px rgba(160,230,255,.05), 0 0 0 88px rgba(160,230,255,.035), 0 0 0 136px rgba(160,230,255,.022);
}
.auth-gate .auth-card { position: relative; z-index: 1; }  /* la tarjeta va sobre los gráficos */
.auth-gate[hidden] { display: none; }

/* Tarjeta de cristal */
.auth-card {
  position: relative;
  width: 100%; max-width: 384px;
  padding: 32px 28px 30px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 30px 70px -20px rgba(20, 8, 60, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  color: #fff;
  animation: auth-card-in .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes auth-card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

.auth-logo {
  width: 96px; height: 96px; margin: 0 auto 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .8);
  overflow: hidden;
}
.auth-logo img { width: 72%; height: 72%; object-fit: contain; }

/* Variante insignia: la propia insignia teal es el círculo (llena el contenedor),
   con sombra para separarla del fondo teal del login. */
.auth-logo--badge {
  background: transparent;
  border: 0;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
}
.auth-logo--badge img { width: 100%; height: 100%; }

.auth-form { display: flex; flex-direction: column; gap: 4px; }

.auth-field {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 13px;
  padding: 13px 14px; margin-top: 12px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.auth-field svg { width: 18px; height: 18px; color: rgba(255, 255, 255, .78); flex: 0 0 auto; }
.auth-field input {
  flex: 1; border: 0; background: transparent; outline: none;
  color: #fff; font-size: 15px; letter-spacing: .2px;
}
.auth-field input::placeholder { color: rgba(255, 255, 255, .62); }
.auth-field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.auth-field:focus-within {
  border-color: #22C1D2;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 3px rgba(34, 193, 210, .22);
}
.auth-field:focus-within svg { color: #bff0f6; }

.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 2px 4px; font-size: 12.5px; color: rgba(255, 255, 255, .85);
}
.auth-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.auth-check input { width: 15px; height: 15px; accent-color: #0AA0B8; }
.auth-link {
  background: none; border: 0; color: rgba(255, 255, 255, .85);
  font: inherit; cursor: pointer; text-decoration: none;
}
.auth-link:hover { color: #fff; text-decoration: underline; }

.auth-btn {
  margin-top: 18px; width: 100%; padding: 14px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #17b8cc 0%, #067e90 100%);
  box-shadow: 0 14px 30px -10px rgba(6, 110, 128, .85), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .12s ease, box-shadow .18s ease, filter .15s ease, opacity .15s;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -10px rgba(6, 110, 128, 1); filter: brightness(1.04); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: .7; cursor: default; }

.auth-msg {
  margin-top: 14px; padding: 9px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.35;
}
.auth-msg--error { background: rgba(220, 60, 60, .22); border: 1px solid rgba(255, 120, 120, .4); color: #ffdede; }
.auth-msg--info  { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #eef4ff; }
.auth-msg--ok    { background: rgba(21, 163, 74, .24); border: 1px solid rgba(90, 220, 140, .45); color: #daffe6; }

/* Panel de solicitud (olvidé / desbloqueo) */
.auth-solicitud { display: flex; flex-direction: column; }
.auth-sol-head { text-align: center; margin-bottom: 8px; }
.auth-sol-head h3 { font-size: 18px; margin: 0 0 6px; }
.auth-sol-head p { font-size: 12.5px; color: rgba(255, 255, 255, .8); margin: 0; line-height: 1.4; }
.auth-solicitud textarea {
  margin-top: 14px; width: 100%; min-height: 64px; resize: vertical;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px;
  background: rgba(255, 255, 255, .08); color: #fff; padding: 10px; font: inherit; font-size: 13px; outline: none;
}
.auth-solicitud textarea::placeholder { color: rgba(255, 255, 255, .55); }
.auth-sol-actions { display: flex; gap: 10px; margin-top: 16px; }
.auth-sol-actions .auth-btn { margin-top: 0; }
.auth-sol-volver {
  flex: 0 0 auto; padding: 13px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08);
  color: #fff; font: inherit; font-weight: 500;
}
.auth-foot {
  margin-top: 22px; text-align: center; font-size: 11px; color: rgba(255, 255, 255, .55);
  letter-spacing: .4px;
}

/* Chip de usuario + salir (en la barra superior de la app) */
.auth-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line, #E3E9ED);
}
.auth-chip__perfil { border: 0; background: none; cursor: pointer; text-align: left; display: flex; flex-direction: column; line-height: 1.2; padding: 0; }
.auth-chip__perfil:hover .auth-chip__nombre { text-decoration: underline; }
.auth-chip__nombre { font-weight: 600; font-size: 13px; color: var(--ink, #0E1620); }
.auth-chip__rol { font-size: 11px; color: var(--muted, #6A7C8A); }

/* Datos del perfil */
.perfil-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line, #E3E9ED); }
.perfil-datos > div { display: flex; flex-direction: column; }
.perfil-datos span { font-size: 11px; color: var(--muted, #6A7C8A); text-transform: uppercase; letter-spacing: .03em; }
.perfil-datos b { font-size: 14px; color: var(--ink, #0E1620); }
.perfil-cp .auth-msg { margin-top: 4px; }
.auth-chip__salir {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 5px 12px; font-size: 12px; font-weight: 500; color: #fff;
  background: linear-gradient(135deg, #067e90, #06333c);
}
.auth-chip__salir:hover { filter: brightness(1.1); }

@media (max-width: 420px) {
  .auth-card { padding: 26px 20px; border-radius: 20px; }
  .auth-logo { width: 82px; height: 82px; }
}

/* ==========================================================================
 * Candado por conexión: bloquea la app cuando no se puede confirmar la sesión
 * con el servidor (sin internet). z-index por encima de los modales de la app
 * (cp-modal 9600) y por debajo del gate de login; mostrarLogin() lo oculta.
 * ========================================================================== */
.net-lock {
  position: fixed; inset: 0; z-index: 9650; display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(6, 18, 40, .55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.net-lock[hidden] { display: none; }
.net-lock__card {
  width: 100%; max-width: 380px; text-align: center; padding: 30px 26px 26px; border-radius: 20px;
  color: #10233f; background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(238,244,251,.9));
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 40px 90px -30px rgba(6,18,40,.7), inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  animation: netlockIn .22s ease;
}
@keyframes netlockIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.net-lock__spin {
  display: inline-block; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%;
  border: 3px solid rgba(10, 46, 92, .18); border-top-color: #0057ff; animation: netlockSpin .8s linear infinite;
}
@keyframes netlockSpin { to { transform: rotate(360deg); } }
.net-lock__card h3 { margin: 0 0 8px; font-size: 19px; color: #061f5c; }
.net-lock__card p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: #3a4d63; }
.net-lock__btn {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, #0a9cb0 0%, #067e90 60%, #063a44 100%);
  box-shadow: 0 12px 26px -12px rgba(0, 66, 96, .8); transition: transform .15s ease, box-shadow .18s ease;
}
.net-lock__btn:hover { box-shadow: 0 16px 32px -12px rgba(0, 66, 96, .9); }
.net-lock__btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .net-lock__spin, .net-lock__card { animation: none; } }

/* Cambiar contraseña: medidor de fuerza + checklist de requisitos */
.pf-meter{ margin:10px 0 4px; }
.pf-meter__bar{ height:8px; border-radius:99px; background:var(--line,#E3E9ED); overflow:hidden; }
.pf-meter__bar > i{ display:block; height:100%; width:0; border-radius:99px; transition:width .18s ease, background .18s ease; }
.pf-meter__row{ display:flex; justify-content:space-between; margin-top:5px; font-size:12px; color:var(--muted,#6A7C8A); }
.pf-meter__row b{ font-weight:600; }
.pf-reqs{ list-style:none; margin:12px 0 4px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.pf-reqs li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted,#6A7C8A); }
.pf-reqs li .pf-ic{ width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line,#E3E9ED); display:grid; place-items:center; font-size:11px; color:transparent; flex:0 0 auto; }
.pf-reqs li.ok{ color:var(--ink,#0E1620); }
.pf-reqs li.ok .pf-ic{ background:#2f9e57; border-color:#2f9e57; color:#fff; }
.pf-match{ font-size:12.5px; margin-top:8px; min-height:16px; }
.pf-match.si{ color:#2f9e57; } .pf-match.no{ color:#d64562; }
@media (max-width:440px){ .pf-reqs{ grid-template-columns:1fr; } }
html[data-theme="dark"] .pf-reqs li.ok{ color:#e8ecf2; }
html[data-theme="dark"] .pf-reqs li .pf-ic{ border-color:rgba(255,255,255,.2); }
html[data-theme="dark"] .pf-match.si{ color:#5fd39a; }
html[data-theme="dark"] .pf-match.no{ color:#ff87b0; }

/* Panel "Mi perfil / Cambiar contraseña": versión compacta (que quepa sin salirse de
   la pantalla). Solo afecta a #perfil-modal; el resto de modales admin no cambia. */
#perfil-modal .admin-modal__card{ padding:16px 18px; max-width:390px; max-height:calc(100vh - 24px); overflow-y:auto; }
#perfil-modal .admin-modal__card h3{ margin:0 0 8px; font-size:18px; }
#perfil-modal .admin-modal__card > p{ margin:-4px 0 10px !important; }
#perfil-modal .perfil-datos{ gap:3px 16px; margin-bottom:9px; padding-bottom:9px; }
#perfil-modal .perfil-datos span{ font-size:10px; }
#perfil-modal .perfil-datos b{ font-size:12.5px; }
#perfil-modal .admin-field{ margin-bottom:6px; }
#perfil-modal .admin-field label{ margin-bottom:2px; font-size:11px; }
#perfil-modal .admin-field input{ padding:7px 10px; border-radius:9px; font-size:13px; }
#perfil-modal .pf-meter{ margin:6px 0 0; }
#perfil-modal .pf-meter__bar{ height:6px; }
#perfil-modal .pf-meter__row{ margin-top:4px; font-size:11px; }
#perfil-modal .pf-reqs{ margin:7px 0 0; gap:3px 14px; }
#perfil-modal .pf-reqs li{ font-size:11.5px; gap:6px; }
#perfil-modal .pf-reqs li .pf-ic{ width:15px; height:15px; font-size:10px; }
#perfil-modal .pf-match{ margin-top:4px; min-height:0; font-size:11.5px; }
#perfil-modal .admin-modal__actions{ margin-top:10px; }
#perfil-modal .admin-modal__actions .abtn{ padding:8px 14px; }

/* ============================================================================
 * Chip de usuario (Panel / Ayuda / Salir) sobre la barra AT&T (azul→morado).
 * Píldoras de vidrio: Panel = primaria blanca; Ayuda y Salir = vidrio.
 * Aplica en web y móvil (la barra superior es degradado en ambos).
 * ==========================================================================*/
.auth-chip{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.auth-chip__nombre{ color:#fff !important; }
.auth-chip__rol{ color: rgba(255,255,255,.78) !important; }

.auth-chip__panel,
.auth-chip__salir{
  border-radius: 999px !important; font-weight: 650 !important; border: 1px solid transparent;
  transition: background .15s ease, filter .15s ease, transform .1s ease, border-color .15s ease;
}
.auth-chip__panel:active,
.auth-chip__salir:active{ transform: translateY(1px); }

/* Panel = píldora blanca (acción primaria) */
#auth-panel-btn.auth-chip__panel{
  background:#fff !important; color:#0a4bb0 !important;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.35) !important;
}
#auth-panel-btn.auth-chip__panel:hover{ filter: brightness(.97); }

/* Ayuda = píldora de vidrio */
#auth-ayuda-btn.auth-chip__panel{
  background: rgba(255,255,255,.16) !important; color:#fff !important;
  border: 1px solid rgba(255,255,255,.34) !important; box-shadow:none !important;
}
#auth-ayuda-btn.auth-chip__panel:hover{ background: rgba(255,255,255,.26) !important; }

/* Salir = píldora de vidrio, con matiz de salida al pasar el cursor */
.auth-chip__salir{
  background: rgba(255,255,255,.12) !important; color:#fff !important;
  border: 1px solid rgba(255,255,255,.30) !important;
}
.auth-chip__salir:hover{
  background: rgba(255,120,140,.30) !important; border-color: rgba(255,150,160,.55) !important; filter:none !important;
}