/* ============================================================
   El sitio CON SESIÓN, como la app (modo templo) — 12-sep-2026
   ------------------------------------------------------------
   Todo cuelga de <html class="con-sesion">: la pone js/sesion.js
   cuando hay sesión (y, sin parpadeo, el <head> de las páginas de
   uso al leer localStorage «ifa-sesion»). La barra pública NUNCA se
   oculta (Rico, 18-sep): la concha es una capa debajo de ella. Las
   fichas no llevan la clase: solo usan los tokens --s-* de :root
   para el sello «abierto» y «Mi nota».

   Paleta = Theme.swift de la app (bg, carta, oro, pergamino…).
   Se redefinen los tokens de styles.css (--bg, --gold, --mark…)
   para que los componentes que ya existen (chips, tarjetas de los
   256, botones) cambien de traje sin tocar su HTML.

   Capas: 1 tokens · 2 concha (cabecera, pestañas, riel) ·
   3 piezas (tarjetas, ojos, filas, glifos) · 4 ajustes por página
   (tablero, fichas, cuenta). Prefijo «sh-» (shell) en todo lo nuevo.
   ============================================================ */

/* ── 1 · Tokens ─────────────────────────────────────────────── */
:root {
  --s-bg: #0B0906; --s-card: #14100A; --s-card2: #181309; --s-honda: #0E0A06;
  --s-txt: #F2EAD9; --s-txt2: #B9AD99; --s-txt3: #8D8271; --s-perg: #ECD9B4;
  /* Naranja, como el resto del sitio (Rico, 19-sep: fuera el dorado):
     --s-oro = el --gold-2 público, --s-orop = el --gold-deep público. */
  --s-oro: #FFA04D; --s-oroc: #FFC48F; --s-orop: #D95F00; --s-oros: rgba(255, 160, 77, 0.12);
  --s-linea: rgba(255, 160, 77, 0.3); --s-linea2: rgba(255, 160, 77, 0.5);
  --s-verde: #8FBE8F; --s-rojo: #CD7F70;
  --s-sombra: 0 12px 40px rgba(0, 0, 0, 0.45);
  --s-tabs-h: 74px;  /* alto de la barra de pestañas (móvil) */
  --s-riel-w: 240px; /* ancho del riel (escritorio) */
  --s-nav-h: 60px;   /* alto de la barra pública fija (styles.css .nav) */
}
html.con-sesion {
  /* Los tokens del sitio, en modo templo */
  --bg: var(--s-bg); --bg-elev: var(--s-card);
  --text: var(--s-txt); --text-2: var(--s-txt2); --text-3: var(--s-txt3);
  --line: var(--s-linea); --mark: var(--s-oro);
  --gold: var(--s-oro); --gold-2: var(--s-oro); --gold-deep: var(--s-orop);
  --gold-glow: rgba(249, 115, 22, 0.3);
  color-scheme: dark;
}
html.con-sesion body {
  background: var(--s-bg); color: var(--s-txt);
  padding-bottom: calc(var(--s-tabs-h) + env(safe-area-inset-bottom, 0px));
}
/* La barra pública se queda; solo sobra la invitación a crear cuenta */
html.con-sesion .nav__menu-cta { display: none; }

/* ── 2 · La concha ──────────────────────────────────────────── */
.sh-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--s-txt); text-decoration: none; }
.sh-brand i { width: 8px; height: 8px; border-radius: 50%; background: var(--s-oro); box-shadow: 0 0 10px rgba(255, 160, 77, 0.5); }
.sh-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--s-linea); color: var(--s-oro); text-decoration: none;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}
.sh-pill svg { width: 14px; height: 14px; }
.sh-pill--cerrado { border-color: var(--s-linea2); background: var(--s-oros); }

/* Pestañas (móvil): fijas abajo */
.sh-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  min-height: var(--s-tabs-h);
  background: rgba(11, 9, 6, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--s-linea);
}
.sh-tabs a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 56px; min-height: 44px; color: var(--s-txt3); text-decoration: none;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; border-radius: 10px;
  transition: color 0.2s ease;
}
.sh-tabs a svg { width: 22px; height: 22px; }
.sh-tabs a.is-active, .sh-tabs a:hover { color: var(--s-oro); }
.sh-tabs a:focus-visible, .sh-rail a:focus-visible, .sh-pill:focus-visible { outline: 2px solid var(--s-oro); outline-offset: 2px; }

/* Riel (escritorio): oculto hasta el corte */
.sh-rail { display: none; }

@media (min-width: 960px) {
  html.con-sesion body { padding-bottom: 0; padding-left: var(--s-riel-w); }
  .sh-tabs { display: none; }
  .sh-rail {
    position: fixed; top: var(--s-nav-h); bottom: 0; left: 0; z-index: 40; width: var(--s-riel-w); box-sizing: border-box;
    display: flex; flex-direction: column; gap: 6px; padding: 22px 16px;
    background: var(--s-honda); border-right: 1px solid var(--s-linea); overflow-y: auto;
  }
  .sh-rail__tab {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 44px; box-sizing: border-box;
    border-radius: 12px; color: var(--s-txt2); text-decoration: none;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease;
  }
  .sh-rail__tab svg { width: 22px; height: 22px; flex: none; }
  .sh-rail__tab:hover { color: var(--s-txt); background: rgba(255, 160, 77, 0.06); }
  .sh-rail__tab.is-active { color: var(--s-oro); background: var(--s-oros); }
  .sh-rail__aire { flex: 1; }
  .sh-rail .sh-pill { justify-content: flex-start; padding: 10px 14px; border-radius: 12px; }
  .sh-rail__quien { padding: 10px 14px; font-size: 12px; line-height: 1.5; color: var(--s-txt3); font-family: var(--font-sans); overflow-wrap: anywhere; }
  .sh-rail__quien b { color: var(--s-txt2); font-weight: 600; }
}

/* ── 3 · Piezas ─────────────────────────────────────────────── */
/* Página de uso: ancho de lectura y aire */
.sh-page { max-width: 1120px; margin: 0 auto; padding: calc(var(--s-nav-h) + 22px) 20px 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 960px) { .sh-page { padding: calc(var(--s-nav-h) + 36px) 48px 48px; gap: 22px; } }

.sh-h1 { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.05; margin: 0; color: var(--s-txt); letter-spacing: -0.01em; text-wrap: balance; }
.sh-h1 em { color: var(--s-oro); font-style: italic; }
.sh-sub { margin: 0; font-size: 13px; color: var(--s-txt2); line-height: 1.5; }
@media (min-width: 960px) { .sh-h1 { font-size: 40px; } .sh-sub { font-size: 14.5px; } }

.sh-ojo { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-oro); margin: 0; }
.sh-ojo--mudo { color: var(--s-txt3); }

.sh-card { background: var(--s-card); border: 1px solid var(--s-linea); border-radius: 18px; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.sh-card--honda { background: var(--s-card2); box-shadow: var(--s-sombra); }
.sh-card--14 { padding: 14px; }
@media (min-width: 960px) { .sh-card { padding: 22px; } .sh-card--honda { padding: 24px; } }
a.sh-card:hover { border-color: var(--s-linea2); }

.sh-grid2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sh-grid3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 960px) { .sh-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .sh-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .sh-span2 { grid-column: span 2; } }

.sh-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--s-oros); color: var(--s-oro); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sh-ico svg { width: 22px; height: 22px; }
.sh-ico--44 { width: 44px; height: 44px; }

/* Fila con icono, título, subtítulo y flecha (Libreta, Estudio) */
.sh-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 44px; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--s-linea); background: var(--s-card); color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer; width: 100%; }
.sh-fila:hover { border-color: var(--s-linea2); }
.sh-fila__txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sh-fila__t { font-size: 14px; font-weight: 600; color: var(--s-txt); }
.sh-fila__s { font-size: 11.5px; color: var(--s-txt3); line-height: 1.4; }
.sh-fila__ir { color: var(--s-txt3); display: flex; flex: none; }
.sh-fila__ir svg { width: 16px; height: 16px; }
@media (min-width: 960px) { .sh-fila__t { font-size: 15px; } .sh-fila__s { font-size: 12.5px; } }

/* Glifo del Odù en barras (como en la app) */
.sh-glifo { display: inline-flex; gap: 12px; align-items: flex-start; flex: none; --gl-w: 4px; --gl-h: 18px; --gl-gap: 5px; }
.sh-glifo__col { display: flex; flex-direction: column; align-items: center; gap: var(--gl-gap); }
.sh-glifo__ii { display: flex; gap: 4px; }
.sh-glifo b { display: block; width: var(--gl-w); height: var(--gl-h); border-radius: 3px; background: var(--s-oro); box-shadow: 0 0 6px rgba(255, 160, 77, 0.35); }
.sh-glifo--xs { --gl-w: 3px; --gl-h: 12px; --gl-gap: 3px; gap: 9px; }
.sh-glifo--s { --gl-w: 3px; --gl-h: 14px; --gl-gap: 4px; gap: 10px; }
.sh-glifo--l { --gl-w: 5px; --gl-h: 24px; --gl-gap: 6px; gap: 14px; }

/* Chips de testigos / favoritos */
.sh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--s-linea2); color: var(--s-oro); background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 34px; }
/* Con glifo la pastilla crece a lo alto y los extremos se curvan: el signo
   necesita más aire para no rozar el borde (Rico, 19-sep). */
.sh-chip .sh-glifo { margin: 2px 0 2px 4px; }
.sh-chip:hover { background: var(--s-oros); }

/* Nombre grande del Odù (voz) */
.sh-odu { display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.sh-odu__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-odu__n { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--s-oroc); line-height: 1; }
.sh-odu__s { font-size: 12px; color: var(--s-txt3); }
.sh-odu__ir { font-size: 12px; color: var(--s-oro); }
@media (min-width: 960px) { .sh-odu__n { font-size: 26px; } }

/* Cita en pergamino (refrán) */
.sh-cita { font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--s-perg); padding-left: 12px; border-left: 2px solid var(--s-orop); margin: 0; }
@media (min-width: 960px) { .sh-cita { font-size: 16px; } }

/* Enlace-acción en versalitas */
.sh-accion { display: inline-flex; align-items: center; gap: 6px; color: var(--s-oro); font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none; background: none; border: none; padding: 8px 0; cursor: pointer; }
.sh-accion svg { width: 16px; height: 16px; }
.sh-accion--fin { align-self: flex-end; }

/* Botón dorado y botón mudo */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--s-linea2); background: var(--s-oros); color: var(--s-oro); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.sh-btn:hover { background: rgba(255, 160, 77, 0.2); }
.sh-btn--lleno { background: var(--s-oro); color: #1c120a; border-color: var(--s-oro); }
.sh-btn--lleno:hover { background: var(--s-oroc); }
.sh-btn--mudo { background: transparent; color: var(--s-txt2); border-color: var(--s-linea); }
.sh-btn:disabled { opacity: 0.55; cursor: default; }

/* Campos */
.sh-input { width: 100%; box-sizing: border-box; background: var(--s-honda); border: 1px solid var(--s-linea); border-radius: 12px; color: var(--s-txt); font: inherit; font-size: 16px; padding: 11px 13px; }
.sh-input:focus { outline: none; border-color: var(--s-linea2); }
.sh-input::placeholder { color: var(--s-txt3); }
textarea.sh-input { resize: vertical; min-height: 84px; }

.sh-nota { font-size: 11.5px; color: var(--s-txt3); line-height: 1.5; margin: 0; padding: 0 4px; }
.sh-nota a, .sh-vacio a { color: var(--s-oro); text-decoration: none; font-weight: 600; }
.sh-vacio { font-size: 13.5px; line-height: 1.6; color: var(--s-txt3); margin: 0; }
.sh-linea { height: 1px; background: var(--s-linea); border: 0; margin: 0; }
.sh-estado { color: var(--s-oro); font-size: 13px; min-height: 17px; margin: 0; }

/* Estadísticas en tres celdas (Estudio) */
.sh-stats { display: flex; align-items: center; padding: 14px 0; }
.sh-stats > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sh-stats > i { width: 1px; height: 28px; background: var(--s-linea2); }
.sh-stats b { font-size: 20px; font-weight: 700; color: var(--s-txt); font-variant-numeric: tabular-nums; }
.sh-stats span { font-size: 10.5px; color: var(--s-txt3); }

/* Cumpleaños */
.sh-fechas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sh-fechas li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--s-txt2); }
.sh-fechas li + li { border-top: 1px solid var(--s-linea); }
.sh-fechas b { color: var(--s-txt); font-weight: 600; }
.sh-fechas small { font-size: 12px; color: var(--s-txt3); white-space: nowrap; }
.sh-fechas small.is-hoy { color: var(--s-oro); font-weight: 600; }
/* En pantallas estrechas la fecha y el «faltan N días» van en dos renglones:
   en una sola fila la fecha se partía y el aviso quedaba desfasado (19-sep). */
@media (max-width: 600px) { .sh-fechas li { flex-direction: column; align-items: flex-start; gap: 2px; } }

@media (prefers-reduced-motion: reduce) { .sh-tabs a, .sh-rail__tab, .sh-card { transition: none; } }

/* ── 4 · Ajustes por página ─────────────────────────────────── */
/* 4a · /tablero (Los 256): la rejilla de los 16 y los caminos de la familia */
html.con-sesion #tablero { padding: 0; }
html.con-sesion #tablero .section__head { margin: 0; }
html.con-sesion #tablero .section__head .sec-tag, html.con-sesion #tablero .section__head p { display: none; }
html.con-sesion #tablero .section__head h2 { font-size: 30px; line-height: 1.05; margin: 0; color: var(--s-txt); }
html.con-sesion #tablero .section__head h2 em { color: var(--s-oro); }
html.con-sesion .odu-buscar { margin: 0; }
html.con-sesion .odu-buscar input { background: var(--s-card); border-color: var(--s-linea); color: var(--s-txt); border-radius: 14px; }
html.con-sesion .nav-major { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
html.con-sesion .nav-major .chip {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 10px 4px 8px; margin: 0; border-radius: 14px; background: var(--s-card); border: 1px solid var(--s-linea);
  color: var(--s-txt2); font-size: 11px; font-weight: 600; line-height: 1.1; min-height: 44px; transform: none;
}
html.con-sesion .nav-major .chip:hover { border-color: var(--s-linea2); }
html.con-sesion .nav-major .chip.is-active { background: var(--s-card2); border-color: var(--s-linea2); color: var(--s-oro); }
html.con-sesion .nav-major .chip .chip__dot { display: none; }
html.con-sesion .nav-hint { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-oro); margin: 4px 0 0; display: flex; align-items: center; gap: 14px; }
html.con-sesion .nav-hint::after { content: ""; flex: 1; height: 1px; background: var(--s-linea); }
html.con-sesion .combos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
html.con-sesion .combo {
  display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 11px 12px; min-height: 44px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid var(--s-linea); background: var(--s-card); transform: none; box-shadow: none;
}
html.con-sesion .combo:hover { border-color: var(--s-linea2); background: var(--s-card2); box-shadow: none; transform: none; }
html.con-sesion .combo--meji { background: var(--s-card2); border-color: var(--s-linea2); }
html.con-sesion .combo__n { position: static; font-family: var(--font-display); font-size: 15px; color: var(--s-oro); min-width: 1.4em; margin: 0; opacity: 1; }
html.con-sesion .combo__fig, html.con-sesion .combo__status, html.con-sesion .combo__sub { display: none; }
html.con-sesion .combo__name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--s-txt); margin: 0; }
html.con-sesion .ad-strip, html.con-sesion .ad-card { display: none; }
@media (min-width: 960px) {
  html.con-sesion .nav-major { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
  html.con-sesion .nav-major .chip { padding: 14px 8px 12px; font-size: 12.5px; }
  html.con-sesion .nav-major .chip .sh-glifo { --gl-h: 16px; --gl-w: 4px; --gl-gap: 4px; gap: 12px; }
  html.con-sesion .combos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  html.con-sesion .combo { padding: 12px 14px; gap: 10px; }
  html.con-sesion .combo__n { font-size: 16px; }
  html.con-sesion .combo__name { font-size: 13.5px; }
  html.con-sesion #tablero .section__head h2 { font-size: 38px; }
  html.con-sesion #tablero .sh-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
  html.con-sesion #tablero .sh-cabeza .odu-buscar { width: 380px; flex: none; }
}
html.con-sesion .footer { border-top: 1px solid var(--s-linea); }
@media (min-width: 960px) { html.con-sesion .footer { padding-left: 48px; padding-right: 48px; } }

/* 4b · Las fichas /odu/<slug> y /en/odu/<slug> */
/* Con la bóveda abierta ya no hay nada que vender en la ficha: fuera los
   sellos «LA LIBRETA» y los candados que el generador dejó pintados. */
.codice[data-vault-open] .sello--cand,
.codice[data-vault-open] .lk,
.odu-page[data-vault-open] .lockline__chip,
[data-vault-open] .nav__menu-cta { display: none !important; }
/* El sello «ABIERTO» que js/odu-vault-*.js cuelga bajo el atril */
.sh-abierto { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--s-linea2); color: var(--s-oro); font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; margin: 16px 0 0; }
.sh-abierto svg { width: 14px; height: 14px; }
/* «Mi nota» en la ficha (js/odu-vault-*.js) */
.sh-minota { margin: 26px 0 0; display: flex; flex-direction: column; gap: 10px; }
.sh-minota__acc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }