/* ─────────────────────────────────────────────────────────────────────────
   SOMNIA Hub — tokens + cáscara (Fase 3)
   Paleta oficial SOMNIA · verde forest dominante. Todo el estilo vive aquí
   (sin estilos inline) para que la CSP de la cáscara sea 'self' sin unsafe-inline.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --navy:       #252A3E;
  --forest:     #384646;   /* dominante */
  --cream:      #E6E7E2;
  --steel:      #8798AA;
  --stone:      #CDCBC7;
  --gold:       #A98A3E;
  --red:        #B0392E;

  --forest-90:  #3f4f4f;
  --forest-08:  rgba(56, 70, 70, 0.08);
  --linea:      var(--stone);
  --ok:         #4a6b4a;

  --bg:         var(--cream);
  --surface:    #ffffff;
  --texto:      var(--navy);    /* cuerpo en navy */
  --texto-mut:  var(--steel);

  /* Tipografía SELF-HOSTED. Nombre real primero + fallback del sistema: si aún no
     hay .woff2 en /static/fonts/, cae al fallback; al añadir @font-face con esos
     mismos nombres, se activan solas. NUNCA se carga desde un CDN (RGPD). */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radio: 6px;
  --sombra: 0 1px 2px rgba(37, 42, 62, 0.06), 0 4px 16px rgba(37, 42, 62, 0.05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--forest);
  margin: 0;
}

/* ── Topbar (verde dominante) ─────────────────────────────────────────────── */
.topbar {
  background: var(--forest);
  color: var(--cream);
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .marca {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--cream);
  font-weight: 500;
}
.topbar .marca em { font-style: normal; color: var(--gold); padding: 0 2px; }
.toggle-side {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 7px; border: 0; cursor: pointer;
  color: var(--cream); background: transparent; margin-right: -6px;
}
.toggle-side:hover { background: rgba(230, 231, 226, 0.12); }

/* ── Nav de secciones (en la barra) ───────────────────────────────────────── */
.secnav { display: flex; align-items: center; gap: 6px; }
.secnav-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radio);
  color: var(--stone); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  transition: background 0.12s, color 0.12s;
}
.secnav-item:hover { color: var(--cream); background: rgba(230, 231, 226, 0.08); }
.secnav-item.activo { color: var(--cream); background: rgba(230, 231, 226, 0.14); }
.secnav-ico { display: inline-flex; opacity: 0.9; }
.pill-stub {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--forest); background: var(--stone);
  border-radius: 999px; padding: 1px 7px;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.wrap { max-width: 1160px; margin: 0 auto; padding: 24px 28px 32px; }

/* ── Cabecera de sección + sello de frescura (FUERA del iframe) ────────────── */
.briefing-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px;
  margin-bottom: 16px;
}
.briefing-head h1 { font-size: 30px; }
.sello {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--texto-mut); font-size: 12.5px;
}
.sello-ico { display: inline-flex; color: var(--ok); }
.sello-txt strong { color: var(--forest); font-weight: 600; }
.sello-fallback { color: var(--gold); font-weight: 500; }

/* ── Sidebar de familias (Sección Briefing) ──────────────────────────────── */
.split { display: grid; grid-template-columns: 236px 1fr; align-items: start;
  transition: grid-template-columns 0.18s ease; }
.split.oculto { grid-template-columns: 0 1fr; }
.sidebar { position: sticky; top: 60px; align-self: start; height: calc(100vh - 60px);
  overflow-y: auto; background: var(--bg); border-right: 1px solid var(--linea);
  padding: 16px 0; }
.split.oculto .sidebar { border-right: none; padding: 0; overflow: hidden; }

.grupo { padding: 2px 16px 12px; }
.grupo.prop { border-left: 3px solid var(--gold); padding-left: 13px; }
.fam { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; user-select: none; white-space: nowrap;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--steel); font-weight: 600; padding: 8px 8px 8px 2px; border-radius: 6px; }
.fam:hover { background: rgba(56, 70, 70, 0.05); }
.fam.prop { color: var(--gold); }
.fam .chev { flex: none; opacity: 0.7; display: inline-flex; transition: transform 0.16s ease; }
.grupo.plegado .fam .chev { transform: rotate(-90deg); }
.grupo.plegado .items { display: none; }
.item { display: block; font-size: 13px; color: var(--forest); text-decoration: none;
  padding: 7px 10px; border-radius: 6px; margin: 1px 0; white-space: nowrap; }
.item:hover { background: rgba(56, 70, 70, 0.06); }
.item.activo { background: var(--forest); color: var(--cream); font-weight: 500; }

.vista { padding: 22px 28px 34px; min-width: 0; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: none;
    border-bottom: 1px solid var(--linea); }
  .split.oculto .sidebar { display: none; }
}

/* ── Marco del iframe del briefing ────────────────────────────────────────── */
.briefing-frame {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  background: var(--surface);
}
.briefing-iframe {
  display: block; width: 100%; height: 78vh; min-height: 520px; border: 0;
  background: var(--surface);
}

/* ── Stub de sección (Métricas) ───────────────────────────────────────────── */
.stub {
  border: 1px dashed var(--linea); border-radius: var(--radio);
  padding: 40px 32px; background: var(--forest-08); max-width: 640px;
}
.stub-eyebrow {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--gold); font-weight: 600;
}
.stub-texto { margin: 0; color: var(--texto-mut); font-size: 14px; line-height: 1.65; }

/* ── Sesión en la barra (usuario + salir) ─────────────────────────────────── */
.sesion { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sesion-email { color: var(--stone); font-size: 12.5px; }
.sesion-logout { margin: 0; }
.btn-logout {
  font-family: var(--sans); font-size: 12px; cursor: pointer;
  color: var(--cream); background: transparent;
  border: 1px solid rgba(230, 231, 226, 0.35); border-radius: var(--radio);
  padding: 5px 12px;
}
.btn-logout:hover { border-color: var(--cream); }

/* ── Páginas públicas (login / aviso) ─────────────────────────────────────── */
body.publico {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.publico-card {
  background: var(--surface); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 40px 36px; max-width: 420px; width: 100%; text-align: center;
}
.marca-grande {
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  color: var(--forest); margin-bottom: 20px;
}
.marca-grande em { font-style: normal; color: var(--gold); padding: 0 2px; }
.publico-card h1 { font-size: 26px; margin-bottom: 10px; }
.pub-texto { color: var(--texto-mut); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.pub-enlace { color: var(--forest); font-weight: 500; font-size: 13px; text-decoration: none; }
.pub-enlace:hover { text-decoration: underline; }
.login-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.login-input {
  font-family: var(--sans); font-size: 14px; padding: 11px 14px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  color: var(--texto); background: var(--bg);
}
.login-input:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); }
.btn-primario {
  font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer;
  color: var(--cream); background: var(--forest);
  border: 1px solid var(--forest); border-radius: var(--radio); padding: 11px 14px;
}
.btn-primario:hover { background: var(--forest-90); }

@media (max-width: 720px) {
  .topbar { gap: 14px; padding: 0 16px; }
  .secnav-label { display: none; }
  .briefing-iframe { height: 70vh; }
}