/* Autor: Mariano Sánchez Sigüenza.
   AgendaClases — identidad de las páginas NATIVAS de acceso de Frappe v16.

   Este archivo viaja como CSS de sitio (`hooks.py::web_include_css`): la
   página de acceso la sigue renderizando Frappe entera
   (`frappe/www/login.html` + sus estados nativos), y aquí solo se ajusta la
   presentación sobre los ganchos que Frappe YA emite:

   - `body[data-path="login"]` y `body[data-path="update-password"]`
     (`templates/web.html`), en lugar de una clase puesta por un script;
   - las clases del login nativo (`.page-card`, `.form-control`, `.btn-login`,
     `.for-login`, `.for-reset-password`), sin crear una estructura paralela.

   El contenido del panel (lockup, titular, subtítulo, alta y enlaces legales)
   lo añade `login_brand_panel.js` como un único `<aside>` —enlaces reales,
   imposibles de declarar en CSS— sin tocar el formulario, Google ni los estados
   nativos. El panel se ve en todos los tamaños: columna completa a la izquierda
   en escritorio y banda superior compacta en móvil; la única marca visible es
   su lockup, por eso aquí se oculta el logo del card nativo.

   Los textos no se tocan aquí: las traducciones viven en
   `translations/es.csv`, que es el mecanismo nativo de traducción.
*/
:root {
  --agenda-login-ink: var(--text-color);
  --agenda-login-muted: var(--text-muted);
  --agenda-login-accent: var(--ac-accent);
  --agenda-login-surface: var(--subtle-accent);
}


/* ------------------------------------------------------------------ login */
body[data-path="login"] {
  background: var(--fg-color);
  color: var(--agenda-login-ink);
  overflow-x: hidden;
}

/* El acceso nativo sustituye su cuerpo por el splash de
   `templates/includes/splash_screen.html` al iniciar sesión
   (`frappe/templates/includes/login/login.js`): ese splash pinta
   `Website Settings.splash_image` —hoy el favicon, la "A" blanca sobre cuadro
   oscuro— y quedaba a la vista hasta que el Desk montaba su animación. Se
   retira desde la primera pintura, porque el primer frame de la coreografía
   del Desk es el lienzo limpio; con movimiento reducido se dibuja la misma
   marca estática del propio Desk. La marca la pone la animación: aquí no se
   inyecta texto por CSS. */
body[data-path="login"] .centered.splash img {
  display: none !important;
}

body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] .footer-subscribe,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .page-footer {
  display: none !important;
}

body[data-path="login"] .main-section,
body[data-path="login"] .main-section .container,
body[data-path="login"] main.container,
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] .page_content {
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* En móvil y tableta el panel es una banda superior a pantalla completa y el
   relleno lateral lo llevan las secciones nativas (el formulario), no el
   contenedor de Frappe (`main.container`). */
@media (max-width: 991.98px) {
  body[data-path="login"] main.container,
  body[data-path="login"] .page-content-wrapper,
  body[data-path="login"] .page_content {
    padding: 0 !important;
  }

  body[data-path="login"] .page_content > div > :not([data-agenda-login-aside]) {
    padding: 28px 20px 42px;
  }
}

/* Entre tableta y portátil el panel pasa a banda superior y el formulario
   nativo queda centrado en una sola columna, sin huecos verticales. */
@media (min-width: 576px) and (max-width: 991.98px) {
  body[data-path="login"] .page_content > div {
    align-content: start;
    align-items: center;
    display: grid;
    min-height: 100vh;
  }
}

body[data-path="login"] .for-login,
body[data-path="login"] .for-email-login,
body[data-path="login"] .for-forgot,
body[data-path="login"] .for-login-with-email-link,
body[data-path="login"] .for-signup {
  margin-left: auto;
  margin-right: auto;
  max-width: 384px;
  width: 100%;
}

body[data-path="login"] .page-card {
  border: 0;
  box-shadow: none;
}

body[data-path="login"] .page-card-head {
  margin: 0 0 6px;
}

body[data-path="login"] .page-card-head h4 {
  color: var(--agenda-login-ink);
  font-size: 34px;
  font-stretch: 70%;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  word-spacing: 0.08em;
}

body[data-path="login"] .page-card-head .page-card-subtitle {
  color: var(--agenda-login-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* La etiqueta nativa del campo y el aviso de contraseña olvidada llegan con el
   gris de la plantilla (`--ink-gray-5`), que queda en 4.17:1 sobre el card
   blanco —por debajo del mínimo AA de texto normal—. Se alinean con el mismo
   gris de marca del subtítulo, conservando su aspecto, con la
   especificidad suficiente para ganar la regla nativa del login. */
body[data-path="login"] .page-card .page-card-body .form-label,
body[data-path="login"] .page-card .page-card-body .forgot-password-message > * {
  color: var(--agenda-login-muted);
}

body[data-path="login"] .page-card .page-card-body input[type="text"],
body[data-path="login"] .page-card .page-card-body input[type="email"],
body[data-path="login"] .page-card .page-card-body input[type="password"] {
  background: var(--fg-color);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: none;
  color: var(--agenda-login-ink);
  font-size: 15px;
  height: auto;
  min-height: 44px;
  padding: 10px 34px;
}

body[data-path="login"] .page-card .page-card-body input[type="text"]:focus,
body[data-path="login"] .page-card .page-card-body input[type="email"]:focus,
body[data-path="login"] .page-card .page-card-body input[type="password"]:focus {
  border-color: var(--ac-accent);
  box-shadow: var(--focus-default);
}

body[data-path="login"] .page-card .page-card-actions .btn-login {
  background: var(--btn-primary);
  border: 1px solid var(--btn-primary);
  border-radius: var(--border-radius);
  color: var(--ac-action-text);
  font-size: 15px;
  font-weight: 600;
  min-height: 46px;
}

body[data-path="login"] .page-card .page-card-actions .btn-login:hover {
  background: var(--btn-primary);
  border-color: var(--btn-primary);
}

body[data-path="login"] .page-card a {
  color: var(--agenda-login-accent);
}

body[data-path="login"] .page-card a:hover {
  color: var(--agenda-login-accent);
}

body[data-path="login"] .page-card .page-card-body input::placeholder,
body[data-path="update-password"] .page-card .form-control::placeholder {
  color: var(--text-light);
  opacity: 1;
}

body[data-path="login"] .page-card .page-card-actions .btn-signup:not(:disabled),
body[data-path="login"] .page-card .page-card-actions .btn-signup:not(:disabled):hover,
body[data-path="login"] .page-card .page-card-actions .btn-signup:not(:disabled):focus {
  background: var(--btn-primary);
  color: var(--ac-action-text);
}

/* ------------------------------------------- opciones nativas del acceso */
body[data-path="login"] .page-card .page-card-actions .social-logins .btn-login-option,
body[data-path="login"] .page-card .page-card-actions .btn-login-with-email-link {
  align-items: center;
  background: var(--control-bg);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--agenda-login-ink);
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  min-height: 46px;
}

body[data-path="login"] .page-card .page-card-actions .social-logins .btn-login-option:hover,
body[data-path="login"] .page-card .page-card-actions .btn-login-with-email-link:hover {
  background: var(--subtle-accent);
  border-color: var(--ac-accent);
}

body[data-path="login"] .page-card .page-card-actions .social-logins .btn-login-option .icon,
body[data-path="login"] .page-card .page-card-actions .social-logins .btn-login-option img {
  height: 18px;
  margin: 0;
  width: 18px;
}

/* ------------------------------------------- panel de marca del acceso
   El panel lo añade `login_brand_panel.js` sobre el contenedor NATIVO del login
   (`[data-agenda-login-shell]`, el `<div>` de `frappe/www/login.html`). Es el
   único portador de la marca: el logo del card nativo se oculta para que sólo
   haya una marca visible (contrato de `scripts/audit-native-login-navigation.mjs`).
   En móvil y tableta el panel queda como banda superior compacta; el escritorio
   lo convierte en la columna izquierda de la rejilla. */
body[data-path="login"] .page-card-head img,
body[data-path="login"] .page-card-head .app-logo {
  display: none;
}

body[data-path="login"] [data-agenda-login-aside] {
  background: var(--agenda-login-surface);
  color: var(--agenda-login-ink);
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  padding: 24px;
}

/* r51: el mismo logotipo encabeza las páginas de aviso y error (www/message.html, www/404.html). */
body[data-path="login"] .agenda-login-aside-brand,
.agenda-error-card .agenda-login-aside-brand {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-stack);
  font-stretch: 82%;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
}

/* El punto teal que remata la animación de arranque, con el mismo acento que
   los enlaces del panel sobre fondo oscuro. */
body[data-path="login"] .agenda-login-aside-dot,
.agenda-error-card .agenda-login-aside-dot {
  color: var(--agenda-login-accent);
}

body[data-path="login"] .agenda-login-aside-copy {
  max-width: 460px;
}

/* Titular de la landing: Archivo condensado y pesado, interlineado corto. */
body[data-path="login"] .agenda-login-aside-title {
  color: var(--agenda-login-ink);
  font-size: 2.4rem;
  font-stretch: 62%;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin: 0 0 12px;
  word-spacing: 0.06em;
}

body[data-path="login"] .agenda-login-aside-lead {
  color: var(--agenda-login-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 420px;
}

body[data-path="login"] .agenda-login-aside-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body[data-path="login"] .agenda-login-aside-signup {
  color: var(--agenda-login-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

body[data-path="login"] .agenda-login-aside-legal {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px 16px;
  line-height: 1.5;
}

body[data-path="login"] .agenda-login-aside-signup a,
body[data-path="login"] .agenda-login-aside-legal a {
  color: var(--agenda-login-accent);
  font-weight: 600;
  text-decoration: none;
}

body[data-path="login"] .agenda-login-aside-signup a:hover,
body[data-path="login"] .agenda-login-aside-legal a:hover {
  color: var(--agenda-login-ink);
  text-decoration: underline;
}

/* Acceso con la identidad de la academia (lote 2-D): su logo y su nombre arriba,
   AgendaClases sólo como «Powered by» al pie. */
body[data-path="login"] .agenda-login-aside-brand--academy {
  color: var(--agenda-login-ink);
  gap: 10px;
  letter-spacing: -0.02em;
}

body[data-path="login"] .agenda-login-aside-logo {
  background: var(--fg-color);
  border-radius: var(--border-radius-md);
  height: 40px;
  object-fit: contain;
  width: 40px;
}

body[data-path="login"] .agenda-login-aside-powered {
  color: var(--agenda-login-muted);
  font-size: 12px;
  margin: 0;
}

body[data-path="login"] .agenda-login-aside-powered a {
  color: var(--agenda-login-ink);
  font-weight: 600;
  text-decoration: none;
}

body[data-path="login"] .agenda-login-expired {
  background: var(--bg-orange);
  border: 1px solid var(--text-on-orange);
  border-radius: 8px;
  color: var(--text-on-orange);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 14px;
  padding: 10px 12px;
}

@media (min-width: 992px) {
  body[data-path="login"] .main-section,
  body[data-path="login"] .main-section .container,
  body[data-path="login"] main.container,
  body[data-path="login"] .page-content-wrapper,
  body[data-path="login"] .page_content {
    padding: 0 !important;
  }

  body[data-path="login"] {
    background-color: var(--bg-color);
    min-height: 100vh;
  }

  body[data-path="login"] .page-content-wrapper,
  body[data-path="login"] main.container,
  body[data-path="login"] .page_content {
    min-height: 100vh;
  }

  /* El contenido del login nativo trae las secciones (`.for-login`,
     `.for-forgot`, …) dentro de su propio contenedor: ahí se abre la rejilla
     que deja el panel de marca a la izquierda y el acceso a la derecha, a
     pantalla completa en cualquier resolución. El panel de marca es CSS puro: se
     pinta aunque el JS que añade sus textos no llegue a ejecutarse. */
  body[data-path="login"] .page_content > div {
    align-items: center;
    background-color: var(--bg-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
  }

  /* Composición del panel en escritorio: lockup arriba, titular centrado y
     alta + enlaces legales abajo, como la V15 desplegada. El panel usa la superficie secundaria de marca,
     con el tema nativo del sitio. */
  body[data-path="login"] [data-agenda-login-aside] {
    align-self: stretch;
    background: var(--agenda-login-surface);
    gap: 32px;
    grid-column: 1;
    grid-row: 1;
    padding: 40px 48px;
  }

  body[data-path="login"] .agenda-login-aside-title {
    font-size: clamp(3rem, 5.2vw, 4.75rem);
    margin: 0 0 20px;
  }

  body[data-path="login"] .agenda-login-aside-lead {
    font-size: 1rem;
  }

  /* En monitores grandes el acceso crece con la pantalla en vez de quedarse
     como una isla de 384px. */
  body[data-path="login"] .for-login,
  body[data-path="login"] .for-email-login,
  body[data-path="login"] .for-forgot,
  body[data-path="login"] .for-login-with-email-link,
  body[data-path="login"] .for-signup {
    max-width: clamp(384px, 26vw, 460px);
  }

  body[data-path="login"] .page_content section {
    grid-column: 2;
    grid-row: 1;
  }

  body[data-path="login"] .page_content noscript {
    grid-column: 2;
    grid-row: 2;
  }
}

body[data-path="login"] a:focus-visible,
body[data-path="login"] button:focus-visible,
body[data-path="login"] input:focus-visible {
  outline: 2px solid var(--agenda-login-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------- update-password */
body[data-path="update-password"] {
  background: var(--agenda-login-surface);
  color: var(--agenda-login-ink);
}

body[data-path="update-password"] .navbar,
body[data-path="update-password"] .web-header,
body[data-path="update-password"] .web-footer,
body[data-path="update-password"] .footer-subscribe,
body[data-path="update-password"] .page-breadcrumbs,
body[data-path="update-password"] .page-header-wrapper,
body[data-path="update-password"] .page-footer,
body[data-path="update-password"] .sign-up-message {
  display: none !important;
}

body[data-path="update-password"] .main-section,
body[data-path="update-password"] .page-content-wrapper,
body[data-path="update-password"] main.container {
  margin: 0 !important;
  max-width: none !important;
  min-height: 100vh;
  padding: 0 !important;
  width: 100% !important;
}

body[data-path="update-password"] .for-reset-password {
  align-items: stretch;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  min-height: 100vh;
  padding: 40px 24px;
  width: min(100%, 440px);
}

body[data-path="update-password"] .page-card-head h4 {
  color: var(--agenda-login-ink);
  font-size: 34px;
  font-stretch: 70%;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  word-spacing: 0.08em;
}

body[data-path="update-password"] .page-card {
  background: var(--fg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--card-shadow);
  max-width: none;
  padding: 30px;
  width: 100%;
}

body[data-path="update-password"] .form-control {
  background: var(--fg-color);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: none;
  min-height: 46px;
}

body[data-path="update-password"] .form-control:focus {
  border-color: var(--ac-accent);
  box-shadow: var(--focus-default);
}

body[data-path="update-password"] #update {
  background: var(--btn-primary);
  border-color: var(--btn-primary);
  border-radius: var(--border-radius);
  color: var(--ac-action-text);
  font-weight: 600;
  margin-top: 24px;
  min-height: 46px;
}

body[data-path="update-password"] #update:hover,
body[data-path="update-password"] #update:focus {
  background: var(--btn-primary);
  border-color: var(--btn-primary);
}

body[data-path="update-password"] .page-card a {
  color: var(--agenda-login-accent);
}

@media (max-width: 520px) {
  body[data-path="update-password"] .for-reset-password {
    justify-content: flex-start;
    padding: 28px 18px;
  }

  body[data-path="update-password"] .page-card {
    padding: 24px 20px;
  }
}