/* 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); display: flex; flex-direction: column; gap: var(--space-2); }

/* Bloque 38 — títulos de grupo del sidebar: texto, nunca un botón. */
.mediador-app .sidebar-group-label{
  font-size: 11.5px; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-on-dark-muted); padding: var(--space-4) var(--space-3) 4px; opacity: .75;
}
.mediador-app .sidebar-nav > .sidebar-group-label:first-child{ padding-top: var(--space-2); }

/* Bloque 38 — tarjeta de plan compacta al pie del sidebar (mismo dato que
   renderPlanCard/api/billing/me, versión mínima: nombre del plan + link). */
.mediador-app .sidebar-plan-card{
  display: flex; flex-direction: column; gap: 2px; background: var(--color-sidebar-hover);
  border-radius: var(--radius-md); padding: 10px 12px; text-decoration: none;
}
.mediador-app .sidebar-plan-label{ font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--color-text-on-dark-muted); }
.mediador-app .sidebar-plan-name{ font-size: 14px; font-weight: var(--font-weight-bold); color: var(--color-text-on-dark); }
.mediador-app .sidebar-plan-link{ font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-brand); margin-top: 2px; }

.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; gap: var(--space-4); 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; flex-shrink: 0; }
.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; flex-shrink: 0; }

/* Bloque 38 — buscador global de la barra superior. En desktop siempre
   visible; en mobile se colapsa a un ícono (ver breakpoint 768 abajo) y
   se abre como panel superpuesto (topbar-search-backdrop). */
.mediador-app .topbar-search-wrap{ position: relative; flex: 1; max-width: 460px; }
.mediador-app .topbar-search-icon-btn{ display: none; background: none; border: none; color: var(--color-text-secondary); padding: 8px; cursor: pointer; }
.mediador-app .topbar-search-icon-btn svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .topbar-search{
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg);
}
.mediador-app .topbar-search svg{ width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--color-text-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .topbar-search input{ flex: 1; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--color-text); outline: none; margin: 0; height: auto; padding: 0; }
.mediador-app .topbar-search-results{
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  max-height: 340px; overflow-y: auto; z-index: 25;
}
.mediador-app .topbar-search-result{ display: block; padding: 10px 14px; text-decoration: none; color: var(--color-text); border-bottom: 1px solid var(--color-border-light); cursor: pointer; }
.mediador-app .topbar-search-result:last-child{ border-bottom: none; }
.mediador-app .topbar-search-result:hover{ background: var(--color-surface-2); }
.mediador-app .topbar-search-result .code{ font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.mediador-app .topbar-search-result .obj{ font-size: 13.5px; font-weight: var(--font-weight-medium); margin-top: 1px; }
/* Bloque 63 — por qué matcheó el resultado, cuando no fue por código/carátula (ej. nombre de un documento) */
.mediador-app .topbar-search-result .match-hint{ font-size: 11.5px; color: var(--color-text-muted); margin-top: 3px; }
.mediador-app .topbar-search-empty{ padding: 14px; font-size: 13px; color: var(--color-text-muted); text-align: center; }
/* top:64px (altura de la topbar), nunca inset:0 — así el backdrop oscurece
   la página de abajo pero nunca pasa por encima de la topbar (hamburguesa,
   buscador, campana), que tiene que seguir siendo clickeable mientras el
   buscador de mobile está abierto. */
.mediador-app .topbar-search-backdrop{ position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(15,21,23,.4); z-index: 24; }

.mediador-app .topbar-actions{ display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; margin-left: auto; position: relative; }
/* Bloque 67 — fecha/hora actual, siempre a la vista en la topbar (ver
   responsive.css: oculto en mobile, no entra). */
.mediador-app .topbar-clock{ font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; }
.mediador-app .topbar-bell{ position: relative; width: 40px; height: 40px; border: none; background: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text-secondary); }
.mediador-app .topbar-bell:hover{ background: var(--color-surface-2); }
.mediador-app .topbar-bell svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mediador-app .topbar-bell-badge{
  position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: var(--radius-pill); background: var(--color-danger); color: #fff; font-size: 10.5px; font-weight: var(--font-weight-bold);
  display: flex; align-items: center; justify-content: center;
}
.mediador-app .topbar-bell-panel{
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); z-index: 25; padding: var(--space-2);
}
.mediador-app .topbar-bell-panel h3{ margin: 4px 8px 8px; font-size: 13px; font-weight: var(--font-weight-bold); }

.mediador-app .page-content{ max-width: 960px; width: 100%; margin: 0 auto; padding: var(--space-7) var(--space-6) var(--space-9); }
/* Bloque 38 — el dashboard nuevo necesita más ancho que el resto de las
   pantallas (KPIs en fila, tabla, dos columnas anchas) — se ensancha solo
   para esa pantalla, el resto sigue con el ancho de lectura de siempre. */
.mediador-app .page-content.wide{ max-width: 1320px; }

.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 =================
   El layout de la landing en sí (nav, hero, secciones, footer) vive en
   public/styles/landing.css, que solo carga index.html — acá queda nada más
   lo mínimo que #login-gate necesita como contenedor raíz. */
#login-gate.mediador-app{ min-height: 100vh; }

/* ================= VISTA SIMPLIFICADA (menú reducido a íconos) ================= */
.mediador-app .topbar-simple-btn{
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; flex-shrink: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text-secondary); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  cursor: pointer; white-space: nowrap;
}
.mediador-app .topbar-simple-btn:hover{ background: var(--color-surface-2); color: var(--color-text); }
.mediador-app .topbar-simple-btn[aria-pressed="true"]{ border-color: var(--color-brand); color: var(--color-brand-dark); background: var(--color-brand-soft); }
.mediador-app .topbar-simple-btn svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mediador-app .topbar-simple-btn[aria-pressed="true"] .simple-chevron{ transform: translateX(-20px) scaleX(-1); transform-origin: 15px 12px; }
.mediador-app .topbar-simple-btn:focus-visible{ outline: 2px solid var(--color-brand); outline-offset: 2px; }

@media (min-width: 768px){
  .mediador-app .sidebar, .mediador-app .main{ transition: width var(--transition-normal), margin-left var(--transition-normal); }
  .mediador-app.shell.simple-view .sidebar{ width: 72px; padding-left: var(--space-2); padding-right: var(--space-2); }
  .mediador-app.shell.simple-view .main{ margin-left: 72px; }
  .mediador-app.shell.simple-view .sidebar-logo{ padding-left: 0; padding-right: 0; display: flex; justify-content: center; }
  .mediador-app.shell.simple-view .mediador-logo-text,
  .mediador-app.shell.simple-view .sidebar-item > span:not(.sidebar-badge),
  .mediador-app.shell.simple-view .sidebar-plan-card,
  .mediador-app.shell.simple-view .account-btn .account-name,
  .mediador-app.shell.simple-view .account-btn .caret{ display: none; }
  .mediador-app.shell.simple-view .sidebar-group-label{
    height: 1px; padding: 0; margin: var(--space-3) var(--space-3); font-size: 0; background: rgba(255,255,255,.1); opacity: 1;
  }
  .mediador-app.shell.simple-view .sidebar-nav > .sidebar-group-label:first-child{ display: none; }
  .mediador-app.shell.simple-view .sidebar-item{ justify-content: center; padding: 0; position: relative; }
  .mediador-app.shell.simple-view .sidebar-item svg{ width: 20px; height: 20px; }
  .mediador-app.shell.simple-view .sidebar-item .sidebar-badge{
    position: absolute; top: 5px; right: 8px; margin: 0; padding: 2px 5px; font-size: 10px;
  }
  .mediador-app.shell.simple-view .account-btn{ justify-content: center; padding: 3px; }
  .mediador-app.shell.simple-view .sidebar-footer{ align-items: center; }
}
@media (max-width: 767px){
  /* en celular el menú ya es un panel que se abre y cierra: no hace falta el botón */
  .mediador-app .topbar-simple-btn{ display: none; }
}
@media (max-width: 1100px) and (min-width: 768px){
  .mediador-app .topbar-simple-label{ display: none; }
  .mediador-app .topbar-simple-btn{ padding: 0 9px; }
}

/* botón de Soporte arriba a la derecha */
.mediador-app .topbar-support{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px; border:1px solid var(--color-border-light); background:none; border-radius:var(--radius-md); cursor:pointer; color:var(--color-text-secondary); font:inherit; font-size:13.5px; font-weight:500; }
.mediador-app .topbar-support:hover{ color:var(--color-text); background:var(--color-brand-soft); }
.mediador-app .topbar-support svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width: 640px){ .mediador-app .topbar-support{ padding:0; width:40px; justify-content:center; border-color:transparent; } .mediador-app .topbar-support-label{ display:none; } }

/* Tu plan + salir directo */
.mediador-app .sidebar-plan-row{ display:flex; align-items:stretch; gap:8px; }
.mediador-app .sidebar-plan-row .sidebar-plan-card{ flex:1; min-width:0; }
.mediador-app .sidebar-logout{ flex:0 0 46px; width:46px; border:0; border-radius:var(--radius-md); background:var(--color-sidebar-hover); color:var(--color-text-on-dark-muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.mediador-app .sidebar-logout:hover{ color:#fff; background:rgba(255,255,255,.14); }
.mediador-app .sidebar-logout svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mediador-app.shell.simple-view .sidebar-plan-row{ justify-content:center; }
.mediador-app.shell.simple-view .sidebar-logout{ flex-basis:44px; width:44px; height:44px; }

/* acceso directo a la consola de administración (solo administradores de plataforma) */
.mediador-app .topbar-admin{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px; border:1px solid var(--color-brand); border-radius:var(--radius-pill); background:var(--color-brand-soft); color:var(--color-brand-dark); font-weight:600; font-size:14px; text-decoration:none; }
.mediador-app .topbar-admin[hidden]{ display:none; }
.mediador-app .topbar-admin:hover{ background:var(--color-brand); color:#06332E; }
.mediador-app .topbar-admin svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:767px){ .mediador-app .topbar-admin{ width:42px; height:42px; min-width:42px; padding:0; justify-content:center; border-radius:50%; } .mediador-app .topbar-admin span{ display:none; } }