/* public/styles/layout.css — Bloque 20: app shell (sidebar/topbar), logo,
   landing/login. Todo bajo .mediador-app. */

/* ================= LOGO ================= */
.mediador-logo{ display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; }
.mediador-logo-mark{ width: 30px; height: 30px; flex-shrink: 0; display: block; }
.mediador-logo-text{ font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-on-dark); letter-spacing: -.01em; }
.mediador-logo-text em{ font-style: normal; color: var(--color-brand); }
/* variante para fondos claros (topbar del portal, login) */
.mediador-logo.on-light .mediador-logo-text{ color: var(--color-text); }

/* ================= APP SHELL ================= */
/* #app lleva .mediador-app Y .shell en el mismo elemento (mismo caso que
   el backdrop del onboarding, ver components.css) — selector compuesto,
   no descendiente. */
.mediador-app.shell{ display: flex; min-height: 100vh; }

.mediador-app .sidebar{
  width: 252px; flex-shrink: 0; background: var(--color-sidebar);
  display: flex; flex-direction: column; padding: var(--space-5) var(--space-3);
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  transition: transform var(--transition-normal);
}
.mediador-app .sidebar-logo{ padding: var(--space-2) var(--space-2) var(--space-6); }
.mediador-app .sidebar-nav{ display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.mediador-app .sidebar-item{
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); color: var(--color-text-on-dark-muted); text-decoration: none;
  font-size: var(--font-size-md); font-weight: var(--font-weight-medium); cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; font-family: var(--font-family);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mediador-app .sidebar-item svg{ width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .sidebar-item:hover{ background: var(--color-sidebar-hover); color: var(--color-text-on-dark); }
.mediador-app .sidebar-item.active{ background: var(--color-sidebar-active); color: var(--color-text-on-dark); }
.mediador-app .sidebar-item.active svg{ color: var(--color-brand); }
.mediador-app .sidebar-item .sidebar-badge{
  margin-left: auto; background: var(--color-brand); color: var(--color-sidebar);
  font-size: 11px; font-weight: var(--font-weight-bold); line-height: 1; border-radius: var(--radius-pill);
  padding: 3px 7px; flex-shrink: 0;
}

.mediador-app .sidebar-footer{ border-top: 1px solid rgba(255,255,255,.08); padding-top: var(--space-3); margin-top: var(--space-3); }

.mediador-app .main{ flex: 1; margin-left: 252px; display: flex; flex-direction: column; min-width: 0; background: var(--color-bg); }

.mediador-app .topbar{
  height: 64px; flex-shrink: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border-light);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6);
  position: sticky; top: 0; z-index: 20;
}
.mediador-app .topbar-menu-btn{ display: none; background: none; border: none; color: var(--color-text); padding: 6px; cursor: pointer; }
.mediador-app .topbar-menu-btn svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mediador-app .topbar-logo-mobile{ display: none; }

.mediador-app .page-content{ max-width: 960px; width: 100%; margin: 0 auto; padding: var(--space-7) var(--space-6) var(--space-9); }

.mediador-app .sidebar-backdrop{ position: fixed; inset: 0; background: rgba(15,21,23,.5); z-index: 39; display: none; }
.mediador-app .sidebar-backdrop.show{ display: block; }

/* ================= LOGIN (usado por admin-mediador.html / radar.html) ================= */
/* .google-btn: sigue siendo el botón de login "chico" que arma admin-mediador.js/
   radar.js con JS (100% ancho). En la landing (abajo) se reusa con
   style="width:auto" inline, mismo patrón que ya existía antes acá. */
.mediador-app .google-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); height: 44px;
  font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); font-family: var(--font-family); cursor: pointer;
  text-decoration: none;
}
.mediador-app .google-btn:hover{ background: var(--color-surface-2); }
.mediador-app .cta-note{ color: var(--color-text-muted); font-size: var(--font-size-xs); margin-top: var(--space-3); }

/* ================= LANDING (nueva página principal — página 1 de Mediador) =================
   #login-gate ya NO es "una pantalla de login con marketing alrededor": arranca
   presentando el producto (header con foto del puente + secciones), y el
   ingreso queda como botón ("Ingresar"/"Empezar gratis") que manda a
   /auth/google?next=/ — ese mecanismo de login no cambió, solo dejó de ser
   la primera pantalla. Todo bajo un contenedor de ancho máximo (.landing-container)
   para que en pantallas grandes no se estire de punta a punta. */
#login-gate.mediador-app{ min-height: 100vh; background: var(--color-bg); }
.mediador-app .landing-container{ max-width: 1200px; margin: 0 auto; padding-left: var(--space-8); padding-right: var(--space-8); box-sizing: border-box; }

/* ---- header oscuro con la foto del puente ---- */
.mediador-app .landing-header{ position: relative; overflow: hidden; background: var(--color-sidebar); min-height: 620px; display: flex; flex-direction: column; }
.mediador-app .landing-header-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.mediador-app .landing-header-scrim{ position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,21,23,.96) 0%, rgba(15,21,23,.86) 42%, rgba(15,21,23,.4) 100%); }
.mediador-app .landing-header-inner{ position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; width: 100%; }

.mediador-app .landing-nav{ min-height: 84px; padding: var(--space-4) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.mediador-app .landing-nav .mediador-logo-text{ color: var(--color-text-on-dark); }
.mediador-app .landing-nav-links{ display: flex; align-items: center; gap: var(--space-7); flex-wrap: wrap; }
.mediador-app .landing-nav-links a{ font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-on-dark-muted); text-decoration: none; }
.mediador-app .landing-nav-links a:hover{ color: var(--color-text-on-dark); }
.mediador-app .landing-nav-actions{ display: flex; align-items: center; gap: var(--space-5); }
.mediador-app .landing-nav-login{ font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-on-dark); text-decoration: none; padding: var(--space-2); }

.mediador-app .landing-hero{ flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-8); align-items: center; padding: var(--space-7) 0 var(--space-8); }
.mediador-app .landing-hero-content h1{ margin: 0; font-size: 48px; line-height: 1.1; font-weight: var(--font-weight-bold); letter-spacing: -.02em; color: var(--color-text-on-dark); max-width: 560px; }
.mediador-app .landing-hero-content p{ margin: var(--space-5) 0 0; font-size: var(--font-size-lg); line-height: 1.6; color: var(--color-text-on-dark-muted); max-width: 500px; }
.mediador-app .landing-hero-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }
.mediador-app .btn-outline-light{ display: inline-flex; align-items: center; height: 54px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid rgba(244,247,247,.28); color: var(--color-text-on-dark); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); text-decoration: none; }
.mediador-app .btn-outline-light:hover{ background: rgba(244,247,247,.08); }
.mediador-app .landing-hero-content .cta-note{ color: var(--color-text-on-dark-muted); margin-top: var(--space-4); }

.mediador-app .hero-card{ background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); box-shadow: 0 24px 64px rgba(0,0,0,.38); }
.mediador-app .hero-card-head{ display: flex; justify-content: space-between; align-items: center; }
.mediador-app .hero-card-head .code{ font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.mediador-app .hero-card-parties{ font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-top: -6px; }
.mediador-app .hero-card-action{ background: var(--color-brand-soft); border: 1px solid var(--color-brand); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.mediador-app .hero-card-action .label{ font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-brand-dark); }
.mediador-app .hero-card-action .title{ font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin-top: 4px; }
.mediador-app .hero-card-action .sub{ font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }
.mediador-app .hero-card-action .go{ flex-shrink: 0; background: var(--color-brand); color: var(--color-sidebar); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); padding: 9px 14px; border-radius: var(--radius-sm); white-space: nowrap; }
.mediador-app .hero-card-confirmations{ display: flex; flex-direction: column; gap: var(--space-3); }
.mediador-app .hero-card-confirmations .cf-label{ font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.mediador-app .hero-card-confirmations .cf-row{ display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-body); }
.mediador-app .hero-card-foot{ display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border-light); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.mediador-app .hero-card-foot svg{ width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--color-success); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- franja de confianza ---- */
.mediador-app .trust-strip{ background: var(--color-surface); border-bottom: 1px solid var(--color-border-light); }
.mediador-app .trust-strip-inner{ padding-top: var(--space-6); padding-bottom: var(--space-6); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-6); }
.mediador-app .trust-strip-item{ display: flex; gap: var(--space-3); align-items: flex-start; }
.mediador-app .trust-strip-item svg{ width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: var(--color-brand-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .trust-strip-item .t{ font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); }
.mediador-app .trust-strip-item .s{ font-size: var(--font-size-md); color: var(--color-text-secondary); margin-top: 2px; }

/* ---- secciones alternadas "Sabé qué pasó / falta / sigue" ---- */
.mediador-app .landing-split-section{ background: var(--color-bg); }
.mediador-app .landing-split-section.on-surface{ background: var(--color-surface); }
.mediador-app .landing-split{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-8); align-items: center; padding-top: var(--space-9); padding-bottom: var(--space-9); }
.mediador-app .landing-split h2{ margin: 0; font-size: 34px; line-height: 1.15; font-weight: var(--font-weight-bold); letter-spacing: -.02em; }
.mediador-app .landing-split p{ margin: var(--space-4) 0 0; font-size: var(--font-size-lg); line-height: 1.6; color: var(--color-text-secondary); max-width: 480px; }
.mediador-app .landing-split .check-list{ display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.mediador-app .landing-split .check-list div{ display: flex; gap: var(--space-2); font-size: var(--font-size-body); }
.mediador-app .landing-split .check-list svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--color-brand-dark); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.mediador-app .mock-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-md); }
.mediador-app .mock-card-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); }
.mediador-app .mock-card-head .title{ font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.mediador-app .mock-card-head .sub{ font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }

.mediador-app .mock-timeline{ position: relative; display: flex; flex-direction: column; gap: var(--space-5); }
.mediador-app .mock-timeline::before{ content: ''; position: absolute; left: 61px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border-light); }
.mediador-app .mock-timeline-item{ position: relative; display: flex; gap: var(--space-4); }
.mediador-app .mock-timeline-item .time{ width: 50px; flex-shrink: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); padding-top: 1px; }
.mediador-app .mock-timeline-item .dot{ width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-brand); box-sizing: border-box; margin-top: 3px; position: relative; z-index: 1; }
.mediador-app .mock-timeline-item.is-warn .dot{ border-color: var(--color-warning); }
.mediador-app .mock-timeline-item.is-done .dot{ background: var(--color-brand); border-color: var(--color-brand); }
.mediador-app .mock-timeline-item .title{ font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); }
.mediador-app .mock-timeline-item .desc{ font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }

.mediador-app .mock-attention-row{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-border-light); }
.mediador-app .mock-attention-row .code{ font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.mediador-app .mock-attention-row .title{ font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); margin-top: 2px; }
.mediador-app .mock-attention-row a{ font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-brand-dark); text-decoration: none; }
.mediador-app .mock-attention-row .badge{ flex-shrink: 0; }

.mediador-app .mock-agenda-row{ display: flex; gap: var(--space-5); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--color-border-light); }
.mediador-app .mock-agenda-row .time{ width: 50px; flex-shrink: 0; font-size: var(--font-size-body); font-weight: var(--font-weight-bold); }
.mediador-app .mock-agenda-row .info{ flex: 1; min-width: 0; }
.mediador-app .mock-agenda-row .title{ font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); }
.mediador-app .mock-agenda-row .sub{ font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 1px; }
.mediador-app .mock-agenda-row a{ font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-brand-dark); text-decoration: none; }
.mediador-app .mock-agenda-row .badge{ flex-shrink: 0; }

/* ---- "cada persona ve lo que le corresponde" ---- */
.mediador-app .landing-roles{ background: var(--color-surface); padding-top: var(--space-9); padding-bottom: var(--space-9); }
.mediador-app .landing-roles h2{ margin: 0; font-size: 34px; line-height: 1.15; font-weight: var(--font-weight-bold); letter-spacing: -.02em; max-width: 620px; }
.mediador-app .landing-roles > .landing-container > p{ margin: var(--space-3) 0 0; font-size: var(--font-size-lg); line-height: 1.6; color: var(--color-text-secondary); max-width: 620px; }
.mediador-app .role-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.mediador-app .role-card{ background: var(--color-bg); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.mediador-app .role-card svg{ width: 26px; height: 26px; fill: none; stroke: var(--color-brand-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .role-card h3{ font-size: var(--font-size-lg); margin: 0; }
.mediador-app .role-card p{ font-size: var(--font-size-body); line-height: 1.6; color: var(--color-text-secondary); margin: 0; }

/* ---- franja oscura: estudios + seguridad ---- */
.mediador-app .landing-dark{ background: var(--color-sidebar); padding-top: var(--space-9); padding-bottom: var(--space-9); }
.mediador-app .landing-dark-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-8); }
.mediador-app .landing-dark h2{ margin: 0; font-size: 32px; line-height: 1.15; font-weight: var(--font-weight-bold); letter-spacing: -.02em; color: var(--color-text-on-dark); }
.mediador-app .landing-dark-grid > div > p{ margin: var(--space-4) 0 0; font-size: var(--font-size-lg); line-height: 1.6; color: var(--color-text-on-dark-muted); }
.mediador-app .role-list-dark{ display: flex; flex-direction: column; margin-top: var(--space-7); }
.mediador-app .role-list-dark .item{ padding: var(--space-4) 0; border-top: 1px solid #22302F; }
.mediador-app .role-list-dark .item:last-child{ border-bottom: 1px solid #22302F; }
.mediador-app .role-list-dark .item .t{ font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-text-on-dark); }
.mediador-app .role-list-dark .item .s{ font-size: var(--font-size-md); color: var(--color-text-on-dark-muted); margin-top: 4px; }
.mediador-app .check-list-dark{ display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-7); }
.mediador-app .check-list-dark div{ display: flex; gap: var(--space-3); }
.mediador-app .check-list-dark svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: var(--color-brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .check-list-dark span{ font-size: var(--font-size-body); line-height: 1.55; color: var(--color-text-on-dark-muted); }

/* ---- preguntas frecuentes ---- */
.mediador-app .landing-faq{ background: var(--color-bg); padding-top: var(--space-9); padding-bottom: var(--space-9); }
.mediador-app .landing-faq h2{ margin: 0 0 var(--space-7); font-size: 32px; font-weight: var(--font-weight-bold); letter-spacing: -.02em; }
.mediador-app .faq-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--space-8); }
.mediador-app .faq-item{ padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.mediador-app .faq-item:nth-last-child(-n+2){ border-bottom: 1px solid var(--color-border); }
.mediador-app .faq-item h3{ margin: 0; font-size: var(--font-size-lg); }
.mediador-app .faq-item p{ margin: var(--space-2) 0 0; font-size: var(--font-size-body); line-height: 1.6; color: var(--color-text-secondary); }

/* ---- cierre oscuro ---- */
.mediador-app .landing-cta-dark{ background: var(--color-sidebar); padding: var(--space-9) var(--space-8); display: flex; flex-direction: column; align-items: center; text-align: center; }
.mediador-app .landing-cta-dark h2{ margin: 0; max-width: 680px; font-size: 36px; line-height: 1.15; font-weight: var(--font-weight-bold); letter-spacing: -.02em; color: var(--color-text-on-dark); }
.mediador-app .landing-cta-dark p{ margin: var(--space-4) 0 0; font-size: var(--font-size-lg); color: var(--color-text-on-dark-muted); }
.mediador-app .landing-cta-dark .google-btn{ margin-top: var(--space-7); }

/* ---- pie ---- */
.mediador-app .landing-footer{ background: var(--color-bg); }
.mediador-app .landing-footer-inner{ padding-top: var(--space-7); padding-bottom: var(--space-7); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-5); }
.mediador-app .landing-footer-brand{ display: flex; flex-direction: column; gap: var(--space-1); }
.mediador-app .landing-footer-brand .tag{ font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.mediador-app .landing-footer-links{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.mediador-app .landing-footer-links a{ font-size: var(--font-size-sm); color: var(--color-text-secondary); text-decoration: none; }
.mediador-app .landing-footer-links a:hover{ color: var(--color-text); }
.mediador-app .landing-footer-links span{ font-size: var(--font-size-sm); color: var(--color-text-muted); }