/* Línea gráfica Tornillo Suelto para las páginas del IdP que ve el usuario del portal:
   login, registro, definir/cambiar contraseña y mensajes. Solo aplica a esas rutas (data-path),
   nunca al Desk. Tokens iguales a portal-front/src/app/globals.css. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Martian+Mono:wght@400;600&display=swap");

:root {
  --ts-papel: #f7f5f1;
  --ts-elevado: #fcfbf8;
  --ts-superficie: #e9e6de;
  --ts-borde: #d9d5cb;
  --ts-tinta: #151513;
  --ts-tinta-2: #46474a;
  --ts-tinta-3: #65676a;
  --ts-rojo: #e63946;
  --ts-rojo-texto: #b3202c;
  --ts-verde: #1fa36b;
  --ts-verde-texto: #0b6b42;
  --ts-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ts-mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --ts-curva: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ts-papel: #0f1112;
    --ts-elevado: #1c1f22;
    --ts-superficie: #181b1d;
    --ts-borde: #2b2f33;
    --ts-tinta: #f3f4f4;
    --ts-tinta-2: #bcc1c5;
    --ts-tinta-3: #8c9297;
    --ts-rojo: #ff5c68;
    --ts-rojo-texto: #ff7a84;
    --ts-verde: #3dd68c;
    --ts-verde-texto: #52dc9a;
  }
}

/* Páginas del IdP: fondo hueso, tipografía Archivo y sin la barra ni el pie del sitio Frappe. */
body:has([data-path="login"]),
body:has([data-path="update-password"]),
body:has([data-path="message"]),
body:has([data-path="complete_signup"]) {
  background: var(--ts-papel) !important;
  color: var(--ts-tinta);
  font-family: var(--ts-font) !important;
}

body:has([data-path="login"]) :is(.navbar, .web-footer, footer),
body:has([data-path="update-password"]) :is(.navbar, .web-footer, footer),
body:has([data-path="message"]) :is(.navbar, .web-footer, footer),
body:has([data-path="complete_signup"]) :is(.navbar, .web-footer, footer) {
  display: none !important;
}

:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
  :is(h1, h2, h3, h4, h5, p, label, a, input, button, span, div) {
  font-family: var(--ts-font) !important;
}

/* Tarjeta: fondo elevado, borde fino, radio 10, sin sombra. */
:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
  .page-card {
  background: var(--ts-elevado) !important;
  border: 1px solid var(--ts-borde) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 32px !important;
  max-width: 400px;
}

:is([data-path="login"], [data-path="update-password"]) .app-logo {
  /* Tamaño de la guía en autenticación: 44 de ancho (51 de alto, proporción del logo). */
  width: 44px !important;
  height: 51px !important;
  max-height: none !important;
  max-width: none !important;
  border-radius: 0 !important;
  object-fit: contain;
}

/* Títulos: Archivo 800 ensanchado. */
:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
  :is(.page-card-head h4, .page-card h4, .page-card h1, .page-card h2, .page-card h3) {
  color: var(--ts-tinta) !important;
  font-weight: 800 !important;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  font-size: 1.563rem !important;
  line-height: 1.15 !important;
}

:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
  :is(.page-card-subtitle, .text-muted, .text-ink-gray-5, .text-ink-gray-6, .page-card p) {
  color: var(--ts-tinta-2) !important;
}

:is([data-path="login"], [data-path="update-password"]) label {
  color: var(--ts-tinta) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

/* Campos: radio 6, borde tinta 3; foco en tinta, sin halo. */
:is([data-path="login"], [data-path="update-password"]) .form-control {
  background: var(--ts-elevado) !important;
  color: var(--ts-tinta) !important;
  border: 1px solid var(--ts-tinta-3) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  min-height: 44px;
  padding: 10px 12px !important;
  transition: border-color 120ms var(--ts-curva);
}
:is([data-path="login"], [data-path="update-password"]) .form-control::placeholder {
  color: var(--ts-tinta-3) !important;
}
:is([data-path="login"], [data-path="update-password"]) .form-control:hover {
  border-color: var(--ts-tinta-2) !important;
}
:is([data-path="login"], [data-path="update-password"]) .form-control:focus {
  border-color: var(--ts-tinta) !important;
  outline: none !important;
}

/* Botón principal negro (tinta), radio 10; el secundario en papel con borde. */
:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
  :is(.es-button[data-variant="solid"], .btn-primary) {
  background: var(--ts-tinta) !important;
  color: var(--ts-papel) !important;
  border: 1px solid var(--ts-tinta) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em;
  min-height: 44px;
  transition: transform 120ms var(--ts-curva), opacity 120ms var(--ts-curva);
}
:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
  :is(.es-button[data-variant="solid"], .btn-primary):hover {
  transform: translateY(-1px);
}
:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
  :is(.es-button[data-variant="solid"], .btn-primary):disabled {
  opacity: 0.4;
  transform: none;
}

:is([data-path="login"], [data-path="update-password"])
  :is(.es-button:not([data-variant="solid"]), .btn-default) {
  background: var(--ts-papel) !important;
  color: var(--ts-tinta) !important;
  border: 1px solid var(--ts-tinta) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  min-height: 44px;
}

/* Enlaces: tinta subrayada. */
:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
  .page-card a:not(.es-button):not(.btn) {
  color: var(--ts-tinta) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--ts-tinta-3) !important;
  text-underline-offset: 3px;
}

/* Avisos: fondo papel, borde fino y el color solo en el contorno (como los chips de la guía). */
:is([data-path="login"], [data-path="update-password"]) .es-alert {
  background: var(--ts-papel) !important;
  border: 1px solid var(--ts-borde) !important;
  border-radius: 6px !important;
  color: var(--ts-tinta) !important;
}
:is([data-path="login"], [data-path="update-password"]) .es-alert[data-theme="red"] {
  border-color: var(--ts-rojo) !important;
}
:is([data-path="login"], [data-path="update-password"]) .es-alert[data-theme="red"] .es-alert__title {
  color: var(--ts-rojo-texto) !important;
}
:is([data-path="login"], [data-path="update-password"]) .es-alert[data-theme="green"] {
  border-color: var(--ts-verde) !important;
}
:is([data-path="login"], [data-path="update-password"]) .es-alert[data-theme="green"] .es-alert__title {
  color: var(--ts-verde-texto) !important;
}
:is([data-path="login"], [data-path="update-password"]) .field-error {
  color: var(--ts-rojo-texto) !important;
}

@media (prefers-reduced-motion: reduce) {
  :is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"]) * {
    transition: none !important;
  }
}

/* Login principal del Portal Tornillo (2026-10-28). Mismos espaciados que la pantalla de acceso de
   Tornillo Seguro (tarjeta de 480 px, relleno de 56 x 48 px, 20 px entre bloques, mascota de 110 px)
   y se distingue como la puerta de entrada: rótulo "Portal Tornillo", título más grande y
   contorno en tinta; el rótulo va sobre la mascota. */
:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"]) {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}
body:has(:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"]))
  :is(.page-content-wrapper, main.container, .page_content) {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
body:has(:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"]))
  .page-content-wrapper {
  max-width: 480px !important;
}

:is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
  .page-card {
  width: 100%;
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 56px 48px !important;
  gap: 20px !important;
  border: 1px solid var(--ts-tinta) !important;
}

:is([data-path="login"], [data-path="update-password"]) .page-card-head {
  align-items: center !important;
  text-align: center !important;
  gap: 20px !important;
}
:is([data-path="login"], [data-path="update-password"]) .app-logo {
  width: auto !important;
  height: 110px !important;
}
:is([data-path="login"], [data-path="update-password"]) .page-card-head-text {
  align-items: center !important;
  gap: 8px !important;
}
:is([data-path="login"], [data-path="update-password"]) .page-card-head::before {
  content: "Portal Tornillo";
  font-family: var(--ts-mono) !important;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-tinta-2);
}
:is([data-path="login"], [data-path="update-password"]) .page-card-head h4 {
  font-size: 1.953rem !important;
  font-stretch: 112%;
  text-align: center;
}
[data-path="login"] .page-card-subtitle {
  display: none;
}

:is([data-path="login"], [data-path="update-password"]) :is(form, .page-card-body) {
  gap: 20px !important;
}
:is([data-path="login"], [data-path="update-password"]) .form-group {
  gap: 8px !important;
}
:is([data-path="login"], [data-path="update-password"]) .page-card-actions {
  gap: 12px !important;
}
/* Enlaces secundarios en gris, sin subrayado (como en Tornillo Seguro); pasan a tinta al pasar el cursor. */
:is([data-path="login"], [data-path="update-password"]) .page-card a:not(.es-button):not(.btn) {
  color: var(--ts-tinta-2) !important;
  text-decoration: none !important;
}
:is([data-path="login"], [data-path="update-password"]) .page-card a:not(.es-button):not(.btn):hover {
  color: var(--ts-tinta) !important;
}

@media (max-width: 480px) {
  :is([data-path="login"], [data-path="update-password"], [data-path="message"], [data-path="complete_signup"])
    .page-card {
    padding: 40px 24px !important;
  }
  :is([data-path="login"], [data-path="update-password"]) .app-logo {
    height: 80px !important;
  }
}

/* Pantalla de carga del manual (`.ts-carga-pantalla`), la pone public/js/idp-carga.js al enviar un formulario. */
.ts-carga-pantalla {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: var(--ts-papel);
}
.ts-carga-pantalla .ts-cargando {
  width: 96px;
  height: 96px;
}
.ts-carga-pantalla .ts-cargando svg {
  display: block;
}
.ts-carga-pantalla p {
  margin: 0;
  font-family: var(--ts-font);
  font-size: 0.875rem;
  color: var(--ts-tinta-3);
}