/* ════════════════════════════════════════════════════════════════
   tokens-productivity.css — Capa "productividad" sobre Chromatic Density
   F0 B1 · docs/PLAN_F0_SHELL.md · docs/PLAN_ALUNA_WORKSPACE.md §D84

   Tokens y patrones para UIs densas de lectura/gestión (correo, listas,
   maestro-detalle tipo Outlook). ADITIVO: no re-estiliza nada existente;
   ningún componente actual cambia hasta que un módulo adopte estas clases.

   Convenciones (idénticas a css/app.css):
   - Oscuro = DEFAULT de plataforma → valores en :root.
   - Claro  = opción explícita → overrides en [data-theme="light"].
   - --brand-* siguen siendo tenant-editables; aquí solo se CONSUMEN
     (p. ej. --row-selected tiñe con --brand-primary vía color-mix).
   ════════════════════════════════════════════════════════════════ */

/* ── 1 · Escala de superficies neutras (lectura densa) ──────────────
   Menos "void" que el fondo de marca: grises ligeramente elevados para
   que listas largas de texto no floten sobre negro puro. 0 = base de
   panel de lista · 1 = superficie elevada (toolbar/encabezados) ·
   2 = hover/chips · 3 = máxima elevación local (popovers de la capa). */
:root {
  --surface-0: #131316;
  --surface-1: #18181b;
  --surface-2: #1e1e21;
  --surface-3: #242428;
  --divider:   #2b2b2f;

  /* Filas de lista: estados. Selección teñida con la marca del tenant
     (cae bien tanto con el lime default como con overrides). */
  --row-hover:    rgba(255,255,255,.045);
  --row-selected: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  /* BUG REAL reportado en vivo (2026-07-15, capturas de iPhone: "estos botones salen si le das
     clic" — el usuario apenas TOCABA/seleccionaba una fila de Correo y las tiras de swipe
     Posponer/Eliminar aparecían detrás, sin ningún gesto de arrastre). Causa raíz: `--row-selected`
     mezcla con `transparent` a propósito — funciona bien para sus consumidores normales (ítems de
     nav/árbol/lista, que no tienen nada debajo salvo el fondo plano de la superficie) pero
     `.mail-row-swipe-content` SÍ tiene algo detrás en touch (`pointer:coarse`): las tiras de swipe
     `.mail-row-swipe-left/-right`, con fondo sólido de color (azul/naranja/rojo), colocadas en
     z-index:0 bajo el contenido — un fondo 86%-transparente encima las deja verse a través, con
     CERO relación con un gesto de arrastre real. Versión opaca del mismo tinte (mismo % que
     --row-selected, mezclado sobre --surface-0 en vez de transparent) para cualquier consumidor
     que SÍ tenga contenido debajo que deba taparse por completo. */
  --row-selected-opaque: color-mix(in srgb, var(--brand-primary) 14%, var(--surface-0));
  /* SEGUNDA VUELTA del mismo bug (2026-07-15, confirmado con captura real donde el fondo tapaba
     Posponer Y Eliminar A LA VEZ — un solo lado revelado solo pasa con swipe genuino, los DOS a
     la vez confirma que no fue arrastre): `:hover` tiene el MISMO problema que `.is-selected`/
     `.is-open` de arriba — iOS Safari (y algunos WebView de Android) tienen un comportamiento
     documentado de "sticky hover" donde un simple TAP dispara y deja pegado el estado `:hover` de
     un elemento con handler de click, sin que exista puntero de precisión real. `--row-hover`
     (rgba con alpha bajo, pensado para mouse en escritorio) deja ver las tiras sólidas de swipe
     exactamente igual que --row-selected sin opacidad. `color-mix(in srgb, white/black P%, base)`
     es la composición matemáticamente EQUIVALENTE a `rgba(...,P%)` sobre esa base — mismo
     resultado visual, pero opaco (sin nada de atrás pudiendo verse a través). */
  --row-hover-opaque: color-mix(in srgb, white 4.5%, var(--surface-0));
  /* Peso tipográfico de "no leído" (Inter carga 400/500/600/700). */
  --row-unread-weight: 600;
}

[data-theme="light"] {
  /* Light de primera clase (D84): blancos limpios + grises cálidos,
     misma familia neutra que --bg-* claros de app.css (#f5f4f0/#e5e3dc). */
  --surface-0: #ffffff;
  --surface-1: #faf9f7;
  --surface-2: #f3f2ee;
  --surface-3: #ecebe6;
  --divider:   #e7e5de;

  --row-hover:    rgba(0,0,0,.035);
  --row-selected: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --row-selected-opaque: color-mix(in srgb, var(--brand-primary) 18%, var(--surface-0));
  --row-hover-opaque: color-mix(in srgb, black 3.5%, var(--surface-0));
}

/* ── 2 · Sistema de densidad (data-density en <html>) ───────────────
   Default = comfortable (valores en :root para que TODO herede sin
   atributo). El toggle JS llega en F0 B3+; hasta entonces nadie pone
   el atributo y no cambia nada. Independiente del legado
   .density-compact/--sp-mult (ese sigue para espaciado general). */
:root {
  --row-h:     40px;          /* alto de fila de lista */
  --pad-cell:  8px 12px;      /* padding de celda/fila */
  --font-list: 13.5px;        /* cuerpo de texto en listas densas */
}
:root[data-density="comfortable"] {
  --row-h:     40px;
  --pad-cell:  8px 12px;
  --font-list: 13.5px;
}
:root[data-density="compact"] {
  --row-h:     32px;
  --pad-cell:  4px 10px;
  --font-list: 13px;
}

/* ── 1b · Tokens semánticos de altura (§5.4 PLAN_MAIL_NATIVE_RESPONSIVE.md, Fase 1) ──
   100% ADITIVOS en esta pasada — NADA los consume todavía. El objetivo es reemplazar
   cálculos ad-hoc repetidos en varios archivos (native-float-y compone 56px+safe-area+82px,
   mail.css reservaba padding-bottom con calc()s propios por breakpoint) por UNA fuente de
   verdad — esa migración es Fase 2+, no esta. Los valores de abajo son los reales HOY
   (56px = --topbar-height / .bottom-nav; 56px+12px = el patrón FAB+aire ya usado en
   native-materials.css), documentados aquí para que la migración futura no tenga que
   redescubrirlos — pero reconciliar el tercer componente de native-float-y (el propio
   --larry-fab, 70px, ver su comentario en css/native-materials.css) contra este esquema
   simplificado de "dock + gap" queda pendiente de esa migración, no de esta fase. */
:root {
  --app-header-h: 48px;          /* = --topbar-height */
  --app-tabbar-content-h: 56px;  /* = .bottom-nav sin safe-area */
  --app-tabbar-safe-h: env(safe-area-inset-bottom, 0px);
  --app-tabbar-total-h: calc(var(--app-tabbar-content-h) + var(--app-tabbar-safe-h));
  --mail-dock-h: 56px;
  --mail-dock-gap: 12px;
  --mail-content-bottom-inset: calc(var(--app-tabbar-total-h) + var(--mail-dock-h) + var(--mail-dock-gap));
}
[data-layout="tablet"] {
  /* §4.3: 769–879 no asume bottom nav — no reservar su alto en este layout. */
  --app-tabbar-content-h: 0px;
  --app-tabbar-safe-h: 0px;
}

/* ── 3 · Patrón toolbar (.yt-toolbar) ───────────────────────────────
   Barra de acciones tipo Outlook: 44px, iconos con etiqueta; bajo
   720px las etiquetas colapsan y quedan solo iconos (title/aria-label
   del botón siguen dando el nombre). Uso:
     <div class="yt-toolbar">
       <button class="yt-tb-btn">🗑 <span class="yt-tb-label">Eliminar</span></button>
       <span class="yt-tb-sep"></span> …
       <span class="yt-tb-spacer"></span> …acciones a la derecha…
     </div> */
.yt-toolbar {
  display:flex; align-items:center; gap:4px;
  height:44px; min-height:44px; padding:0 var(--sp-2);
  background:var(--surface-1);
  border-bottom:1px solid var(--divider);
  overflow-x:auto; overflow-y:hidden;   /* nunca rompe a 2 líneas */
  scrollbar-width:none;
}
.yt-toolbar::-webkit-scrollbar { display:none; }
.yt-tb-btn {
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 10px; flex-shrink:0;
  border:none; border-radius:var(--radius-input);
  background:transparent; color:var(--text-2);
  font-family:var(--brand-font-body); font-size:var(--fs-2); font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s;
}
.yt-tb-btn:hover  { background:var(--surface-2); color:var(--text); }
.yt-tb-btn:active { background:var(--surface-3); }
.yt-tb-btn[disabled] { opacity:.45; cursor:default; background:transparent; }
.yt-tb-btn.is-active {
  background:var(--row-selected); color:var(--text);
}
.yt-tb-sep {
  width:1px; height:20px; flex-shrink:0;
  background:var(--divider); margin:0 4px;
}
.yt-tb-spacer { flex:1 1 auto; min-width:8px; }
@media (max-width:719px) {
  .yt-toolbar .yt-tb-label { display:none; }   /* colapsa a solo-icono */
  .yt-tb-btn { padding:0 8px; min-width:36px; justify-content:center; }
}

/* ── 4 · Patrón maestro-detalle (.yt-split) ─────────────────────────
   Grid genérico: panel de lista 360–440px + detalle flexible. Bajo
   880px colapsa a UN panel: por default se ve la lista; la clase de
   estado .show-detail (la pondrá el JS del módulo que lo adopte)
   muestra el detalle. Solo CSS — sin comportamiento aquí. Uso:
     <div class="yt-split">
       <div class="yt-split-list">…filas…</div>
       <div class="yt-split-detail">…lectura…</div>
     </div> */
.yt-split {
  display:grid;
  grid-template-columns:minmax(360px,440px) minmax(0,1fr);
  height:100%; min-height:0;
  background:var(--surface-0);
}
.yt-split-list {
  min-height:0; min-width:0; overflow-y:auto;
  border-right:1px solid var(--divider);
  background:var(--surface-0);
  font-size:var(--font-list);
}
.yt-split-detail {
  min-height:0; min-width:0; overflow-y:auto;
  background:var(--surface-0);
  /* PG-3 (audit F0): en monitores anchos el panel de detalle (correo/lectura) se estiraba a
     todo el 1fr restante — líneas de texto poco legibles. max-width + centrado no rompe el
     tamaño flexible de la columna del grid (.yt-split sigue minmax(0,1fr)); solo limita el
     ANCHO DE LECTURA dentro de ella.
     Auditoría F4+F5 (2026-07-17, hallazgo HIGH, PG-C5): SIN `width:100%` explícito, un
     consumidor cuyo contenido no fuerza su propio ancho (caso real: Chat/.yt-split-detail sin
     una clase propia como .mail-detail-pane) colapsa a ancho de CONTENIDO en vez de llenar la
     columna hasta el tope — deja espacio muerto simétrico que empeora en monitores más anchos.
     mail.css YA lo traía en su propia clase (.mail-detail-pane); se sube aquí al compartido para
     que TODO consumidor de .yt-split-detail lo herede sin tener que redescubrirlo. */
  width:100%;
  max-width:1400px;
  margin-inline:auto;
}
/* Fila de lista de referencia (opcional para quien adopte el patrón). */
.yt-split-list .yt-row {
  display:flex; align-items:center; gap:8px;
  min-height:var(--row-h); padding:var(--pad-cell);
  border-bottom:1px solid var(--divider);
  font-size:var(--font-list); color:var(--text-2);
  cursor:pointer;
}
.yt-split-list .yt-row:hover       { background:var(--row-hover); }
.yt-split-list .yt-row.is-selected { background:var(--row-selected); color:var(--text); }
.yt-split-list .yt-row.is-unread   { font-weight:var(--row-unread-weight); color:var(--text); }
@media (max-width:879px) {
  .yt-split { grid-template-columns:1fr; }
  .yt-split-detail             { display:none; }
  .yt-split.show-detail .yt-split-list   { display:none; }
  .yt-split.show-detail .yt-split-detail { display:block; }
}

/* ── 5 · Impresión: superficies a blanco (mismo criterio que app.css) ── */
@media print {
  :root, [data-theme="dark"] {
    --surface-0:#ffffff; --surface-1:#ffffff; --surface-2:#f8f7f4;
    --surface-3:#f3f2ee; --divider:#e0ddd7;
    --row-hover:transparent; --row-selected:transparent;
  }
}