/* ========================================
   AUTH KIT · variables de theme
   Cada default de acá es EXACTAMENTE el valor que ya estaba
   hardcodeado en las reglas de más abajo -- este bloque no cambia
   ningún color ni tamaño, solo los hace editables para una app que
   reutilice Auth Kit (copiando este archivo, o solo este bloque, y
   pisando los valores -- nunca las reglas que los consumen).
   ======================================== */
:root {
  --auth-primary-color: #5b8cff;
  --auth-primary-hover: #3b82f6;
  --auth-background: #080b12;
  --auth-surface: #111827;
  --auth-text: #f8fafc;
  --auth-text-muted: #9aa6b8;
  --auth-message-color: #cbd5e1;
  --auth-border: #293449;
  --auth-input-background: #080e18;
  --auth-button-radius: 11px;
  --auth-panel-radius: 20px;
  --auth-font-family: inherit;
  --auth-disabled-opacity: 0.6;

  /* Nombre/subtítulo del producto en la pantalla de acceso (ver
     #authBar::before/::after más abajo). Variables de CSS admiten
     valores string en content: -- una app nueva cambia el nombre acá,
     sin tocar ningún .js ni volver a maquetar el HTML. */
  --auth-brand-title: "PROMPT EVOLVE";
  --auth-brand-subtitle: "Tu motor creativo. Tus métodos. Tu trabajo.";
}

/* ========================================
   PROMPT EVOLVE · PANTALLA DE ACCESO
   ======================================== */

body:not(.authenticated) {
  overflow: hidden;
}

/* Pantalla completa antes del login */
body:not(.authenticated) #authBar {
  position: fixed;
  inset: 0;
  z-index: 9998;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(83, 92, 255, 0.18),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(0, 210, 255, 0.10),
      transparent 35%
    ),
    var(--auth-background);
}

/* Nombre de la app */
body:not(.authenticated) #authBar::before {
  content: var(--auth-brand-title);
  display: block;

  margin-bottom: 10px;

  font-size: clamp(38px, 7vw, 72px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.045em;

  color: var(--auth-text);
}

/* Subtítulo */
body:not(.authenticated) #authBar::after {
  content: var(--auth-brand-subtitle);
  display: block;

  margin-bottom: 34px;

  font-size: 15px;
  color: var(--auth-text-muted);
}

/* Botón principal */
body:not(.authenticated) #signupBtn {
  min-width: 220px;

  padding: 13px 22px;

  border: 0;
  border-radius: 12px;

  background: linear-gradient(
    135deg,
    var(--auth-primary-color),
    var(--auth-primary-hover)
  );

  color: var(--auth-text);

  font-size: 14px;
  font-weight: 800;

  cursor: pointer;
}

/* Panel flotante de login */
body:not(.authenticated) #loginPanel {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 9999;

  width: min(390px, calc(100% - 36px));

  padding: 26px;

  border: 1px solid var(--auth-border);
  border-radius: var(--auth-panel-radius);

  background: var(--auth-surface);
  font-family: var(--auth-font-family);

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55);
}

/* Campos */
body:not(.authenticated) #loginPanel input {
  width: 100%;

  margin-bottom: 12px;

  padding: 12px 13px;

  border: 1px solid var(--auth-border);
  border-radius: var(--auth-button-radius);

  background: var(--auth-input-background);
  color: var(--auth-text);

  outline: none;
}

body:not(.authenticated) #loginPanel input:focus {
  border-color: var(--auth-primary-color);
}

/* Botón Entrar */
body:not(.authenticated) #doLoginBtn {
  width: 100%;

  padding: 12px 18px;

  border: 0;
  border-radius: var(--auth-button-radius);

  background: linear-gradient(
    135deg,
    var(--auth-primary-color),
    var(--auth-primary-hover)
  );

  color: var(--auth-text);

  font-weight: 800;
  cursor: pointer;
}

/* auth.js nunca puso doLoginBtn.disabled = true, así que esta regla no
   estaba cubierta por el hallazgo original de la auditoría -- se
   agrega igual, por consistencia con los otros tres botones que sí se
   deshabilitan (ver más abajo), y porque una integración nueva puede
   optar por deshabilitarlo durante el login. Sin efecto en Prompt
   Evolve hoy (nunca se dispara). */
body:not(.authenticated) #doLoginBtn:disabled {
  opacity: var(--auth-disabled-opacity);
  cursor: not-allowed;
}

/* Mensajes */
body:not(.authenticated) #loginMessage {
  min-height: 20px;

  margin: 8px 0 12px;

  color: var(--auth-message-color);
  font-size: 12px;
}

/* Panel flotante de sesión guardada (mismo tratamiento que #loginPanel:
   sin esto, showSavedSession() lo mostraba en flujo normal del documento,
   sin position/z-index propios, y quedaba tapado por el overlay fijo
   de #authBar (z-index:9998), invisible aunque display:block. */
body:not(.authenticated) #savedSessionPanel {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 9999;

  width: min(390px, calc(100% - 36px));

  padding: 26px;

  border: 1px solid var(--auth-border);
  border-radius: var(--auth-panel-radius);

  background: var(--auth-surface);
  font-family: var(--auth-font-family);

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55);

  color: var(--auth-text);
  text-align: center;
}

body:not(.authenticated) #savedSessionPanel button {
  width: 100%;

  margin-top: 12px;

  padding: 12px 18px;

  border: 1px solid var(--auth-border);
  border-radius: var(--auth-button-radius);

  background: #0b1220;
  color: var(--auth-text);

  font-weight: 800;
  cursor: pointer;
}

body:not(.authenticated) #savedSessionPanel #continueSessionBtn {
  border: 0;
  background: linear-gradient(
    135deg,
    var(--auth-primary-color),
    var(--auth-primary-hover)
  );
}

/* ========================================
   PROMPT EVOLVE · RECUPERAR / ACTUALIZAR CONTRASEÑA
   (mismo tratamiento que #loginPanel/#signupPanel)
   ======================================== */

body:not(.authenticated) #forgotPasswordPanel,
body:not(.authenticated) #resetPasswordPanel {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 9999;

  width: min(390px, calc(100% - 36px));

  padding: 26px;

  border: 1px solid var(--auth-border);
  border-radius: var(--auth-panel-radius);

  background: var(--auth-surface);
  font-family: var(--auth-font-family);

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55);
}

body:not(.authenticated) #forgotPasswordPanel input,
body:not(.authenticated) #resetPasswordPanel input {
  width: 100%;

  margin-bottom: 12px;

  padding: 12px 13px;

  border: 1px solid var(--auth-border);
  border-radius: var(--auth-button-radius);

  background: var(--auth-input-background);
  color: var(--auth-text);

  outline: none;
}

body:not(.authenticated) #forgotPasswordPanel input:focus,
body:not(.authenticated) #resetPasswordPanel input:focus {
  border-color: var(--auth-primary-color);
}

body:not(.authenticated) #resetAccountEmail {
  opacity: 0.7;
  cursor: not-allowed;
}

body:not(.authenticated) #sendResetBtn,
body:not(.authenticated) #updatePasswordBtn {
  width: 100%;

  padding: 12px 18px;

  border: 0;
  border-radius: var(--auth-button-radius);

  background: linear-gradient(
    135deg,
    var(--auth-primary-color),
    var(--auth-primary-hover)
  );

  color: var(--auth-text);

  font-weight: 800;
  cursor: pointer;
}

/* sendResetBtn.disabled/updatePasswordBtn.disabled = true de verdad
   se usan hoy (ver auth.js, estado de carga de "Enviando..."/
   "Actualizando..."). Hasta esta auditoría no tenían NINGÚN estilo
   propio: un botón deshabilitado se veía idéntico a uno habilitado
   (el gradiente/cursor de arriba no reacciona a :disabled por sí
   solo). Auditoría de componentes visuales, sección "estados
   disabled". */
body:not(.authenticated) #sendResetBtn:disabled,
body:not(.authenticated) #updatePasswordBtn:disabled {
  opacity: var(--auth-disabled-opacity);
  cursor: not-allowed;
}

body:not(.authenticated) #resetMessage,
body:not(.authenticated) #updatePasswordMessage {
  min-height: 20px;

  margin: 8px 0 12px;

  color: var(--auth-message-color);
  font-size: 12px;
}

/* Cuando ya inició sesión */
body.authenticated #authBar {
  display: flex;

  justify-content: flex-end;
  align-items: center;

  padding: 10px 18px;

  background: var(--auth-background);

  border-bottom: 1px solid var(--auth-border);
}

body.authenticated #authLoggedIn {
  display: flex !important;

  align-items: center;
  gap: 10px;

  color: var(--auth-text-muted);

  font-size: 12px;
}

body.authenticated #logoutBtn {
  padding: 7px 11px;

  border: 1px solid var(--auth-border);
  border-radius: 9px;

  background: var(--auth-surface);
  font-family: var(--auth-font-family);
  color: var(--auth-text);

  cursor: pointer;
}

/* ========================================
   PROMPT EVOLVE · PANEL CREAR CUENTA
   ======================================== */

body:not(.authenticated) #signupPanel {
  position: fixed;

  left: 50%;
  top: 61%;

  transform: translate(-50%, -50%);

  z-index: 9999;

  width: min(390px, calc(100% - 36px));

  padding: 26px;

  border: 1px solid var(--auth-border);
  border-radius: var(--auth-panel-radius);

  background: var(--auth-surface);
  font-family: var(--auth-font-family);

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55);
}

/* Campos del registro */
body:not(.authenticated) #signupPanel input {
  width: 100%;

  margin-bottom: 12px;

  padding: 12px 13px;

  border: 1px solid var(--auth-border);
  border-radius: var(--auth-button-radius);

  background: var(--auth-input-background);
  color: var(--auth-text);

  outline: none;
}

body:not(.authenticated) #signupPanel input:focus {
  border-color: var(--auth-primary-color);
}

/* Botón Crear cuenta */
body:not(.authenticated) #doSignupBtn {
  width: 100%;

  padding: 12px 18px;

  border: 0;
  border-radius: var(--auth-button-radius);

  background: linear-gradient(
    135deg,
    var(--auth-primary-color),
    var(--auth-primary-hover)
  );

  color: var(--auth-text);

  font-weight: 800;
  cursor: pointer;
}

/* doSignupBtn.disabled = true de verdad se usa hoy (ver signup.js,
   estado de carga de "Creando tu cuenta..."). Mismo hallazgo que
   sendResetBtn/updatePasswordBtn. */
body:not(.authenticated) #doSignupBtn:disabled {
  opacity: var(--auth-disabled-opacity);
  cursor: not-allowed;
}

/* Mensajes del registro */
body:not(.authenticated) #signupMessage {
  min-height: 20px;

  margin: 8px 0 12px;

  color: var(--auth-message-color);
  font-size: 12px;
}
/* ========================================
   PROMPT EVOLVE · GOOGLE AUTH
   ======================================== */

.google-auth-btn {
  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 11px 16px;

  border: 1px solid #d9dde5;
  border-radius: 11px;

  background: #ffffff;
  color: #1f2937;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.google-auth-btn:hover {
  background: #f8fafc;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.18);

  transform: translateY(-1px);
}

.google-auth-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.google-auth-btn img {
  width: 22px;
  height: 22px;

  object-fit: contain;
  flex-shrink: 0;
}

.google-auth-btn span {
  line-height: 1;
}

/* Separador "o" */
.auth-divider {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 12px;

  margin: 18px 0;

  color: #7f8ca3;
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: var(--auth-border);
}

.auth-divider span {
  padding: 0 3px;
}

/* Espaciado específico dentro de login y registro */
#loginPanel .google-auth-btn,
#signupPanel .google-auth-btn {
  margin-bottom: 0;
}

/* ========================================
   PROMPT EVOLVE · MOSTRAR/OCULTAR CONTRASEÑA
   Mismo lenguaje visual que .copyicon/.copy-svg
   (icono dentro del campo, alineado a la derecha).
   ======================================== */

.pw-field {
  position: relative;
  margin-bottom: 12px;

  /* .pw-field es un contenedor de bloque normal alrededor de un único
     <input> (inline-block por defecto): eso lo hacía participar de un
     contexto de formato en línea, que reserva espacio para el
     descendente de la fuente heredada DEBAJO de la línea base -- 12px
     fantasma, siempre hacia abajo, que agrandaban esta caja más allá
     de la caja real del input. .pw-toggle se centra con
     top:50%/translateY(-50%) contra ESTA caja, así que esos 12px de
     más corrían su centro 6px hacia abajo del centro real del input.
     display:flex saca al input de ese contexto en línea: la altura de
     .pw-field pasa a ser exactamente la altura real del input, sin
     espacio extra, y el centrado existente del botón queda correcto
     sin tocarlo. */
  display: flex;
  align-items: center;
}

.pw-field input {
  padding-right: 46px;
}

/* Causa real del desalineado vertical del ícono del ojo: .pw-field
   input { margin-bottom: 0 } (arriba) tiene menos especificidad
   (0 ids, 1 clase, 1 elemento) que las tres reglas que ya fijan
   margin-bottom:12px en estos mismos inputs (body:not(.authenticated)
   #loginPanel/#resetPasswordPanel/#signupPanel input -- 1 id, 1 clase,
   2 elementos cada una), así que nunca ganaba: el input seguía
   renderizando con 12px de margen inferior real. Con .pw-field ya en
   flex (arriba), ese margen -- invisible en el propio rect del input,
   pero SÍ contabilizado por el layout de flex al calcular la altura de
   la línea -- inflaba la caja de .pw-field 12px hacia abajo, corriendo
   6px el centro del botón (centrado con top:50%/translateY(-50%)
   contra esa caja) respecto del centro real del input. Se replica acá
   el mismo prefijo que ya usan esas tres reglas, agregando .pw-field
   antes de "input": mismo id, una clase más (2 contra 1) -- gana sin
   !important, sin negativos, sin tocar ningún otro valor. */
body:not(.authenticated) #loginPanel .pw-field input,
body:not(.authenticated) #resetPasswordPanel .pw-field input,
body:not(.authenticated) #signupPanel .pw-field input {
  margin-bottom: 0;
}

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);

  width: 32px;
  height: 32px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 8px;
  background: transparent;

  color: var(--auth-text-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.pw-toggle:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--auth-text);
}

.pw-eye {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}