/* ==========================================================
   CHROME COMPARTIDO
   Trabajo Rápido · prop. UI Designer

   Enlazado en login, onboarding, dashboard y admin, como
   la ÚLTIMA hoja de estilos del <head> (antes de las -c.css
   de la Propuesta C). La especificidad de 2 clases gana
   aunque el orden sea incorrecto
   (ej. .page--auth .login-wrap sobre .login-wrap).

   TOKENS: solo se usan los de css/styles.css :root.
   Los 2 tokens nuevos están marcados [NUEVO] al final.
   No se introduce ningún otro color, radio, sombra o fuente.

   Alcance: shell de página, footer compacto, enlace de
   salida y sistema de consejos. No toca componentes de
   negocio, ni layout, ni JS de producción.
   ========================================================== */

/* ==========================================================
   1. SHELL DE PÁGINA
   ========================================================== */

/* 1.1 Superficie de página.
   El body hoy es blanco (--li-card). --li-bg (#f4f2ee) está
   declarado y nunca se usa: es la superficie natural del
   canvas. Separar la superficie del contenido hace que las
   tarjetas blancas dejen de flotar sobre blanco. */
.page--canvas { background: var(--li-bg); }

/* 1.2 Columna flexible + pie pegado al fondo.
   Solo para las páginas cortas (login, onboarding, admin).
   NO se aplica a index.html: es la página de mayor tráfico y
   su <body> queda intacto a propósito (ver SPEC §2.1). */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 1.3 Rompe el min-height calculado de .login-wrap.
   El valor actual (calc(100vh - 57px)) asumía que el pie no
   existía; con el footer añadido, el total siempre supera
   100vh y aparece un scroll fantasma. */
.page--auth .login-wrap {
  min-height: 0;
  flex: 1 0 auto;
}

.page--wizard .ob-wrap { flex: 1 0 auto; }
.page--admin .admin-wrap { flex: 1 0 auto; }

/* 1.4 Dashboard: solo la superficie. Sin .page, sin pie.
   .app ya aporta min-height:100vh y su propio grid. */
.page--app.page--canvas { background: var(--li-bg); }

/* ==========================================================
   2. PIE COMPACTO
   Se reutiliza la familia .footer que ya existe. No se crea
   una segunda familia (.site-footer) — ver SPEC §5.1.
   ========================================================== */

/* 2.1 Una sola columna centrada. Sin .footer__col, la grilla
   1.4fr/1fr/1fr/1fr se reduce a un track. */
.footer--compact { margin-top: auto; }

.footer--compact .footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 16px;
  padding-block: 28px 20px;
}

.footer--compact .footer__about { max-width: 46ch; }

.footer--compact .footer__tag { margin-top: 4px; }

.footer--compact .footer__heart { margin-top: 10px; }

/* 2.2 La barra legal se apila en pantallas estrechas. */
.footer--compact .footer__bar {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding-block: 14px 18px;
}

@media (min-width: 560px) {
  .footer--compact .footer__bar {
    flex-direction: row;
    gap: 12px;
  }
}

/* ==========================================================
   3. ENLACE DE SALIDA — .back-link
   Un <a> de texto. NUNCA un .btn, jamás un .btn--ghost:
   el pill de 44px es exactamente la forma de "← Atrás" del
   wizard, y la colisión visual es el riesgo principal.
   ========================================================== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;              /* objetivo táctil mínimo */
  padding: 6px 2px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--li-text-secondary);
  text-decoration: none;
  background: none;              /* nunca una pastilla */
  border: 0;                     /* nunca una pastilla */
  border-radius: var(--radius-sm);
  transition: color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* La flecha es el indicador no cromático (WCAG 1.4.1);
   no depende del color para distinguirse de un párrafo. */
.back-link::before {
  content: "←";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 150ms ease;
}

.back-link:hover { color: var(--li-text); text-decoration: none; }
.back-link:hover::before { transform: translateX(-2px); }

.back-link:active { color: var(--li-text); }

.back-link:active::before { transform: translateX(-4px); }

/* El foco lo aporta el :focus-visible global de styles.css:54
   (outline 2px + offset 2px). No lo sobreescribas: el
   underline sí debe aparecer, como en .footer a:hover. */
.back-link:focus-visible {
  color: var(--li-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* 3.1 Modo dashboard: hermano de la marca, a la izquierda de
   las acciones, y oculto en escritorio — arriba de 1024px la
   salida ya existe en .nav-foot de la barra lateral. */
.topbar__inner > .back-link { margin-right: auto; }

@media (min-width: 1024px) {
  .topbar__inner > .back-link { display: none; }
}

/* 3.2 El enlace de la barra lateral del dashboard conserva su
   familia .app-nav__link. Solo se le unifica el copy, para
   eliminar la jerga interna "landing". */
.app-nav__link--back { color: var(--li-text-secondary); }

/* ==========================================================
   4. SISTEMA DE CONSEJOS
   4.1 .tip   → callout dismissible, un concepto.
   4.2 .tip-list → lista no dismissible, 3 conceptos, rail
          del asistente de configuración.
   ========================================================== */

/* 4.3 Callout. Riel izquierdo de 3px = 5.08:1 sobre --li-bg,
   muy por encima del 3:1 que pide WCAG 1.4.11 para
   componentes no textuales. */
.tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 10px 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--li-text-secondary);
  background: var(--li-blue-soft);
  border: 1px solid var(--li-blue-light);
  border-left: 3px solid var(--li-blue);
  border-radius: var(--radius-md);
}

.tip__text { flex: 1 1 auto; min-width: 0; margin: 0; }

/* El "·" separador ya es el recurso de microcopy del
   proyecto (.form__hint, .pf-hint). */
.tip__text strong {
  color: var(--li-text);
  font-weight: 700;
}

/* 4.4 Mejora progresiva, misma filosofía que .reveal.
   Sin JS: todos los consejos visibles (nunca se pierde
   información). Con JS: solo los no descartados. */
.js .tip[data-tip-dismissible] { display: none; }

/* 4.5 Lista del asistente. Sin icono propio: reutiliza
   ✓ + --li-green, el idioma de .check-list. El título
   reutiliza .section__kicker (12px/800/0.08em/mayúsculas),
   no se define una clase nueva. */
.tip-list {
  padding: 20px;
  font-size: 13px;
  background: var(--li-card);
  border: 1px solid var(--li-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.tip-list__items {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.tip-list__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
  color: var(--li-text-secondary);
}

.tip-list__item::before {
  content: "✓";
  flex: none;
  font-weight: 800;
  color: var(--li-green);
}

.tip-list__item strong { color: var(--li-text); font-weight: 700; }

/* 4.6 Degradación sin reestructurar el HTML.
   .ob-wrap es <main class="container ob-wrap">; si el tip-list
   se inserta como hermano de .ob-card, se apila y se centra
   solo, con ancho de la tarjeta. Cero cambios de maquetación. */
.ob-wrap > .tip-list {
  max-width: 680px;
  margin: 20px auto 0;
}

/* 4.7 Mejora opcional a 2 columnas (requiere envolver el
   markup en <div class="ob-layout">). 680 + 32 + 300 = 1012
   < --container (1128). */

/* ==========================================================
   5. ESTADOS GLOBALES
   ========================================================== */

/* 5.1 Disabled. Hoy .btn--primary:disabled usa cursor:wait
   (línea 116) y no hay regla genérica .btn:disabled. Se
   propone not-allowed, que es lo correcto para un control
   deshabilitado. */
.btn:disabled { cursor: not-allowed; }

/* 5.2 Movimiento. styles.css:322 ya neutraliza * con
   !important; este bloque es el alcance correcto y no
   destructivo para los componentes nuevos. */
@media (prefers-reduced-motion: reduce) {
  .back-link, .back-link::before {
    transition: none;
  }
  .back-link:hover::before,
  .back-link:active::before {
    transform: none;
  }
}

/* 5.3 Compensación de scroll para el skip-link.
    El destino de un ancla bajo un header sticky queda
   tapado; scroll-margin-top lo resuelve. */
#contenido, #loginForm, #obForm, #panel, #adminMain {
  scroll-margin-top: 72px;
}

/* ==========================================================
   6. FONDO SUAVE PARA PÁGINAS AUTH/WIZARD/ADMIN
   Misma foto que el hero del index (Unsplash 152173...),
   opacidad muy baja para no competir con el formulario.
   Usa un div fijo .page-bg inyectado en el HTML.
   ========================================================== */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.page-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.10;
  filter: saturate(0.72) contrast(1.02);
}
.page-bg__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244,242,238,0.88) 0%, rgba(244,242,238,0.72) 50%, rgba(244,242,238,0.90) 100%);
}
@media (max-width: 899px) {
  .page-bg img { opacity: 0.08; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-bg img { animation: heroKenBurns 28s ease-in-out infinite alternate; will-change: transform; }
}

/* ==========================================================
   TOKENS NUEVOS — propuesta, no los aplica este archivo
   ==========================================================

   Solo si el integrador decide promoverlos a :root en
   css/styles.css. Ninguno es necesario para que funcione
   la propuesta.

   --grad-brand: el degradado azul está copiado textual
     3 veces en styles.css (93, 182, 235): .btn--primary,
     .kanban-tab.is-active y .chip.is-active. De ahí sale.

   --footer-compact-pad: 28px 20px. Existe como número
     mágico solo aquí; el resto del proyecto no tokeniza
     espaciado vertical de pie.

   ========================================================== */