/* ==========================================================================
   LeadSync - Pantalla de entrada
   El overlay de acceso y la "vitrina": la consola DIBUJADA que se ve al lado del
   formulario. Ojo, esas clases son las reales de la consola, no una copia.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* --- Overlay de autenticación --- */

/* Pantalla partida: a la izquierda la consola dibujada, a la derecha el formulario. La
   vitrina es lo primero que cede: por debajo de 1000px desaparece y el formulario ocupa
   la pantalla, que es como se entra desde un móvil. */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  background: var(--bg);
  z-index: 100;
}
.auth-card {
  flex: 0 0 420px;
  background: var(--bg-panel);
  padding: 0 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  box-shadow: -1px 0 0 var(--border);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.auth-brand span {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
}
.auth-card h1 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.auth-card p {
  color: var(--text-dim);
  font-size: 13.5px;
  margin-bottom: 12px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.auth-card .auth-logo {
  width: 34px;
  height: 34px;
  margin: 0;
}

/* --- Vitrina: la consola dibujada --- */
.auth-showcase {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 62px;

  /* Dos focos del verde de marca y una trama de puntos: da profundidad sin competir con
     la maqueta, que es lo que hay que mirar. */
  background:
    radial-gradient(120% 90% at 8% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 58%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    var(--bg);
}
.auth-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-dim) 22%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
}

/* La maqueta se dibuja a tamaño real (1120x700) y se ENCOGE con transform: así hereda las
   medidas exactas de la consola —altos de cabecera, tipografías, paddings— en vez de una
   versión aproximada a mano. La caja de fuera reserva el tamaño ya escalado. */
.auth-shot {
  position: relative;
  z-index: 1;
  width: calc(1120px * var(--shot-s, .62));
  height: calc(700px * var(--shot-s, .62));
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: -20px 34px 70px rgba(0, 0, 0, .42);
  transform: perspective(1600px) rotateY(-13deg) rotateX(3deg) rotate(-1deg);
}
.shot-app {
  width: 1120px;
  height: 700px;
  transform: scale(var(--shot-s, .62));
  transform-origin: top left;
  display: flex;
  background: var(--bg);
  cursor: default;
}
.shot-app .shot-sidebar {
  width: 320px;
  min-width: 0;
}

/* Nada de la vitrina reacciona al ratón: es un dibujo, no una consola. */
.shot-app * { pointer-events: none; }
.shot-app .session-item:hover { background: none; }
.shot-app .session-item.active:hover { background: var(--bg-elev); }
.shot-app .messages { padding: 18px 24px; }

/* El buscador de la vitrina es un texto, no un <input>: un campo de verdad se podría
   enfocar con el tabulador desde el formulario de al lado. */
.shot-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-dim);
  font-size: 13.5px;
}
.auth-pitch {
  position: absolute;
  left: 62px;
  bottom: 44px;
  z-index: 2;
  max-width: 420px;
}
.auth-pitch h2 {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.auth-pitch p {
  color: var(--text-dim);
  font-size: 13.5px;
}

/* El botón de tema flota en la esquina de la pantalla, no dentro del formulario: es un
   ajuste de la aplicación, no un campo del acceso. */
.login-theme {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
}

/* Pantallas medianas: la maqueta encoge antes que desaparecer. */
@media (max-width: 1400px) {
  .auth-showcase {
    --shot-s: .52;
    padding-left: 44px;
  }
}
@media (max-width: 1180px) {
  .auth-showcase {
    --shot-s: .44;
    padding-left: 32px;
  }
}

/* Móvil: en vez de perder el producto, se APILA. Una franja arriba con la consola y el
   formulario debajo, montado sobre ella con las esquinas redondeadas — la franja se ve
   recortada a propósito, como una foto: a este tamaño no se trata de leerla, sino de que
   se vea que detrás hay una herramienta. */
@media (max-width: 1000px) {
  .overlay { flex-direction: column; }
  .auth-showcase {
    flex: 0 0 32vh;
    min-height: 190px;
    max-height: 300px;
    padding: 0;
    align-items: center;
    justify-content: center;
    --shot-s: .38;
  }
  .auth-shot {
    transform: perspective(1400px) rotateX(4deg) rotate(-1deg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }
  .auth-pitch { display: none; }
  .auth-card {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 30px 26px 26px;
    border-radius: 22px 22px 0 0;
    margin-top: -22px;

    /* monta sobre la franja, que es lo que une las dos piezas */
    box-shadow: 0 -10px 30px var(--shadow);
    justify-content: flex-start;
    align-items: center;
  }
  .auth-card > * {
    width: 100%;
    max-width: 360px;
  }
  .auth-brand {
    justify-content: center;
    margin-bottom: 16px;
  }
  .auth-card h1,
  .auth-card p {
    text-align: center;
  }

  /* Casi de frente y sin sombra lateral: la inclinación fuerte de escritorio, recortada
     por los dos lados, se lee como un error de maquetación. */

  /* el formulario ya dice lo que hay que hacer aquí */
}

/* Pantalla muy baja (un móvil en horizontal): la franja estorba más de lo que aporta. */
@media (max-height: 480px) and (max-width: 1000px) {
  .auth-showcase { display: none; }
  .auth-card {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.auth-card input,
.composer input {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease;
}
.auth-card input:focus { border-color: var(--accent); }
.auth-card button {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.auth-card button:hover { background: var(--accent-strong); }
.auth-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 16px;
}

/* Botón-enlace (recuperación de acceso). Se escopa a .auth-card para ganar en
   especificidad a `.auth-card button` (que lo pintaría como botón sólido verde).
   Sin fondo, fuente verde y un verde algo más oscuro al pasar el cursor. */

/* Botón-enlace GLOBAL (texto en acento, sin caja): lo usan el login ("¿Perdiste el
   acceso?") y la bandeja de notificaciones ("Marcar todas leídas"). Vive fuera de
   .auth-card a propósito: scopearlo dejaba a los demás usos con el botón blanco del
   agente de usuario. */
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.link-btn:hover:not(:disabled) { background: var(--accent-dim); }
/* DESHABILITADO SE VE DESHABILITADO. `.link-btn` es un enlace-boton y no tenia estilo para
   :disabled, asi que uno apagado seguia pareciendo pulsable -y reaccionaba al raton-. */
.link-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.auth-card .link-btn {

  /* background/color EXPLÍCITOS aquí (0,2,0) para ganarle a `.auth-card button` (0,1,1),
     que si no pintaría este enlace como botón verde sólido. El `.link-btn` global (0,1,0)
     no basta contra `.auth-card button`. */
  background: none;
  color: var(--accent);
  padding: 2px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease, filter .15s ease;
}
.auth-card .link-btn:hover {
  background: none;
  filter: brightness(.82);
  text-decoration: underline;
}
.auth-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto 2px;
}

/* Marca (logo + nombre) en la cabecera del sidebar. */

/* La marca sale UNA sola vez. En escritorio la pone el rail (R5), así que la de la
   cabecera de la lista se esconde: dos logos a 60px uno del otro no es "más marca", es
   ruido. En móvil el rail no existe como columna y esta vuelve a ser la única. */
.brand {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* En la VITRINA del login sí se pinta: ese dibujo no tiene rail, así que la marca de la
   cabecera es la única que hay. (En la consola de verdad, en móvil, ese sitio lo ocupa el
   botón de menú, que ES el logo — ver .marca-menu.)
   Solo el isotipo: con el buscador al lado, el nombre se cortaba en "Lea…", y el rótulo
   completo ya está en el formulario de al lado. */
.shot-app .shot-brand { display: flex; }
.shot-app .shot-brand .logo { display: none; }