/* ============================================================================
   Sarance Visión — Capa editorial cálida
   Se carga DESPUÉS de app.css. Solo sobreescribe / agrega; no reemplaza nada
   estructural. Quita estos estilos y la app vuelve a su estado anterior.

   Dirección: redacción de revista impresa moderna.
   - Fraunces más grande y respirado en titulares
   - Gradiente sutil verde→negro en el fondo
   - Cards con sombra interna + borde lima animado al hover
   - Badges con número animado
   - Skeletons (huesos grises pulsantes) en vez de spinners
   - Stagger fade-in en listas
   ============================================================================ */

:root {
  /* Tipografía editorial — más respiro */
  --ed-tracking-display: -0.02em;     /* títulos: un poco condensados */
  --ed-tracking-eyebrow: 0.14em;      /* eyebrow: muy abierto */
  --ed-leading-display: 1.05;
  --ed-leading-body: 1.55;

  /* Sombras editoriales (cálidas, no quirúrgicas) */
  --ed-shadow-card: 0 1px 0 rgb(var(--ink-rgb) / 0.04) inset,
                    0 12px 32px -16px rgba(0,0,0,0.6),
                    0 2px 6px -2px rgba(0,0,0,0.4);
  --ed-shadow-hover: 0 1px 0 rgb(var(--accent-rgb) / 0.18) inset,
                     0 16px 40px -12px rgba(0,0,0,0.55),
                     0 0 0 1px rgb(var(--accent-rgb) / 0.22);
  --ed-shadow-press: 0 2px 8px -2px rgba(0,0,0,0.5) inset;

  /* Fondo neutro negro puro (auditoría 2026-05 v4): quitados los radial-gradients
     de lima/indigo que generaban "neblina verde arriba". Fondo plano negro Apple-style. */
  --ed-bg-gradient: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

/* ════════════════════════════════════════════════════════════════════════
   Fondo cálido del app — gradiente sutil tipo papel
   ════════════════════════════════════════════════════════════════════════ */
body {
  background: var(--ed-bg-gradient);
  background-attachment: fixed;
}

/* ════════════════════════════════════════════════════════════════════════
   Titulares y eyebrow: Fraunces más grande, tracking ajustado
   ════════════════════════════════════════════════════════════════════════ */
.page-title,
.hero-title,
#hero-title {
  font-family: 'Fraunces', var(--font-body) !important;
  font-weight: 600;
  letter-spacing: var(--ed-tracking-display);
  line-height: var(--ed-leading-display);
}

#hero-title {
  font-size: clamp(36px, 5vw, 52px);
}

#hero-title em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#hero-eyebrow,
.hero-eyebrow,
.nav-label {
  text-transform: uppercase;
  letter-spacing: var(--ed-tracking-eyebrow);
  font-size: 11px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   Cards editoriales — sombra interna + borde lima al hover
   ════════════════════════════════════════════════════════════════════════ */
.card,
.kanban-card,
.noticia-card,
.config-section,
.metric-card,
.guia-pasante {
  box-shadow: var(--ed-shadow-card);
  transition: box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.25s;
}

.card:hover,
.kanban-card:hover,
.noticia-card:hover {
  box-shadow: var(--ed-shadow-hover);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════════
   Sidebar: ítems con micro-animación de borde izquierdo
   ════════════════════════════════════════════════════════════════════════ */
.nav-item {
  position: relative;
  transition: background 0.18s, color 0.18s;
}
.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--accent, var(--accent));
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-item:hover::before { height: 50%; }
.nav-item.active::before { height: 70%; }

/* Badges del sidebar: pulsan al cambiar */
.nav-badge {
  transition: background 0.2s, color 0.2s, transform 0.2s;
  font-variant-numeric: tabular-nums;
}

@keyframes edBadgeBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   Botones: micro-interacción al press
   ════════════════════════════════════════════════════════════════════════ */
.btn,
button.btn-primary,
button.btn-ghost {
  transition: transform 0.12s, box-shadow 0.2s, background 0.18s;
}
.btn:active,
button.btn-primary:active,
button.btn-ghost:active {
  transform: scale(0.97);
  box-shadow: var(--ed-shadow-press);
}

/* ════════════════════════════════════════════════════════════════════════
   Stagger fade-in (listas que aparecen escalonadas)
   ════════════════════════════════════════════════════════════════════════ */
.editorial-fade-in {
  animation: edFadeInUp 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes edFadeInUp {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════
   Skeletons (huesos grises pulsantes)
   ════════════════════════════════════════════════════════════════════════ */
.editorial-skeleton-card,
.editorial-skeleton-row,
.editorial-skeleton-metric {
  padding: 18px;
  border-radius: 14px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.editorial-skeleton-row {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.editorial-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.editorial-skeleton-line {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg,
                rgb(var(--ink-rgb) / 0.05) 0%,
                rgb(var(--ink-rgb) / 0.11) 50%,
                rgb(var(--ink-rgb) / 0.05) 100%);
  background-size: 200% 100%;
  animation: edSkeletonShimmer 1.4s ease-in-out infinite;
}
.editorial-skeleton-line.w-20 { width: 20%; }
.editorial-skeleton-line.w-30 { width: 30%; }
.editorial-skeleton-line.w-40 { width: 40%; }
.editorial-skeleton-line.w-50 { width: 50%; }
.editorial-skeleton-line.w-60 { width: 60%; }
.editorial-skeleton-line.w-80 { width: 80%; }
.editorial-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(90deg,
                rgb(var(--ink-rgb) / 0.05) 0%,
                rgb(var(--ink-rgb) / 0.11) 50%,
                rgb(var(--ink-rgb) / 0.05) 100%);
  background-size: 200% 100%;
  animation: edSkeletonShimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes edSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   Tarjeta "Servicio gestionado" (sección Generador IA)
   ════════════════════════════════════════════════════════════════════════ */
.ia-server-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg,
                rgb(var(--accent-rgb) / 0.06) 0%,
                rgb(var(--accent-rgb) / 0.02) 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.2);
}
.ia-server-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent);
}
.ia-server-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin-bottom: 4px;
}
.ia-server-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, var(--text-3));
}

/* Banner "solo director puede modificar" */
.settings-readonly-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgb(var(--info-rgb) / 0.06);
  border: 1px solid rgb(var(--info-rgb) / 0.2);
  color: var(--muted, var(--text-3));
  font-size: 13px;
}
.settings-readonly-banner svg {
  flex-shrink: 0;
  color: var(--muted, var(--text-3));
}

/* ════════════════════════════════════════════════════════════════════════
   Test de conexión IA (resultado de testClaudeKey)
   ════════════════════════════════════════════════════════════════════════ */
.ia-test {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}
.ia-test__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.ia-test__line { margin-bottom: 4px; }
.ia-test__meta {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 6px;
}
.ia-test__meta code {
  background: rgba(0,0,0,0.25);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
}

.ia-test--loading {
  background: rgb(var(--warning-rgb) / 0.05);
  border: 1px solid rgb(var(--warning-rgb) / 0.2);
  color: var(--warning);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ia-test--ok {
  background: rgb(var(--success-rgb) / 0.05);
  border: 1px solid rgb(var(--success-rgb) / 0.25);
  color: var(--success);
}
.ia-test--err {
  background: rgb(var(--danger-rgb) / 0.05);
  border: 1px solid rgb(var(--danger-rgb) / 0.25);
  color: var(--danger);
}
.ia-test-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: edPulseDot 1.1s ease-in-out infinite;
}
@keyframes edPulseDot {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* Pill de estado de Claude */
.claude-status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: 0.04em;
}
.claude-status-connected {
  background: rgb(var(--success-rgb) / 0.12);
  color: var(--success);
  border: 1px solid rgb(var(--success-rgb) / 0.3);
}
.claude-status-checking {
  background: rgb(var(--warning-rgb) / 0.1);
  color: var(--warning);
  border: 1px solid rgb(var(--warning-rgb) / 0.25);
}
.claude-status-disconnected,
.claude-status-idle {
  background: rgba(140,140,140,0.08);
  color: var(--muted, var(--text-3));
  border: 1px solid var(--text-3);
}

/* ════════════════════════════════════════════════════════════════════════
   Topbar y bell editorial
   ════════════════════════════════════════════════════════════════════════ */
.topbar {
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
  /* v4 (2026-05-27 AUDIT FINAL): el bg era rgba(14,28,32,0.65) — eso es
     #0E1C20 que ES UN TEAL VERDE OSCURO. Por eso TODO el topbar tenía tinte
     verde aunque app.css decía #050505 — esta regla se carga DESPUÉS y ganaba.
     Ahora negro sólido sin blur. */
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ════════════════════════════════════════════════════════════════════════
   Inputs y selects con hover lima sutil
   ════════════════════════════════════════════════════════════════════════ */
.form-input,
.auth-input {
  transition: border-color 0.18s, box-shadow 0.2s, background 0.18s;
}
.form-input:focus,
.auth-input:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.45);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.1);
}

/* ════════════════════════════════════════════════════════════════════════
   Selector de país/región en Configuración
   ════════════════════════════════════════════════════════════════════════ */
.region-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .region-selector { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   PIPELINE STATUS PILL — indicador "hace X min" en vista Noticias
   ════════════════════════════════════════════════════════════════════════ */
.pipeline-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  background: rgb(var(--ink-rgb) / 0.04);
  color: var(--muted, var(--text-3));
  font-family: var(--font-ui), inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  white-space: nowrap;
}
.pipeline-status-pill:hover { transform: translateY(-1px); }
.pipeline-status-pill:active { transform: scale(0.97); }

.pipeline-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pipeline-status--checking {
  background: rgb(var(--warning-rgb) / 0.06);
  border-color: rgb(var(--warning-rgb) / 0.2);
  color: var(--warning);
}
.pipeline-status--checking .pipeline-status-dot {
  animation: edPulseDot 1.1s ease-in-out infinite;
}

.pipeline-status--healthy {
  background: rgb(var(--accent-rgb) / 0.1);
  border-color: rgb(var(--accent-rgb) / 0.3);
  color: var(--accent);
}
.pipeline-status--healthy .pipeline-status-dot {
  animation: edPulseDot 1.8s ease-in-out infinite;
}

.pipeline-status--slow {
  background: rgb(var(--warning-rgb) / 0.1);
  border-color: rgb(var(--warning-rgb) / 0.3);
  color: var(--warning);
}

.pipeline-status--stopped {
  background: rgb(var(--danger-rgb) / 0.1);
  border-color: rgb(var(--danger-rgb) / 0.3);
  color: var(--danger);
}
.pipeline-status--stopped .pipeline-status-dot {
  animation: edPulseDot 1.1s ease-in-out infinite;
}

.pipeline-status--no-data {
  background: rgba(140,140,140,0.06);
  border-color: var(--text-3);
  color: var(--muted, var(--text-3));
}

/* ════════════════════════════════════════════════════════════════════════
   MODAL de estado del pipeline (detalle al click)
   ════════════════════════════════════════════════════════════════════════ */
.pipeline-stat__big-wrap {
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg,
                rgb(var(--accent-rgb) / 0.06) 0%,
                rgb(var(--accent-rgb) / 0.02) 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  margin-bottom: 18px;
}
.pipeline-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, var(--text-3));
  margin-bottom: 6px;
  font-weight: 600;
}
.pipeline-stat__big {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--text, var(--text));
  line-height: 1.1;
  margin-bottom: 4px;
}
.pipeline-stat__sub {
  font-size: 12.5px;
  color: var(--muted, var(--text-3));
  line-height: 1.5;
}
.pipeline-stat__sub em {
  font-style: italic;
  color: var(--text-dim, var(--text-2));
}

.pipeline-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 480px) {
  .pipeline-stats-grid { grid-template-columns: 1fr; }
}
.pipeline-mini-stat {
  padding: 14px 12px;
  border-radius: 12px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  text-align: center;
}
.pipeline-mini-stat__num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--accent, var(--accent));
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
  line-height: 1;
}
.pipeline-mini-stat__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted, var(--text-3));
  font-weight: 600;
}

.pipeline-section {
  padding-top: 14px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
}
.pipeline-section__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, var(--text-3));
  margin-bottom: 10px;
  font-weight: 600;
}
.pipeline-source-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 4px;
  background: rgb(var(--ink-rgb) / 0.015);
}
.pipeline-source-row:hover { background: rgb(var(--ink-rgb) / 0.04); }
.pipeline-source-name {
  color: var(--text, var(--text));
  font-weight: 500;
}
.pipeline-source-time {
  font-size: 11px;
  color: var(--muted, var(--text-3));
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   AUTH — link "olvidé contraseña" + modal por encima del auth-screen
   El #auth-screen tiene z-index:1000 en app.css; el modal-overlay base
   tiene z-index:100, así que sin este override el modal queda enterrado.
   ════════════════════════════════════════════════════════════════════════ */
#forgot-password-modal {
  z-index: 2000;  /* por encima de #auth-screen (1000) */
}
.auth-forgot {
  margin-top: 14px;
  text-align: center;
}
.auth-forgot a {
  color: var(--muted, var(--text-3));
  font-size: 12.5px;
  text-decoration: none;
  border-bottom: 1px dashed rgb(var(--ink-rgb) / 0.15);
  padding-bottom: 1px;
  transition: color 0.18s, border-color 0.18s;
}
.auth-forgot a:hover {
  color: var(--accent, var(--accent));
  border-bottom-color: var(--accent, var(--accent));
}

/* ════════════════════════════════════════════════════════════════════════
   NEWS CARDS — upgrade editorial
   Titulares en Fraunces grande, badges destacados, hover lima profundo,
   gradiente sutil de fondo, sombra que respira al hover.
   ════════════════════════════════════════════════════════════════════════ */

/* Línea lima vertical en el borde izquierdo (decorativa, indica relevancia) */

/* Titulares en Fraunces — la gran diferencia visual */
.news-card-title,
.news-title,
.noticia-card .news-card-title {
  font-family: 'Fraunces', var(--font-body) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  color: var(--text, var(--text));
  margin-bottom: 8px;
}

/* Resumen / lede en Newsreader */
.news-card-resumen,
.news-card-body,
.news-summary {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim, var(--text-2));
}

/* Badges (score + fuente + zona) más editoriales */

/* Footer con acciones */
.news-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
}

/* Link "Ver fuente original" */
.news-card-source-link {
  color: var(--muted, var(--text-3));
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px dashed rgb(var(--ink-rgb) / 0.18);
  transition: color 0.18s, border-color 0.18s;
}
.news-card-source-link:hover {
  color: var(--accent, var(--accent));
  border-bottom-color: var(--accent, var(--accent));
}

/* Tags / etiquetas más vivas */
.news-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0 4px;
}
.news-card-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 10.5px;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  color: var(--muted, var(--text-3));
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.18s, color 0.18s;
}
.news-card-tag:hover {
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent, var(--accent));
}

/* Sección expandible (ángulos / verificar) */
.news-card-section {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgb(var(--ink-rgb) / 0.02);
  border-left: 2px solid rgb(var(--accent-rgb) / 0.3);
}
.news-card-section.warn {
  background: rgb(var(--warning-rgb) / 0.05);
  border-left-color: rgb(var(--warning-rgb) / 0.45);
}
.news-card-section-label {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, var(--text-3));
  margin-bottom: 6px;
}
.news-card-section.warn .news-card-section-label {
  color: var(--warning);
}
.news-card-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim, var(--text-2));
}
.news-card-list li {
  margin-bottom: 3px;
}

/* Tabs (Nuevas / Procesadas / Archivo) más editoriales */
.news-tab {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  transition: color 0.18s;
}
.news-tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 28px;
  height: 2px;
  background: var(--accent, var(--accent));
  border-radius: 2px;
  transform: translateX(-50%);
}

/* Categoría: urgente / reciente / destacada (los chips de news-cat-badge en index.html) */
.news-cat-badge {
  box-shadow: 0 1px 0 rgb(var(--ink-rgb) / 0.04) inset;
}

/* Meta de la noticia (hace X · ingestada hace Y) */
.news-card-time,
.news-card-meta {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 11px;
  color: var(--muted, var(--text-3));
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   MI DÍA — hero adaptativo por hora del día + cards editoriales
   El body recibe data-tod="dawn|day|sunset|night" desde JS y la paleta
   del hero cambia. La app se siente "viva" — sabe en qué momento estás.
   ════════════════════════════════════════════════════════════════════════ */

/* Paletas por momento del día. Valores neutros si no hay data-tod aún. */
body                  { --tod-grad-1: rgb(var(--accent-rgb) / 0.06); --tod-grad-2: rgb(var(--info-rgb) / 0.04); --tod-accent: var(--accent); }
body[data-tod="dawn"]   { --tod-grad-1: rgb(var(--warning-rgb) / 0.1);  --tod-grad-2: rgba(240,200,120,0.05); --tod-accent: var(--warning); }
body[data-tod="day"]    { --tod-grad-1: rgb(var(--accent-rgb) / 0.1);  --tod-grad-2: rgb(var(--info-rgb) / 0.04); --tod-accent: var(--accent); }
body[data-tod="sunset"] { --tod-grad-1: rgb(var(--warning-rgb) / 0.1);  --tod-grad-2: rgb(var(--info-rgb) / 0.05); --tod-accent: var(--warning); }
body[data-tod="night"]  { --tod-grad-1: rgb(var(--info-rgb) / 0.08); --tod-grad-2: rgb(var(--info-rgb) / 0.04); --tod-accent: var(--info); }

/* Hero de Mi día — compacto y con gradiente vivo según hora */

/* Titular del hero más comedido: clamp 36-44 (antes podía ir hasta 64-72) */

/* La frase debajo del nombre */

/* Stats compactos */

/* Reloj del hero más chico (era enorme y solitario) */

/* En pantallas chicas, el reloj se oculta y el hero queda más respirable */

/* ════════════════════════════════════════════════════════════════════════
   MI DÍA — "Lo que importa ahora": 3 chips accionables
   Reemplaza al hero gigante con info funcional al toque.
   ════════════════════════════════════════════════════════════════════════ */

/* Indicador de estado del pipeline (status pill color) */

@keyframes pulseHealthy {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.35); }
  50%      { box-shadow: 0 0 0 8px rgb(var(--accent-rgb) / 0); }
}

/* Acento del título cambia según hora — color sólido (sin gradient con
   background-clip:text porque ese recortaba los descenders de Fraunces italic). */
.midia-hero-title em,
.hero-title em,
#hero-title em {
  color: var(--tod-accent, var(--accent)) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  display: inline-block;
  padding-right: 0.08em;
  transition: color 0.6s ease;
  /* Sutil filtro de luminosidad para que se vea más "vivo" sin recortar */
  text-shadow: 0 0 18px color-mix(in srgb, var(--tod-accent) 35%, transparent);
}

/* Las ondas del reloj se tiñen también */

/* Pill "EN VIVO" — punto que pulsa con el accent del momento */

@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tod-accent) 60%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--tod-accent) 0%, transparent); }
}

/* Stats grandes con número en Fraunces */

/* Cards de Mi día con borde lima animado al hover */

/* Idea del día con glow del color del momento */

/* Big actions con micro-animación */

/* ════════════════════════════════════════════════════════════════════════
   KANBAN — cards menos planas, columnas con identidad
   ════════════════════════════════════════════════════════════════════════ */
.kanban-column {
  position: relative;
}

/* Color del header por estado del kanban (override editorial sutil) */

/* Cards de Kanban */
.kanban-card {
  background: linear-gradient(180deg,
                rgb(var(--ink-rgb) / 0.025) 0%,
                rgb(var(--ink-rgb) / 0.012) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.25s;
  cursor: grab;
  position: relative;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.3);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.5),
              0 0 0 1px rgb(var(--accent-rgb) / 0.1);
}

/* Título de card en Fraunces */
.kanban-card-title,
.kanban-card .card-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}

/* Footer de card con avatar + plataforma */

/* Badge de prioridad */

/* ════════════════════════════════════════════════════════════════════════
   EMPTY STATES editoriales — cuando no hay datos, mostrar algo lindo
   ════════════════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  position: relative;
}
.empty-state-illustration {
  margin: 0 auto 18px;
  width: 92px;
  height: 92px;
  opacity: 0.55;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}
.empty-state-illustration svg { width: 100%; height: 100%; }
.empty-state-illustration path,
.empty-state-illustration circle,
.empty-state-illustration line,
.empty-state-illustration rect {
  stroke: var(--accent, var(--accent));
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-state-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.empty-state-msg,
.empty-state > div:not(.empty-state-title):not(.empty-state-icon) {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted, var(--text-3));
  max-width: 380px;
  margin: 0 auto;
}

/* Reemplazar el viejo empty-state-icon (era emoji) con la nueva ilustración */
.empty-state-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.45;
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD — sello visual ejecutivo (distinto de Mi día)
   Mi día = personal/cálido. Dashboard = ejecutivo/global.
   ════════════════════════════════════════════════════════════════════════ */
#view-dashboard {
  --dash-accent: var(--info);  /* azul ejecutivo, diferencia de la lima cálida */
}

/* Hero del dashboard: gradiente azul-violeta + más compacto */
#view-dashboard .dashboard-hero,
#view-dashboard .hero,
#view-dashboard .hero-mono {
  background: linear-gradient(135deg,
                rgb(var(--info-rgb) / 0.06) 0%,
                rgb(var(--info-rgb) / 0.03) 50%,
                transparent 100%);
}
#view-dashboard .hero-mono {
  padding: 26px 30px !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
#view-dashboard .hero-mono-content { min-width: 0; }
#view-dashboard .hero-mono-title {
  font-size: clamp(28px, 4.2vw, 42px) !important;
  line-height: 1.08 !important;
  margin: 6px 0 8px !important;
}
@media (max-width: 1100px) {
  #view-dashboard .hero-mono { grid-template-columns: 1fr; }
}

/* Cards de métricas del dashboard: números en Fraunces, grandes */

/* Línea de acento azul al hover en cards del dashboard (en vez de lima) */
#view-dashboard .card:hover,
#view-dashboard .kanban-card:hover {
  border-color: rgb(var(--info-rgb) / 0.3);
  box-shadow: 0 1px 0 rgb(var(--info-rgb) / 0.18) inset,
              0 16px 40px -12px rgba(0,0,0,0.55),
              0 0 0 1px rgb(var(--info-rgb) / 0.22);
}

/* Section labels del dashboard (eyebrow en azul) */

/* ════════════════════════════════════════════════════════════════════════
   FAB "Reportar desde calle" — modo salida a calle (mobile-first)
   Botón flotante prominente, micrófono pulsante. Es la acción ancla
   para pasantes en territorio.
   ════════════════════════════════════════════════════════════════════════ */
.fab-report {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  border: none;
  color: var(--on-accent);
  font-size: 28px;
  z-index: 90;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgb(var(--accent-rgb) / 0.5),
              0 4px 10px rgba(0,0,0,0.3),
              inset 0 1px 0 rgb(var(--ink-rgb) / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: fabBreathe 4.5s ease-in-out infinite;
}
@keyframes fabBreathe {
  0%, 100% {
    box-shadow: 0 10px 30px -8px rgb(var(--accent-rgb) / 0.4),
                0 4px 10px rgba(0,0,0,0.3),
                inset 0 1px 0 rgb(var(--ink-rgb) / 0.3),
                0 0 0 0 rgb(var(--accent-rgb) / 0.25);
  }
  50% {
    box-shadow: 0 10px 30px -8px rgb(var(--accent-rgb) / 0.4),
                0 4px 10px rgba(0,0,0,0.3),
                inset 0 1px 0 rgb(var(--ink-rgb) / 0.3),
                0 0 0 10px rgb(var(--accent-rgb) / 0);
  }
}
.fab-report:hover  { transform: scale(1.08); }
.fab-report:active { transform: scale(0.94); }

/* En desktop, el FAB es más discreto (la acción "Reportar desde calle"
   también está en el hero de Mi día, no hace falta gritarla) */
@media (min-width: 980px) {
  .fab-report {
    width: 56px;
    height: 56px;
    animation: none;  /* el "breathe" pulsante es para mobile */
  }
}

/* En mobile, el bottom navigation tapa al FAB. Subimos un poco */
@media (max-width: 760px) {
  .fab-report {
    bottom: 84px;  /* deja espacio a la nav bar móvil */
    right: 18px;
    width: 68px;
    height: 68px;
  }
}

/* Tabs del modal de reporte: pills más visibles */
.report-type-tab,
[data-rtype] {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 99px;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
[data-rtype].active {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.18), rgb(var(--accent-rgb) / 0.08));
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  color: var(--accent, var(--accent));
}

/* Botón de grabación visible y claro */
.report-record-btn,
button[onclick*="startRecording"],
button[onclick*="toggleRecording"] {
  background: linear-gradient(135deg, var(--danger) 0%, #c24545 100%) !important;
  color: white !important;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 99px;
  border: none;
  box-shadow: 0 6px 18px -6px rgb(var(--danger-rgb) / 0.6);
  position: relative;
}

@keyframes recPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   AUTOMATIZACIONES — cards más vivas con health visual
   ════════════════════════════════════════════════════════════════════════ */
.workflow-card {
  position: relative;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025) 0%, rgb(var(--ink-rgb) / 0.008) 100%) !important;
  border: 1px solid rgb(var(--ink-rgb) / 0.08) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.3s;
  overflow: hidden;
}
.workflow-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--workflow-color, rgb(var(--accent-rgb) / 0.5)) 0%, transparent 100%);
}
.workflow-card.activo {
  --workflow-color: rgb(var(--accent-rgb) / 0.7);
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.06) 0%, rgb(var(--ink-rgb) / 0.015) 100%) !important;
  border-color: rgb(var(--accent-rgb) / 0.25) !important;
}
.workflow-card.activo:hover {
  border-color: rgb(var(--accent-rgb) / 0.5) !important;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55),
              0 0 30px -10px rgb(var(--accent-rgb) / 0.3),
              0 0 0 1px rgb(var(--accent-rgb) / 0.2);
  transform: translateY(-2px);
}
.workflow-card.inactivo {
  --workflow-color: rgba(140,140,140,0.4);
  opacity: 0.88;
}
.workflow-card.proximo {
  --workflow-color: rgb(var(--info-rgb) / 0.5);
}

.workflow-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.workflow-emoji {
  font-size: 28px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
  flex-shrink: 0;
  line-height: 1;
}
.workflow-info { flex: 1; min-width: 0; }
.workflow-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text, var(--text));
  margin-bottom: 3px;
}
.workflow-cron {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  font-family: var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.02em;
}
.workflow-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 99px;
  text-transform: uppercase;
}
.workflow-status.activo {
  background: rgb(var(--accent-rgb) / 0.18);
  color: var(--accent);
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
}
.workflow-status.activo::before {
  content: "● ";
  animation: wfPulseDot 1.5s ease-in-out infinite;
}
@keyframes wfPulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.workflow-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim, var(--text-2));
  margin-bottom: 14px;
}

/* Stats con visualización mejorada */
.workflow-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  background: rgba(0,0,0,0.18);
  border-radius: 10px;
  border: 1px solid rgb(var(--ink-rgb) / 0.04);
}
.workflow-stats > div { text-align: center; }
.workflow-stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text, var(--text));
  line-height: 1;
}
.workflow-stat-num.green { color: var(--success); }
.workflow-stat-num.red   { color: var(--danger); }
.workflow-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted, var(--text-3));
  margin-top: 4px;
}

.workflow-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Cards "Próximamente" con cinta diagonal sutil */
.workflow-card.proximo {
  background: linear-gradient(180deg,
                rgb(var(--info-rgb) / 0.04) 0%,
                rgb(var(--ink-rgb) / 0.012) 100%) !important;
  border-style: dashed !important;
  border-color: rgb(var(--info-rgb) / 0.22) !important;
  opacity: 0.92;
}
.workflow-card.proximo:hover {
  opacity: 1;
  border-color: rgb(var(--info-rgb) / 0.42) !important;
  border-style: solid !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Workflow cards — estado "Próximamente"
   ════════════════════════════════════════════════════════════════════════ */
.workflow-card.proximo {
  opacity: 0.85;
  border-style: dashed !important;
  border-color: rgb(var(--info-rgb) / 0.25) !important;
  background: linear-gradient(135deg,
                rgb(var(--info-rgb) / 0.04) 0%,
                rgb(var(--info-rgb) / 0.01) 100%);
}
.workflow-status.proximo {
  background: rgb(var(--info-rgb) / 0.1);
  color: var(--info);
  border: 1px solid rgb(var(--info-rgb) / 0.28);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 99px;
  font-weight: 600;
}
.workflow-soon-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgb(var(--info-rgb) / 0.05);
  border: 1px solid rgb(var(--info-rgb) / 0.18);
  font-size: 12px;
  color: var(--muted, var(--text-3));
  line-height: 1.5;
}
.workflow-soon-banner svg {
  flex-shrink: 0;
  color: var(--info);
  margin-top: 1px;
}

/* ════════════════════════════════════════════════════════════════════════
   CTX-TOOLTIP estilo "snack" — esquina inferior, no tapa contenido
   Auto-dismiss 7s. Reemplaza el tooltip-target del CSS viejo.
   ════════════════════════════════════════════════════════════════════════ */
.ctx-tooltip.ctx-tooltip--snack {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
  width: 320px !important;
  max-width: calc(100vw - 32px);
  background: rgb(var(--bg-rgb) / 0.98) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.3) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.55),
              0 0 0 1px rgb(var(--accent-rgb) / 0.1);
  z-index: 1500 !important;
  font-family: var(--font-ui, 'Inter', sans-serif);
  transform: translateY(20px) !important;
  opacity: 0 !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s !important;
  pointer-events: auto;
}
.ctx-tooltip.ctx-tooltip--snack.visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
.ctx-tooltip--snack .ctx-tooltip-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding-right: 24px;
}
.ctx-tooltip--snack .ctx-tooltip-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.ctx-tooltip--snack .ctx-tooltip-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, var(--text));
  letter-spacing: -0.005em;
}
.ctx-tooltip--snack .ctx-tooltip-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim, var(--text-2));
}
.ctx-tooltip--snack .ctx-tooltip-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border: none;
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--muted, var(--text-3));
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: background 0.18s, color 0.18s;
}
.ctx-tooltip--snack .ctx-tooltip-close:hover {
  background: rgb(var(--danger-rgb) / 0.18);
  color: var(--danger);
}
/* Barra de progreso del auto-dismiss */
.ctx-tooltip--snack::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, var(--accent)) 0%, rgb(var(--accent-rgb) / 0.2) 100%);
  border-radius: 99px;
  transform-origin: left center;
  animation: ctxSnackProgress 7s linear forwards;
}
@keyframes ctxSnackProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Si el FAB está visible (mobile), subir el snack para que no se tapen */
@media (max-width: 760px) {
  .ctx-tooltip.ctx-tooltip--snack {
    bottom: 100px !important;
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PLATFORM PICKER — modal que pide plataforma antes de marcar publicado
   ════════════════════════════════════════════════════════════════════════ */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 480px) {
  .platform-grid { grid-template-columns: 1fr; }
}
.platform-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 12px;
  color: var(--text, var(--text));
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
}
.platform-pick:hover {
  background: rgb(var(--accent-rgb) / 0.08);
  border-color: rgb(var(--accent-rgb) / 0.35);
  transform: translateY(-1px);
}
.platform-pick:active { transform: scale(0.97); }
.platform-pick span {
  font-size: 22px;
  width: 32px;
  display: inline-flex;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════
   AVATARES — soporte foto + estilo refinado
   ════════════════════════════════════════════════════════════════════════ */
.mini-avatar,
.cdr-msg__avatar {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--font-ui, 'Inter', sans-serif);
  color: var(--on-accent);
  font-size: 11px;
  border: 2px solid rgb(var(--ink-rgb) / 0.06);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  overflow: hidden;
  flex-shrink: 0;
}
.mini-avatar--photo,
.cdr-msg__avatar--photo {
  padding: 0;
  background: rgb(var(--ink-rgb) / 0.04);
}
.mini-avatar--photo img,
.cdr-msg__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════════════════════════════════════
   NOTICIAS — barra de filtros consolidada (tiempo/destacadas + zona)
   Una sola fila con un divisor sutil entre los dos grupos.
   ════════════════════════════════════════════════════════════════════════ */
.noticias-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 14px 0 10px;
}
.noticias-filter-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.noticias-filter-label {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted, var(--text-3));
  margin-right: 4px;
}
.noticias-filter-divider {
  width: 1px;
  height: 18px;
  background: rgb(var(--ink-rgb) / 0.12);
  align-self: center;
}
@media (max-width: 720px) {
  .noticias-filter-divider { display: none; }
  .noticias-filter-bar { gap: 10px; }
  .noticias-filter-group { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   FILTROS DE ZONA — pills limpios sin emojis (legacy + nuevos)
   ════════════════════════════════════════════════════════════════════════ */

.zona-filtro {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, var(--text-3));
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;
}
.zona-filtro:hover {
  color: var(--text, var(--text));
  background: rgb(var(--ink-rgb) / 0.06);
}
.zona-filtro:active { transform: scale(0.96); }
.zona-filtro.active {
  background: rgb(var(--accent-rgb) / 0.16);
  color: var(--accent, var(--accent));
  border-color: rgb(var(--accent-rgb) / 0.42);
  font-weight: 600;
}

/* Sub-filtros (Mostrar: Todas / Últimas 24h / Destacadas) — mismo pill que zonas */
.sub-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, var(--text-3));
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;
}
.sub-filtro:hover {
  color: var(--text, var(--text));
  background: rgb(var(--ink-rgb) / 0.06);
}
.sub-filtro:active { transform: scale(0.96); }
.sub-filtro.active {
  background: rgb(var(--info-rgb) / 0.14);
  color: var(--info);
  border-color: rgb(var(--info-rgb) / 0.4);
  font-weight: 600;
}
.sub-filtro .sub-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--muted, var(--text-3));
}
.sub-filtro.active .sub-count {
  background: rgb(var(--info-rgb) / 0.2);
  color: var(--info);
}

/* ════════════════════════════════════════════════════════════════════════
   PRESENCE INDICATOR — mejor diseño del topbar (era "solo tú")
   ════════════════════════════════════════════════════════════════════════ */
.presence-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 99px;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  font-family: var(--font-ui, 'Inter', sans-serif);
}
.presence-indicator:hover {
  background: rgb(var(--accent-rgb) / 0.06);
  border-color: rgb(var(--accent-rgb) / 0.28);
}
.presence-avatars {
  display: flex;
  align-items: center;
}
.presence-avatars > * {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  margin-left: -8px;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.presence-avatars > *:first-child { margin-left: 0; }
.presence-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text, var(--text));
  letter-spacing: 0.01em;
  position: relative;
}
.presence-count::before {
  content: "● ";
  color: var(--success);
  font-size: 9px;
  margin-right: 1px;
}

/* ════════════════════════════════════════════════════════════════════════
   PULSO EDITORIAL — 4 mini-gráficos en Mi día
   ════════════════════════════════════════════════════════════════════════ */

/* Colores temáticos por card */

/* ════════════════════════════════════════════════════════════════════════
   LOOK "UNICORNIO" — capa premium global
   Gradientes radiales animados, glows coloreados, profundidad sutil
   ════════════════════════════════════════════════════════════════════════ */

/* Fondo de la app — completamente neutro.
   v4 (auditoría 2026-05-27): incluso con radiales al 110%Y, el backdrop-filter
   del topbar absorbía algo del lima y producía tinte verde-oscuro en la cabecera.
   Eliminados los radiales lima/lavanda/indigo para garantizar fondo neutro. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: transparent;
}

/* Mi día hero más rico — superpone un glow profundo */

/* Cards Mi día — sombra editorial más sobria al hover (menos glow chillón) */

/* Botones primarios — gradiente sutil + glow */
.btn.btn-primary {
  background: linear-gradient(135deg, var(--accent, var(--accent)) 0%, color-mix(in srgb, var(--accent, var(--accent)) 85%, #000) 100%);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent, var(--accent)) 50%, transparent),
              inset 0 1px 0 rgb(var(--ink-rgb) / 0.18);
  transition: transform 0.18s, box-shadow 0.2s, background 0.2s;
}
.btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--accent, var(--accent)) 65%, transparent),
              inset 0 1px 0 rgb(var(--ink-rgb) / 0.22);
}
.btn.btn-primary:active { transform: scale(0.97); }

/* Eyebrows con gradient text (pequeño efecto premium) */

/* Pills genéricos con efecto vidrio */

/* Glow sutil debajo del logo del sidebar */
.sidebar-brand {
  position: relative;
}
.sidebar-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 70%;
  height: 30px;
  background: radial-gradient(ellipse, rgb(var(--accent-rgb) / 0.18) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════════════
   CHAT FAB + DRAWER lateral — reemplaza a la vista standalone de chat
   ════════════════════════════════════════════════════════════════════════ */
.fab-chat {
  position: fixed;
  right: 20px;
  bottom: 24px;  /* desktop: posición original */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgb(var(--bg-rgb) / 0.96);
  border: 1px solid rgb(var(--info-rgb) / 0.35);
  color: var(--info);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5),
              0 0 0 1px rgb(var(--info-rgb) / 0.12);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
  z-index: 88;
}

/* Mobile: subir el FAB del chat para no chocar con la nueva bottom nav */
@media (max-width: 760px) {
  .fab-chat {
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));  /* arriba de la mob-nav */
    width: 48px;
    height: 48px;
  }
}
.fab-chat:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgb(var(--info-rgb) / 0.18);
  border-color: rgb(var(--info-rgb) / 0.6);
}
.fab-chat:active { transform: scale(0.94); }
.fab-chat__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
  border: 2px solid var(--surface);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .fab-chat {
    bottom: 168px; /* arriba del FAB de reportar y de la bottom-nav móvil */
    right: 18px;
    width: 50px;
    height: 50px;
  }
}

.chat-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  z-index: 1490;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.chat-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 100vw;
  /* v3 (2026-05-27): mismo lenguaje Fintrixity que Sara — radiales decorativos
     en esquinas + dark gradient base. */
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgb(var(--info-rgb) / 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgb(var(--info-rgb) / 0.04) 0%, transparent 65%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
  border-left: 1px solid rgb(var(--ink-rgb) / 0.08);
  z-index: 1500;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 70px -10px rgba(0,0,0,0.65);
}
.chat-drawer.open { transform: translateX(0); }

/* Header chat — hero card embebida igual que Sara */
.chat-drawer__head {
  padding: 18px 20px 16px;
  margin: 14px 14px 12px;
  border-radius: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  /* Hero card: radial indigo arriba (NO lima — el chat usa indigo como color
     temático, para diferenciarse de Sara que es lima) */
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgb(var(--info-rgb) / 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 100% 100%, rgb(var(--info-rgb) / 0.08) 0%, transparent 60%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface) 100%);
  border: 1px solid rgb(var(--info-rgb) / 0.22);
  box-shadow:
    0 12px 32px -10px rgba(0,0,0,0.5),
    0 0 0 1px rgb(var(--ink-rgb) / 0.03) inset;
}
.chat-drawer__head::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--info), rgb(var(--info-rgb) / 0.2), transparent);
}
.chat-drawer__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text, var(--text));
  letter-spacing: -0.01em;
}
.chat-drawer__sub {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  font-family: var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.02em;
}
.chat-drawer__close {
  background: rgb(var(--ink-rgb) / 0.05);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, var(--text-3));
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.chat-drawer__close:hover {
  background: rgb(var(--danger-rgb) / 0.18);
  color: var(--danger);
}
.chat-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cdr-msg {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  max-width: 78%;            /* más estrecho para que se note el lado */
  animation: cdrMsgIn 0.28s ease-out;
  align-self: flex-start;     /* default: izquierda */
}
.cdr-msg--mine {
  flex-direction: row-reverse;
  align-self: flex-end;       /* fuerza ir a la derecha */
  margin-left: auto;
}
@keyframes cdrMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cdr-msg__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
/* Otros usuarios: bubble dark a la izquierda */
.cdr-msg__bubble {
  background:
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.06), rgb(var(--ink-rgb) / 0.025));
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 16px 16px 16px 4px;
  padding: 9px 13px 10px;
  max-width: calc(100% - 42px);
  min-width: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* Mis mensajes: bubble INDIGO sólido a la derecha — máxima diferencia */
.cdr-msg--mine .cdr-msg__bubble {
  background:
    linear-gradient(135deg, rgb(var(--info-rgb) / 0.28), rgb(var(--info-rgb) / 0.16));
  border: 1px solid rgb(var(--info-rgb) / 0.45);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 4px 12px -2px rgb(var(--info-rgb) / 0.3);
}
.cdr-msg--mine .cdr-msg__head strong {
  color: #c9d0ff;
}
.cdr-msg__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cdr-msg__head strong {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--text, var(--text));
}
.cdr-msg__time {
  font-size: 10.5px;
  color: var(--muted, var(--text-3));
  font-variant-numeric: tabular-nums;
}
.cdr-msg__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-dim, var(--text-2));
  word-wrap: break-word;
}

.chat-drawer__foot {
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
  background: rgba(0,0,0,0.30);
}
.chat-drawer__input {
  flex: 1;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.05), rgb(var(--ink-rgb) / 0.025));
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 12px;
  padding: 10px 13px;
  color: var(--text, var(--text));
  font-family: var(--font-body);
  font-size: 13.5px;
  resize: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.chat-drawer__input:focus {
  outline: none;
  border-color: rgb(var(--info-rgb) / 0.55);
  box-shadow: 0 0 0 3px rgb(var(--info-rgb) / 0.1);
}
/* Override del btn-primary cuando vive DENTRO del chat-drawer: usar indigo
   (el chat es indigo-themed, no lima como Sara). */
.chat-drawer__foot .btn-primary {
  background: linear-gradient(180deg, var(--info), #6E7AE5) !important;
  color: var(--on-accent) !important;
  box-shadow: 0 2px 8px rgb(var(--info-rgb) / 0.3) !important;
}
.chat-drawer__foot .btn-primary:hover {
  box-shadow: 0 6px 16px rgb(var(--info-rgb) / 0.45) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PLANIFICACIÓN — vista unificada Ideas + Calendario
   ════════════════════════════════════════════════════════════════════════ */
.planif-header {
  margin-bottom: 18px;
}
.planif-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text, var(--text));
  margin: 0 0 4px;
}
.planif-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted, var(--text-3));
  margin: 0;
}

.planif-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.08);
  margin-bottom: 22px;
}
.planif-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--muted, var(--text-3));
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.18s;
}
.planif-tab:hover { color: var(--text, var(--text)); }
.planif-tab--active {
  color: var(--accent, var(--accent));
}
.planif-tab--active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--accent, var(--accent));
  border-radius: 2px 2px 0 0;
}
.planif-tab__count {
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--muted, var(--text-3));
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.planif-tab--active .planif-tab__count {
  background: rgb(var(--accent-rgb) / 0.18);
  color: var(--accent, var(--accent));
}

/* Ideas grid */
.planif-ideas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.planif-idea-card {
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.planif-idea-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--accent-rgb) / 0.3);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.5);
}
.planif-idea-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.planif-idea-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
}
.planif-idea-card__author {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, var(--text));
}
.planif-idea-card__time {
  font-size: 10.5px;
  color: var(--muted, var(--text-3));
}
.planif-idea-card__votes {
  margin-left: auto;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent, var(--accent));
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.planif-idea-card__votes span {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 9px;
  font-weight: 500;
  color: var(--muted, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-top: 2px;
}
.planif-idea-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text, var(--text));
  margin: 0 0 8px;
  line-height: 1.3;
}
.planif-idea-card__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim, var(--text-2));
  margin: 0 0 10px;
}
.planif-idea-card__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.planif-idea-card__tags span {
  font-size: 10.5px;
  padding: 2px 8px;
  background: rgb(var(--ink-rgb) / 0.05);
  border-radius: 99px;
  color: var(--muted, var(--text-3));
}

/* Calendario lista */

/* ════════════════════════════════════════════════════════════════════════
   CALENDARIO ANUAL — grid 12 meses + sidebar de próximos
   ════════════════════════════════════════════════════════════════════════ */
.planif-cal-anio {
  width: 100%;
}
.planif-cal-anio__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 4px 18px;
  flex-wrap: wrap;
}
.planif-cal-anio__years {
  display: inline-flex;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.planif-cal-anio__yr {
  background: transparent;
  border: 0;
  color: var(--muted, var(--text-3));
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.18s;
}
.planif-cal-anio__yr:hover { color: var(--text); }
.planif-cal-anio__yr.is-active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px rgb(var(--accent-rgb) / 0.3);
}
.planif-cal-anio__legend {
  display: inline-flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-ui, 'Inter', sans-serif);
  align-items: center;
  flex-wrap: wrap;
}
.planif-cal-anio__legend .lg-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.lg-dot--feriado { background: var(--accent); box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.5); }
.lg-dot--fiesta  { background: var(--info); box-shadow: 0 0 6px rgb(var(--info-rgb) / 0.5); }
.lg-dot--hoy     { background: var(--info); box-shadow: 0 0 6px rgb(var(--info-rgb) / 0.5); }

.planif-cal-anio__layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .planif-cal-anio__layout { grid-template-columns: 1fr; }
}

.planif-cal-anio__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) { .planif-cal-anio__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .planif-cal-anio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .planif-cal-anio__grid { grid-template-columns: 1fr; } }

.planif-cal-mes {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025) 0%, rgb(var(--ink-rgb) / 0.01) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 12px;
  padding: 12px;
  transition: border-color 0.2s, transform 0.2s;
}
.planif-cal-mes:hover {
  border-color: rgb(var(--accent-rgb) / 0.2);
  transform: translateY(-1px);
}
.planif-cal-mes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.05);
  margin-bottom: 8px;
}
.planif-cal-mes__head strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.planif-cal-mes__count {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.1);
  border-radius: 999px;
  padding: 2px 7px;
  border: 1px solid rgb(var(--accent-rgb) / 0.2);
}
.planif-cal-mes__dias,
.planif-cal-mes__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.planif-cal-mes__dow {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  font-family: var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.1em;
  padding: 3px 0;
}
.planif-cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 6px;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 11px;
  color: var(--text-dim, var(--text-2));
  cursor: default;
  transition: background 0.15s;
}
.planif-cal-cell--empty { background: transparent; cursor: default; }
.planif-cal-cell--pasado { opacity: 0.32; }
.planif-cal-cell--evt {
  background: rgb(var(--ink-rgb) / 0.04);
  cursor: help;
}
.planif-cal-cell--feriado {
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent);
  font-weight: 700;
}
.planif-cal-cell--fiesta {
  background: rgb(var(--info-rgb) / 0.1);
  color: #d6b8ff;
  font-weight: 600;
}
.planif-cal-cell--hoy {
  background: var(--info) !important;
  color: var(--on-accent) !important;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgb(var(--info-rgb) / 0.6), 0 0 12px rgb(var(--info-rgb) / 0.5);
}
.planif-cal-cell:hover:not(.planif-cal-cell--empty) {
  background: rgb(var(--ink-rgb) / 0.08);
}
.planif-cal-cell__dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.planif-cal-cell--hoy .planif-cal-cell__dot { background: var(--bg); }

/* Sidebar próximos */
.planif-cal-anio__side {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.03) 0%, rgb(var(--ink-rgb) / 0.01) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 12px;
  padding: 14px;
  position: sticky;
  top: 80px;
}
.planif-cal-anio__side h4 {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.planif-cal-prox-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px dashed rgb(var(--ink-rgb) / 0.05);
}
.planif-cal-prox-item:last-child { border-bottom: none; }
.planif-cal-prox-date {
  width: 42px;
  text-align: center;
  flex-shrink: 0;
  background: rgb(var(--ink-rgb) / 0.04);
  border-radius: 8px;
  padding: 4px 0;
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
}
.planif-cal-prox-date strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  color: var(--text);
  line-height: 1;
}
.planif-cal-prox-date span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.planif-cal-prox-item.is-urgent .planif-cal-prox-date {
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.3);
}
.planif-cal-prox-item.is-urgent .planif-cal-prox-date strong { color: var(--accent); }
.planif-cal-prox-info { flex: 1; min-width: 0; }
.planif-cal-prox-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planif-cal-prox-meta {
  font-size: 10.5px;
  color: var(--muted);
  font-family: var(--font-ui, 'Inter', sans-serif);
}

/* ════════════════════════════════════════════════════════════════════════
   SIDEBAR — iconos SVG consistentes + headers más sutiles
   Override de app.css para que los SVG entren bien (antes eran emojis).
   ════════════════════════════════════════════════════════════════════════ */
.nav-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0; /* anula el tamaño de fuente del emoji legacy */
}
.nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  display: block;
}
.nav-item {
  color: var(--muted, var(--text-3)) !important;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 13px !important;
  padding: 9px 10px !important;
  letter-spacing: 0.005em;
  transition: background 0.18s, color 0.18s !important;
}
.nav-item:hover {
  color: var(--text, var(--text)) !important;
  background: rgb(var(--ink-rgb) / 0.04) !important;
}
.nav-item.active {
  color: var(--accent, var(--accent)) !important;
  background: rgb(var(--accent-rgb) / 0.1) !important;
}
.nav-item.active .nav-icon svg { stroke: var(--accent, var(--accent)); }

/* Headers de sección más sutiles y editoriales (no gritar mayúsculas anchas) */
.nav-label {
  font-family: var(--font-ui, 'Inter', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--muted, var(--text-3)) !important;
  padding: 0 12px !important;
  margin: 20px 0 8px !important;
  opacity: 0.7;
  position: relative;
}
.nav-label:first-child { margin-top: 6px !important; }

/* Badges en sidebar más sutiles */
.nav-badge {
  margin-left: auto !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 99px !important;
  background: rgb(var(--accent-rgb) / 0.18) !important;
  color: var(--accent, var(--accent)) !important;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: center;
}
.nav-badge.muted {
  background: rgb(var(--ink-rgb) / 0.06) !important;
  color: var(--muted, var(--text-3)) !important;
}
.nav-item.active .nav-badge {
  background: var(--accent, var(--accent)) !important;
  color: var(--on-accent) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   LANDING PÚBLICA — pantalla de marketing pre-login
   ════════════════════════════════════════════════════════════════════════ */
#landing-screen {
  position: fixed;
  inset: 0;
  z-index: 800;  /* debajo de auth-screen (1000) por si conviven brevemente */
  background: var(--surface);
  color: var(--text, var(--text));
  font-family: 'Inter', sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
}
.landing-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 0%, rgb(var(--accent-rgb) / 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 30%, rgb(var(--info-rgb) / 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgb(var(--info-rgb) / 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
  z-index: -1;
}

/* TOPBAR */
.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 56px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.landing-topbar__brand { display: flex; align-items: center; gap: 12px; }
.landing-topbar__logo { width: 38px; height: 38px; }
.landing-topbar__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.landing-topbar__name em {
  font-style: italic;
  color: var(--accent, var(--accent));
}
.landing-topbar__sub {
  font-size: 10.5px;
  color: var(--muted, var(--text-3));
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.landing-topbar__nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.landing-topbar__nav a {
  color: var(--muted, var(--text-3));
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.18s;
}
.landing-topbar__nav a:hover { color: var(--text, var(--text)); }
.landing-mobile-cta {
  display: none;
  background: var(--accent, var(--accent));
  color: var(--on-accent);
  border: none;
  padding: 8px 14px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

/* BOTONES landing */
.landing-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 99px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: transform 0.15s, background 0.18s, border-color 0.18s, box-shadow 0.2s;
  border: 1px solid transparent;
  text-decoration: none;
}
.landing-btn:active { transform: scale(0.96); }
.landing-btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  color: var(--on-accent);
  box-shadow: 0 10px 28px -10px rgb(var(--accent-rgb) / 0.55);
}
.landing-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -8px rgb(var(--accent-rgb) / 0.65);
}
.landing-btn--ghost {
  background: transparent;
  color: var(--text, var(--text));
  border-color: rgb(var(--ink-rgb) / 0.2);
}
.landing-btn--ghost:hover {
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: rgb(var(--accent-rgb) / 0.06);
}
.landing-btn--xl {
  padding: 14px 26px;
  font-size: 15px;
}
.landing-btn--block { width: 100%; justify-content: center; }
.landing-btn__arrow { font-size: 16px; transition: transform 0.2s; }
.landing-btn:hover .landing-btn__arrow { transform: translateX(3px); }

/* HERO */
.landing-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px 56px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
.landing-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgb(var(--accent-rgb) / 0.16);
  color: var(--accent, var(--accent));
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  margin-right: 10px;
}
.landing-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted, var(--text-3));
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.landing-hero__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  color: var(--text, var(--text));
}
.landing-hero__title em {
  font-style: italic;
  color: var(--accent, var(--accent));
  display: inline-block;
}
.landing-hero__sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-dim, var(--text-2));
  max-width: 520px;
  margin: 0 0 32px;
}
.landing-hero__ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.landing-hero__trust {
  font-size: 12px;
  color: var(--muted, var(--text-3));
  letter-spacing: 0.03em;
}

/* MOCKUP del producto en el hero */
.landing-hero__mockup {
  position: relative;
  perspective: 1200px;
}
.lp-mockup {
  background: var(--surface);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgb(var(--accent-rgb) / 0.12);
  transform: rotateY(-4deg) rotateX(2deg);
  transition: transform 0.4s;
}
.lp-mockup:hover { transform: rotateY(-2deg) rotateX(1deg); }
.lp-mockup__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
}
.lp-mockup__chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--ink-rgb) / 0.15);
}
.lp-mockup__chrome span:nth-child(1) { background: #ff5f57; }
.lp-mockup__chrome span:nth-child(2) { background: #ffbd2e; }
.lp-mockup__chrome span:nth-child(3) { background: #28ca42; }
.lp-mockup__url {
  margin-left: 14px;
  font-size: 11px;
  color: var(--muted, var(--text-3));
  font-family: monospace;
}
.lp-mockup__body { padding: 28px 30px; }
.lp-mockup__hero {
  padding-bottom: 18px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
  margin-bottom: 14px;
}
.lp-mockup__hero-eyebrow {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted, var(--text-3));
  margin-bottom: 8px;
  font-weight: 700;
}
.lp-mockup__hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  color: var(--text, var(--text));
}
.lp-mockup__hero-title em {
  font-style: italic;
  color: var(--accent, var(--accent));
}
.lp-mockup__stats {
  display: flex;
  gap: 22px;
}
.lp-mockup__stats > div {
  display: flex;
  flex-direction: column;
}
.lp-mockup__stats strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent, var(--accent));
  font-variant-numeric: tabular-nums;
}
.lp-mockup__stats span {
  font-size: 10px;
  color: var(--muted, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-top: 2px;
}
.lp-mockup__chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-mockup__chip {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  background: rgb(var(--ink-rgb) / 0.04);
  border-left: 2px solid;
  font-family: var(--font-body);
}

.lp-mockup__chip--lime   { border-left-color: var(--accent, var(--accent)); color: var(--accent, var(--accent)); }

/* SECCIÓN headers */
.landing-section__head {
  text-align: center;
  margin-bottom: 50px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.landing-section__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--accent, var(--accent));
  margin-bottom: 10px;
}
.landing-section__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--text, var(--text));
}

/* FEATURES */
.landing-features {
  padding: 80px 56px;
  max-width: 1280px;
  margin: 0 auto;
}
.landing-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.lp-feature {
  padding: 32px 28px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 18px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.lp-feature:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--accent-rgb) / 0.3);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5),
              0 0 0 1px rgb(var(--accent-rgb) / 0.1);
}
.lp-feature__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.lp-feature__icon svg { width: 28px; height: 28px; }
.lp-feature__icon--lime {
  background: rgb(var(--accent-rgb) / 0.15);
  color: var(--accent, var(--accent));
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
}
.lp-feature__icon--violet {
  background: rgb(var(--info-rgb) / 0.15);
  color: var(--info);
  border: 1px solid rgb(var(--info-rgb) / 0.3);
}
.lp-feature__icon--blue {
  background: rgb(var(--info-rgb) / 0.15);
  color: var(--info);
  border: 1px solid rgb(var(--info-rgb) / 0.3);
}
.lp-feature__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--text, var(--text));
}
.lp-feature__desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-dim, var(--text-2));
  margin: 0 0 16px;
}
.lp-feature__desc strong {
  color: var(--text, var(--text));
  font-weight: 600;
}
.lp-feature__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
  padding-top: 16px;
}
.lp-feature__bullets li {
  font-size: 12.5px;
  color: var(--muted, var(--text-3));
  padding: 6px 0 6px 20px;
  position: relative;
}
.lp-feature__bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent, var(--accent));
  font-weight: 700;
}

/* HOW TO (4 pasos) */
.landing-howto {
  padding: 70px 56px;
  background: rgba(0,0,0,0.18);
  border-top: 1px solid rgb(var(--ink-rgb) / 0.04);
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.04);
}
.landing-howto__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0px;
}
.lp-step {
  position: relative;
  padding: 24px;
}
.lp-step__num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent, var(--accent));
  color: var(--on-accent);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.lp-step h4,
.lp-step h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--text, var(--text));
}
.lp-step p {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted, var(--text-3));
  margin: 0;
}

/* PRICING */
.landing-pricing {
  padding: 80px 56px;
  max-width: 1280px;
  margin: 0 auto;
}
.landing-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 22px;
}
.lp-plan {
  position: relative;
  padding: 36px 28px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}
.lp-plan--featured {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.06) 0%, rgb(var(--ink-rgb) / 0.02) 100%);
  border-color: rgb(var(--accent-rgb) / 0.4);
  box-shadow: 0 30px 60px -20px rgb(var(--accent-rgb) / 0.2);
  transform: scale(1.03);
}
.lp-plan__badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--accent, var(--accent));
  color: var(--on-accent);
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.lp-plan__name {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted, var(--text-3));
  margin-bottom: 14px;
}
.lp-plan__price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text, var(--text));
  margin-bottom: 8px;
}
.lp-plan__currency {
  font-size: 24px;
  vertical-align: top;
  color: var(--muted, var(--text-3));
  font-weight: 500;
  margin-right: 2px;
}
.lp-plan__period {
  font-size: 14px;
  color: var(--muted, var(--text-3));
  font-weight: 500;
  margin-left: 4px;
}
.lp-plan__desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-dim, var(--text-2));
  line-height: 1.5;
  margin-bottom: 22px;
  min-height: 40px;
}
.lp-plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.lp-plan__features li {
  font-size: 13px;
  color: var(--text-dim, var(--text-2));
  padding: 8px 0 8px 22px;
  position: relative;
  border-bottom: 1px dashed rgb(var(--ink-rgb) / 0.05);
}
.lp-plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent, var(--accent));
  font-weight: 700;
}
.lp-pricing__note {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted, var(--text-3));
  margin: 32px 0 0;
}

/* CTA FINAL */
.landing-cta-final {
  padding: 90px 56px 110px;
  text-align: center;
  background:
    radial-gradient(ellipse at center, rgb(var(--accent-rgb) / 0.1) 0%, transparent 60%);
}
.landing-cta-final__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
}
.landing-cta-final__sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--muted, var(--text-3));
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.55;
}

/* FOOTER */
.landing-footer {
  padding: 40px 56px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.05);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.landing-footer__brand {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
}
.landing-footer__brand em { color: var(--accent, var(--accent)); font-style: italic; }
.landing-footer__tagline {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  margin-top: 4px;
  letter-spacing: 0.05em;
}
.landing-footer__head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted, var(--text-3));
  margin-bottom: 12px;
}
.landing-footer__col a {
  display: block;
  font-size: 13px;
  color: var(--text-dim, var(--text-2));
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.18s;
}
.landing-footer__col a:hover { color: var(--accent, var(--accent)); }

/* RESPONSIVE landing */
@media (max-width: 980px) {
  .landing-topbar { padding: 16px 22px; }
  .landing-topbar__nav { display: none; }
  .landing-mobile-cta { display: inline-flex; }
  .landing-hero {
    grid-template-columns: 1fr;
    padding: 30px 22px 60px;
    gap: 40px;
  }
  .landing-hero__mockup { order: -1; }
  .landing-features { padding: 50px 22px; }
  .landing-features__grid { grid-template-columns: 1fr; }
  .landing-howto { padding: 50px 22px; }
  .landing-howto__steps { grid-template-columns: 1fr; }
  .landing-pricing { padding: 50px 22px; }
  .landing-pricing__grid { grid-template-columns: 1fr; }
  .lp-plan--featured { transform: none; }
  .landing-cta-final { padding: 60px 22px 80px; }
  .landing-footer {
    grid-template-columns: 1fr;
    padding: 30px 22px;
    gap: 22px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ONBOARDING CHECKLIST — card de 4 pasos para usuario nuevo
   ════════════════════════════════════════════════════════════════════════ */
.onboarding-card {
  margin: 0 0 22px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 0% 0%, rgb(var(--accent-rgb) / 0.1) 0%, transparent 50%),
    linear-gradient(135deg, rgb(var(--info-rgb) / 0.05) 0%, rgb(var(--ink-rgb) / 0.02) 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  overflow: hidden;
  position: relative;
}
.onboarding-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
                var(--accent, var(--accent)) 0%,
                rgb(var(--info-rgb) / 0.9) 50%,
                rgb(var(--info-rgb) / 0.9) 100%);
}

.onboarding-card__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px 12px;
}
.onboarding-card__eyebrow {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent, var(--accent));
  margin-bottom: 4px;
}
.onboarding-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text, var(--text));
  margin: 0 0 4px;
}
.onboarding-card__sub {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--muted, var(--text-3));
  margin: 0;
  max-width: 580px;
  line-height: 1.5;
}

/* Ring circular de progreso */
.onboarding-card__progress {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.onb-ring {
  width: 64px;
  height: 64px;
  transform: rotate(0deg);
}
.onb-ring__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text, var(--text));
}
.onb-ring__text span { color: var(--accent, var(--accent)); font-size: 18px; margin-right: 1px; }

.onboarding-card__dismiss {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgb(var(--ink-rgb) / 0.05);
  color: var(--muted, var(--text-3));
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s;
  flex-shrink: 0;
}
.onboarding-card__dismiss:hover {
  background: rgb(var(--danger-rgb) / 0.15);
  color: var(--danger);
}

/* Lista de pasos */
.onboarding-steps {
  list-style: none;
  margin: 0;
  padding: 4px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.onb-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 0.2s;
}
.onb-step:hover { background: rgb(var(--ink-rgb) / 0.025); }

.onb-step__check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgb(var(--ink-rgb) / 0.05);
  border: 1.5px solid rgb(var(--ink-rgb) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.onb-step__check svg { width: 14px; height: 14px; }

.onb-step--done .onb-step__check {
  background: var(--accent, var(--accent));
  border-color: var(--accent, var(--accent));
  color: var(--on-accent);
}

.onb-step__body { flex: 1; min-width: 0; }
.onb-step__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text, var(--text));
  line-height: 1.3;
  margin-bottom: 2px;
  transition: color 0.3s, text-decoration 0.3s;
}
.onb-step__sub {
  font-size: 12px;
  color: var(--muted, var(--text-3));
  font-family: var(--font-ui, 'Inter', sans-serif);
  line-height: 1.4;
}

.onb-step--done .onb-step__title {
  color: var(--muted, var(--text-3));
  text-decoration: line-through;
  text-decoration-color: rgb(var(--accent-rgb) / 0.4);
  text-decoration-thickness: 1.5px;
}
.onb-step--done .onb-step__sub {
  color: var(--muted, var(--text-3));
  opacity: 0.6;
}

.onb-step__cta {
  background: transparent;
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  color: var(--accent, var(--accent));
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui, 'Inter', sans-serif);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, transform 0.15s;
  white-space: nowrap;
}
.onb-step__cta:hover {
  background: rgb(var(--accent-rgb) / 0.1);
  transform: translateX(2px);
}
.onb-step__cta:active { transform: scale(0.96); }

/* Estado completo (5 segundos antes de auto-hide) */
.onboarding-card--complete {
  background:
    radial-gradient(ellipse at center, rgb(var(--accent-rgb) / 0.1) 0%, transparent 60%),
    linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08) 0%, rgb(var(--info-rgb) / 0.04) 100%);
  border-color: rgb(var(--accent-rgb) / 0.45);
}

@media (max-width: 760px) {
  .onboarding-card__head {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .onboarding-card__progress {
    grid-row: 1;
    grid-column: 2;
  }
  .onboarding-card__dismiss {
    position: absolute;
    top: 14px;
    right: 14px;
  }
  .onb-step {
    flex-wrap: wrap;
  }
  .onb-step__cta {
    margin-left: 40px;
    margin-top: 4px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO ACCIONES RÁPIDAS — reemplaza al micrófono decorativo del Dashboard
   ════════════════════════════════════════════════════════════════════════ */
.hero-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: center;
  width: 380px;
  max-width: 100%;
}
@media (max-width: 1100px) {
  .hero-quick-actions { width: 100%; }
}

.hero-quick-eyebrow {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted, var(--text-3));
  text-transform: uppercase;
  margin-bottom: 4px;
  padding-left: 4px;
}

/* Botón primario (ancho completo) — "Generar copy con IA" */
.hero-quick-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.1) 0%, rgb(var(--info-rgb) / 0.04) 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-align: left;
  font-family: inherit;
  color: var(--text, var(--text));
  width: 100%;
}
.hero-quick-btn:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--accent-rgb) / 0.55);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.5),
              0 0 0 1px rgb(var(--accent-rgb) / 0.2);
}
.hero-quick-btn--primary {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.18) 0%, rgb(var(--info-rgb) / 0.06) 100%);
}
.hero-quick-btn__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--accent-rgb) / 0.2);
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  color: var(--accent, var(--accent));
  flex-shrink: 0;
}
.hero-quick-btn__icon svg { width: 22px; height: 22px; }
.hero-quick-btn__body {
  flex: 1;
  min-width: 0;
}
.hero-quick-btn__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text, var(--text));
  margin-bottom: 2px;
}
.hero-quick-btn__sub {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  font-family: var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.005em;
}
.hero-quick-btn__arrow {
  font-size: 18px;
  color: var(--muted, var(--text-3));
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}
.hero-quick-btn:hover .hero-quick-btn__arrow {
  transform: translateX(4px);
  color: var(--accent, var(--accent));
}

/* Fila de mini botones secundarios */
.hero-quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hero-quick-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 11px;
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.18s;
  text-align: left;
  font-family: inherit;
  color: var(--text, var(--text));
  min-width: 0;
}
.hero-quick-mini:hover {
  background: rgb(var(--info-rgb) / 0.06);
  border-color: rgb(var(--info-rgb) / 0.3);
  transform: translateY(-1px);
}
.hero-quick-mini__icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--info-rgb) / 0.1);
  color: var(--info);
  border: 1px solid rgb(var(--info-rgb) / 0.22);
}
.hero-quick-mini__icon svg { width: 14px; height: 14px; }
.hero-quick-mini__txt { width: 100%; min-width: 0; }
.hero-quick-mini__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-quick-mini__count {
  font-size: 10.5px;
  color: var(--muted, var(--text-3));
  font-family: var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.01em;
  margin-top: 1px;
}

/* En mobile: el panel queda abajo del saludo, las mini se apilan */
@media (max-width: 760px) {
  .hero-quick-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   DATA CLEANUP — card del Dashboard para limpiar publicaciones huérfanas
   ════════════════════════════════════════════════════════════════════════ */
.data-cleanup-section { margin: 22px 0; }

/* Modal del Platform Fixer (PFX) */
.pfx-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 20px;
}
.pfx-loading__spin {
  width: 26px;
  height: 26px;
  border: 3px solid rgb(var(--accent-rgb) / 0.25);
  border-top-color: var(--accent, var(--accent));
  border-radius: 50%;
  animation: aireSpin 0.7s linear infinite;
  flex-shrink: 0;
}
.pfx-loading__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin-bottom: 3px;
}
.pfx-loading__sub {
  font-size: 12.5px;
  color: var(--muted, var(--text-3));
  line-height: 1.5;
}

.pfx-intro {
  padding: 14px 20px;
  background: rgb(var(--accent-rgb) / 0.04);
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.15);
  font-size: 13px;
  color: var(--text-dim, var(--text-2));
  line-height: 1.55;
}
.pfx-intro strong { color: var(--accent, var(--accent)); }

.pfx-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 0;
}
.pfx-item {
  padding: 12px 20px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.05);
}
.pfx-item:last-child { border-bottom: none; }
.pfx-item-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text, var(--text));
  margin-bottom: 8px;
  line-height: 1.35;
}
.pfx-item-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pfx-select {
  width: 180px !important;
  flex-shrink: 0;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  text-transform: capitalize;
}
.pfx-item-reason {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  font-style: italic;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pfx-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
  background: rgba(0,0,0,0.18);
}

/* ════════════════════════════════════════════════════════════════════════
   NEWSLETTER IA — generador del boletín del día
   ════════════════════════════════════════════════════════════════════════ */

/* Modal del Newsletter — preview + actions */
.newsletter-modal { max-width: 760px; }

.newsletter-loading {
  padding: 30px 26px;
}
.newsletter-loading__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.newsletter-loading__spin {
  width: 26px;
  height: 26px;
  border: 3px solid rgb(var(--info-rgb) / 0.2);
  border-top-color: var(--info);
  border-radius: 50%;
  animation: aireSpin 0.7s linear infinite;
  flex-shrink: 0;
}
.newsletter-loading__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin-bottom: 4px;
}
.newsletter-loading__sub {
  font-size: 12.5px;
  color: var(--muted, var(--text-3));
  line-height: 1.5;
}
.newsletter-loading__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.newsletter-loading__steps li {
  font-size: 12px;
  color: var(--muted, var(--text-3));
  padding: 6px 12px;
  background: rgb(var(--info-rgb) / 0.04);
  border-radius: 8px;
  border-left: 2px solid rgb(var(--info-rgb) / 0.3);
  position: relative;
  opacity: 0;
  animation: stepFadeIn 0.5s ease-out forwards;
}
.newsletter-loading__steps li:nth-child(1) { animation-delay: 0.2s; }
.newsletter-loading__steps li:nth-child(2) { animation-delay: 1.5s; }
.newsletter-loading__steps li:nth-child(3) { animation-delay: 3.0s; }
.newsletter-loading__steps li:nth-child(4) { animation-delay: 4.5s; }
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.newsletter-result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: rgb(var(--info-rgb) / 0.05);
  border-bottom: 1px solid rgb(var(--info-rgb) / 0.18);
  flex-wrap: wrap;
  gap: 12px;
}
.newsletter-result-meta strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  color: var(--text, var(--text));
}
.newsletter-result-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.newsletter-preview {
  height: 520px;
  background: var(--text);
}
.newsletter-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.newsletter-empty {
  padding: 40px 30px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   POOL DE NOTICIAS — Grid Bento
   1 hero arriba (la más urgente/relevante), 2 medianas, 6 chicas.
   Layout responsivo con CSS Grid Areas + container queries.
   ════════════════════════════════════════════════════════════════════════ */

/* Grid Bento principal */
.bento-pool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;                /* +10px: las cards ya no aprietan título+footer (auditoría 2026-05-28) */
  gap: 12px;
  min-height: 320px;
}
@media (max-width: 1200px) {
  .bento-pool-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .bento-pool-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; }
}

.bento-card {
  position: relative;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.04) 0%, rgb(var(--ink-rgb) / 0.015) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.22s,
              box-shadow 0.22s;
}
.bento-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--accent-rgb) / 0.35);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6),
              0 0 0 1px rgb(var(--accent-rgb) / 0.12);
}

/* Tamaños del grid: hero ocupa 2x2, medium 2x1, small 1x1 */
.bento-card--hero    { grid-column: span 2; grid-row: span 2; padding: 22px 24px; }
.bento-card--medium  { grid-column: span 2; }
.bento-card--small   { grid-column: span 1; }

@media (max-width: 760px) {
  .bento-card--hero    { grid-column: span 2; grid-row: span 2; }
  .bento-card--medium  { grid-column: span 2; }
  .bento-card--small   { grid-column: span 1; }
}

/* Pill de prioridad arriba */
.bento-pill {
  align-self: flex-start;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: uppercase;
}
.bento-pill--urgent {
  background: rgb(var(--danger-rgb) / 0.18);
  color: var(--danger);
  border: 1px solid rgb(var(--danger-rgb) / 0.35);
  animation: bentoUrgentPulse 2.4s ease-in-out infinite;
}
@keyframes bentoUrgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--danger-rgb) / 0.28); }
  50%      { box-shadow: 0 0 0 4px rgb(var(--danger-rgb) / 0); }
}
.bento-pill--alta {
  background: rgb(var(--accent-rgb) / 0.18);
  color: var(--accent);
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
}
.bento-pill--media {
  background: rgb(var(--info-rgb) / 0.15);
  color: var(--info);
  border: 1px solid rgb(var(--info-rgb) / 0.3);
}

/* Título — Fraunces, tamaño según size de card */
.bento-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.24;
  color: #fffdf4;                       /* crema casi blanco: máximo contraste sobre fondo oscuro */
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-font-smoothing: antialiased;  /* serif más nítido en pantalla */
  text-rendering: optimizeLegibility;
}
.bento-card--hero   .bento-card__title { font-size: 25px; -webkit-line-clamp: 3; }
.bento-card--medium .bento-card__title { font-size: 16.5px; font-weight: 650; -webkit-line-clamp: 2; }
.bento-card--small  .bento-card__title { font-size: 14px; font-weight: 650; line-height: 1.3; -webkit-line-clamp: 3; }

/* Resumen (solo en hero y medium) */
.bento-card__resumen {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim, var(--text-2));
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bento-card--medium .bento-card__resumen {
  font-size: 12px;
  -webkit-line-clamp: 2;
}

/* Footer: fuente + tiempo */
.bento-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.05);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.bento-card__source {
  color: var(--accent, var(--accent));
  font-weight: 600;
  text-transform: uppercase;
}
.bento-card__time {
  color: var(--muted, var(--text-3));
  font-variant-numeric: tabular-nums;
}

/* CTA flecha esquina */
.bento-card__cta {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  color: var(--muted, var(--text-3));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, color 0.2s, background 0.2s, border-color 0.2s;
}
.bento-card:hover .bento-card__cta {
  background: var(--accent, var(--accent));
  border-color: var(--accent, var(--accent));
  color: var(--on-accent);
  transform: scale(1.08);
}

/* Variantes de color (lateral izquierdo) por urgencia */
.bento-card--urgent {
  border-left: 3px solid rgb(var(--danger-rgb) / 0.55);
}
.bento-card--alta {
  border-left: 3px solid rgb(var(--accent-rgb) / 0.5);
}
.bento-card--media {
  border-left: 3px solid rgb(var(--info-rgb) / 0.4);
}

/* Card urgente: glow rojo sutil */
.bento-card--urgent.bento-card--hero {
  background: linear-gradient(135deg,
                rgb(var(--danger-rgb) / 0.06) 0%,
                rgb(var(--ink-rgb) / 0.015) 100%);
}

/* Legend abajo */

/* ════════════════════════════════════════════════════════════════════════
   POOL DE NOTICIAS (legacy) — upgrade editorial (override de app.css)
   Animación más sutil, mejor jerarquía visual, tooltip rico al hover.
   Si en algún momento volvés al pool de burbujas, estos estilos siguen ahí.
   ════════════════════════════════════════════════════════════════════════ */

/* Stage con fondo de agua más vivo, "respira" suave */
#view-dashboard .pool-stage,
.pool-stage {
  height: 380px;
  background:
    radial-gradient(ellipse at 25% 25%, rgb(var(--info-rgb) / 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgb(var(--accent-rgb) / 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at center, rgb(var(--info-rgb) / 0.04) 0%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
  border: 1px solid rgb(var(--info-rgb) / 0.15);
  box-shadow: inset 0 1px 0 rgb(var(--ink-rgb) / 0.03);
}

/* Las burbujas con mejor profundidad y movimiento más sutil */

@keyframes bubbleDrift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-2px, 2px); }
}

/* Variar timing por orden de aparición — cada burbuja con su propio ritmo (lento) */

/* Hover: la burbuja crece + aparece tooltip con título completo */

/* Texto adentro de la burbuja un poco más legible */

/* Burbuja urgente: texto en blanco con sombra para legibilidad */

/* Mejorar leyenda del pool */
.pool-legend,
[class*="pool-legend"] {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════════════
   EDITOR IA — Panel de revisión de riesgos editoriales
   Aparece debajo del copy generado. Semáforo + issues categorizados +
   botón "aplicar correcciones" que reescribe el copy.
   ════════════════════════════════════════════════════════════════════════ */
.ai-review-panel {
  margin-top: 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgb(var(--info-rgb) / 0.04) 0%, rgb(var(--ink-rgb) / 0.015) 100%);
  border: 1px solid rgb(var(--info-rgb) / 0.22);
  overflow: hidden;
}

/* Loading */
.ai-review-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}
.ai-review-loading__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin-bottom: 3px;
}
.ai-review-loading__sub {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  line-height: 1.4;
}
.ai-review-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgb(var(--info-rgb) / 0.25);
  border-top-color: var(--info);
  border-radius: 50%;
  animation: aireSpin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes aireSpin { to { transform: rotate(360deg); } }

/* Header con score grande y nivel */
.ai-review-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
  position: relative;
}
.ai-review-header--ok     { background: linear-gradient(180deg, rgb(var(--success-rgb) / 0.06) 0%, transparent 100%); }
.ai-review-header--review { background: linear-gradient(180deg, rgb(var(--warning-rgb) / 0.06) 0%, transparent 100%); }
.ai-review-header--block  { background: linear-gradient(180deg, rgb(var(--danger-rgb) / 0.06) 0%, transparent 100%); }

.ai-review-score {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: 'Fraunces', Georgia, serif;
  font-variant-numeric: tabular-nums;
}
.ai-review-score__big {
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ai-review-score__label {
  font-size: 13px;
  opacity: 0.7;
}
.ai-review-meta {
  flex: 1;
  min-width: 0;
}
.ai-review-meta__lvl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 4px;
  font-family: var(--font-ui, 'Inter', sans-serif);
}
.ai-review-meta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: aireDot 1.8s ease-in-out infinite;
}
@keyframes aireDot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 5px transparent; }
}
.ai-review-meta__resumen {
  font-size: 12.5px;
  color: var(--muted, var(--text-3));
  line-height: 1.4;
}
.ai-review-close {
  background: none;
  border: none;
  color: var(--muted, var(--text-3));
  font-size: 22px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
  transition: color 0.18s;
}
.ai-review-close:hover { color: var(--text, var(--text)); }

/* Empty state cuando no hay issues */
.ai-review-empty {
  padding: 22px;
  text-align: center;
  background: rgb(var(--success-rgb) / 0.03);
}

/* Lista de issues agrupados por categoría */
.ai-review-issues {
  padding: 14px 20px 0;
}
.ai-review-cat {
  margin-bottom: 14px;
}
.ai-review-cat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.05);
  margin-bottom: 8px;
}
.ai-review-cat__icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
}
.ai-review-cat__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, var(--text));
}
.ai-review-cat__desc {
  font-size: 10.5px;
  color: var(--muted, var(--text-3));
  letter-spacing: 0.02em;
}
.ai-review-cat__count {
  margin-left: auto;
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--text, var(--text));
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}

.ai-review-issue {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgb(var(--ink-rgb) / 0.02);
  border-left: 2px solid;
}
.ai-review-issue--alta  { border-left-color: var(--danger); background: rgb(var(--danger-rgb) / 0.04); }
.ai-review-issue--media { border-left-color: var(--warning); background: rgb(var(--warning-rgb) / 0.04); }
.ai-review-issue--baja  { border-left-color: var(--info); background: rgb(var(--info-rgb) / 0.03); }

.ai-review-issue__sev {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-family: var(--font-ui, 'Inter', sans-serif);
  width: 60px;
  padding-top: 2px;
}
.ai-review-issue--alta  .ai-review-issue__sev { color: var(--danger); }
.ai-review-issue--media .ai-review-issue__sev { color: var(--warning); }
.ai-review-issue--baja  .ai-review-issue__sev { color: var(--info); }

.ai-review-issue__txt {
  flex: 1;
  min-width: 0;
}
.ai-review-issue__problem {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text, var(--text));
  margin-bottom: 4px;
}
.ai-review-issue__fix {
  font-size: 12px;
  line-height: 1.45;
  color: var(--accent, var(--accent));
  font-style: italic;
}

/* Acciones del panel */
.ai-review-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.04);
  flex-wrap: wrap;
}

/* Estado "correcciones aplicadas" */
.ai-review-applied {
  padding: 18px 20px;
  background: rgb(var(--success-rgb) / 0.05);
  border-left: 3px solid var(--success);
}

.ai-review-error {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--danger);
}

/* Botón "Revisar con Editor IA" en el grupo de acciones */
.ai-review-btn {
  position: relative;
}
.ai-review-btn::before {
  content: "✦";
  margin-right: 4px;
  color: var(--info);
}

/* ════════════════════════════════════════════════════════════════════════
   INSIGHTS EDITORIALES — vista de métricas
   ════════════════════════════════════════════════════════════════════════ */
.insights-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}
.insights-h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text, var(--text));
  margin: 0 0 6px;
}
.insights-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted, var(--text-3));
  margin: 0;
  max-width: 560px;
  line-height: 1.5;
}

/* Tile row de métricas hero */
.insights-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .insights-tiles { grid-template-columns: repeat(2, 1fr); }
}
.insights-tile {
  background: linear-gradient(180deg,
                rgb(var(--accent-rgb) / 0.05) 0%,
                rgb(var(--accent-rgb) / 0.01) 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.25s, transform 0.25s;
}
.insights-tile:hover {
  border-color: rgb(var(--accent-rgb) / 0.35);
  transform: translateY(-1px);
}
.insights-tile-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent, var(--accent));
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.insights-tile-label {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted, var(--text-3));
  margin-bottom: 4px;
}
.insights-tile-delta {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10.5px;
  color: var(--muted, var(--text-3));
  letter-spacing: 0.02em;
}
.insights-tile-delta.up   { color: var(--success); }
.insights-tile-delta.down { color: var(--danger); }

/* Grid 2x2 de gráficos */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .insights-grid { grid-template-columns: 1fr; }
}
.insights-card {
  background: rgb(var(--ink-rgb) / 0.02);
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-radius: 16px;
  padding: 20px 22px;
}
.insights-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.insights-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text, var(--text));
  margin: 0 0 4px;
}
.insights-card-sub {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  margin: 0;
  letter-spacing: 0.01em;
}
.insights-chart-host {
  min-height: 170px;
}
.insights-chart-foot {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  text-align: center;
  margin-top: 10px;
  font-family: var(--font-ui, 'Inter', sans-serif);
}

/* Top redactores: barras horizontales */
.insights-bar-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.insights-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.insights-bar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
  font-family: var(--font-ui, 'Inter', sans-serif);
}
.insights-bar-info {
  flex: 1;
  min-width: 0;
}
.insights-bar-name {
  font-size: 12.5px;
  color: var(--text, var(--text));
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insights-bar-track {
  height: 6px;
  background: rgb(var(--ink-rgb) / 0.05);
  border-radius: 99px;
  overflow: hidden;
}
.insights-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 100%);
  border-radius: 99px;
}
.insights-bar-count {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, var(--text));
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: right;
}

/* Heatmap día × hora */
.insights-heatmap-grid {
  display: grid;
  grid-template-columns: 38px repeat(8, 1fr);
  gap: 3px;
}
.insights-heatmap-corner { }
.insights-heatmap-hcol,
.insights-heatmap-day {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10px;
  color: var(--muted, var(--text-3));
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}
.insights-heatmap-day { justify-content: flex-end; padding-right: 6px; }
.insights-heatmap-cell {
  height: 18px;
  border-radius: 3px;
  transition: transform 0.15s;
  cursor: pointer;
}
.insights-heatmap-cell:hover {
  transform: scale(1.15);
  outline: 1px solid rgb(var(--ink-rgb) / 0.3);
}

/* Donut + leyenda */
.insights-donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
.insights-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.insights-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--font-ui, 'Inter', sans-serif);
}
.insights-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.insights-legend-label {
  flex: 1;
  color: var(--text, var(--text));
  text-transform: capitalize;
}
.insights-legend-val {
  color: var(--muted, var(--text-3));
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════════════
   NOTICIAS — Rediseño editorial estilo redacción digital
   Newsroom strip header + lead story + grid 2-col + tipografía Fraunces
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Newsroom strip: header del listado con stats por categoría ─── */
.newsroom-strip-wrap {
  margin-bottom: 14px !important;
}
.newsroom-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  flex-wrap: wrap;
  position: relative;
}
.newsroom-strip__total {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 8px;
}
.newsroom-strip__total-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  color: var(--text, var(--text));
  letter-spacing: -0.02em;
  font-feature-settings: 'lnum';
}
.newsroom-strip__total-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.newsroom-strip__total-label {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--text, var(--text));
  letter-spacing: -0.005em;
}
.newsroom-strip__total-sub {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 11px;
  color: var(--muted, var(--text-3));
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.newsroom-strip__chips {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.newsroom-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 99px;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  color: var(--muted, var(--text-3));
  white-space: nowrap;
}
.newsroom-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.newsroom-chip--urgente {
  background: rgb(var(--danger-rgb) / 0.1);
  border-color: rgb(var(--danger-rgb) / 0.3);
  color: var(--danger);
}
.newsroom-chip--urgente .newsroom-chip__dot {
  animation: edPulseDot 1.4s ease-in-out infinite;
}
.newsroom-chip--reciente {
  background: rgb(var(--info-rgb) / 0.1);
  border-color: rgb(var(--info-rgb) / 0.3);
  color: var(--info);
}
.newsroom-chip--destacada {
  background: rgb(var(--accent-rgb) / 0.1);
  border-color: rgb(var(--accent-rgb) / 0.32);
  color: var(--accent, var(--accent));
}
@media (max-width: 720px) {
  .newsroom-strip { padding: 14px 16px; gap: 14px; }
  .newsroom-strip__total-num { font-size: 32px; }
  .newsroom-strip__chips { width: 100%; }
}

/* ─── News list: lista FLAT single-column estilo "monitor inteligente".
       Refactor del grid 2-col cargado — ahora cada noticia es un row con
       borde sutil, mínimo chrome, mucho menos ruido visual. ─── */
.news-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.012) 0%, rgb(var(--ink-rgb) / 0.004) 100%);
}

/* ─── Card por defecto: row horizontal con separador sutil ─── */
.news-card-pro {
  position: relative;
  padding: 16px 22px !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.05) !important;
  transition: background 0.18s !important;
}
.news-card-pro:last-child { border-bottom: none !important; }
.news-card-pro:hover {
  background: rgb(var(--ink-rgb) / 0.025) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ─── Lead story: card destacada arriba del listado, más prominente
       pero igual sigue siendo row (no card flotante) ─── */
.news-card-pro--lead {
  background: linear-gradient(135deg,
    rgb(var(--accent-rgb) / 0.06) 0%,
    rgb(var(--ink-rgb) / 0.015) 50%,
    rgb(var(--ink-rgb) / 0.003) 100%) !important;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.2) !important;
  padding: 22px 26px !important;
}
.news-card-pro--lead .news-card-titulo {
  font-size: 20px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em;
  margin-top: 6px;
  margin-bottom: 8px !important;
}
@media (min-width: 1240px) {
  .news-card-pro--lead .news-card-titulo { font-size: 23px !important; }
}
/* La etiqueta "PORTADA" fue quitada — el tamaño y el borde lima ya lo comunican.
   Esto reduce ruido textual en la parte superior derecha de la card lead. */

/* ─── La importancia se comunica con (1) el score pill color-coded
       (2) el tamaño de la portada y (3) un glow sutil en cards urgentes ─── */
.news-card-pro { border-radius: 14px !important; }

/* Cards urgentes en lista flat: borde izquierdo rojo en lugar de glow box-shadow */
.news-card-pro[data-categoria="urgente"]:not(.news-card-pro--lead) {
  box-shadow: inset 3px 0 0 0 var(--danger) !important;
}
.news-card-pro[data-categoria="urgente"]:not(.news-card-pro--lead):hover {
  box-shadow: inset 3px 0 0 0 var(--danger), 0 0 0 1px rgb(var(--danger-rgb) / 0.18) !important;
}

/* La diferenciación por zona ahora vive solo en la pill `.news-zona-pill`
   (que ya tiene color por zona). Quitamos el border-left de 4px porque
   con el layout flat se ve demasiado cargado. */
.news-card-pro .news-card-top { position: relative; }

/* ─── Hover: la card sube + borde se intensifica ─── */
.news-card-pro:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--ink-rgb) / 0.18) !important;
  box-shadow:
    0 14px 32px -18px rgba(0,0,0,0.55),
    0 0 0 1px rgb(var(--ink-rgb) / 0.04) !important;
}
.news-card-pro--lead:hover {
  border-color: rgb(var(--accent-rgb) / 0.4) !important;
  box-shadow:
    0 18px 40px -18px rgba(0,0,0,0.6),
    0 0 0 1px rgb(var(--accent-rgb) / 0.18) !important;
}

/* ─── Título con tipografía editorial Fraunces ─── */
.news-card-titulo {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.24 !important;
  letter-spacing: -0.01em !important;
  color: var(--text, var(--text)) !important;
  margin-bottom: 10px !important;
}

/* ─── Resumen ejecutivo: estilo pull-quote editorial ─── */
.news-card-resumen-ejecutivo {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  letter-spacing: 0.005em !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg,
    rgb(var(--accent-rgb) / 0.07),
    rgb(var(--accent-rgb) / 0.015)) !important;
  border-left: 3px solid var(--accent, var(--accent)) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 10px 10px 0 !important;
}
.news-card-pro--lead .news-card-resumen-ejecutivo {
  font-size: 15.5px !important;
  padding: 16px 20px !important;
}
.news-card-rejec-label {
  font-family: var(--font-ui, 'Inter', sans-serif) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  color: var(--accent, var(--accent)) !important;
  margin-bottom: 6px !important;
}

/* ─── Resumen normal (sin IA): texto serif claro ─── */
.news-card-resumen {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--text-dim, var(--text-2)) !important;
  margin-bottom: 12px !important;
}

/* ─── Secciones de ángulos / verificar: estilo más editorial ─── */
.news-card-section,
.news-card-razon {
  background: rgb(var(--ink-rgb) / 0.025) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  margin-bottom: 10px !important;
}
.news-card-section { border-left: 2px solid rgb(var(--accent-rgb) / 0.42) !important; }
.news-card-section.warn { border-left-color: rgb(var(--warning-rgb) / 0.5) !important; }
.news-card-razon { border-left: 2px solid rgb(var(--info-rgb) / 0.5) !important; }

.news-card-section-label,
.news-card-razon-label {
  font-family: var(--font-ui, 'Inter', sans-serif) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

/* ─── Tags: más sutiles, menos coloridos ─── */
.news-card-tag {
  background: rgb(var(--ink-rgb) / 0.03) !important;
  border-color: rgb(var(--ink-rgb) / 0.06) !important;
  color: var(--muted, var(--text-3)) !important;
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* Tema pill y plat sug: ocultos para reducir carga visual.
   El título y el resumen ejecutivo ya comunican el tema; la plat se decide
   en el Generador, no en el triage de Noticias. */
.news-tema-pill,
.news-plat-sug { display: none !important; }

/* Padding reducido de cards normales — menos densidad */
.news-card-pro:not(.news-card-pro--lead) {
  padding: 16px 18px 13px !important;
}
.news-card-pro:not(.news-card-pro--lead) .news-card-titulo {
  font-size: 16.5px !important;
  -webkit-line-clamp: 2 !important;
  margin-bottom: 6px !important;
}
.news-card-pro:not(.news-card-pro--lead) .news-card-resumen,
.news-card-pro:not(.news-card-pro--lead) .news-card-resumen-ejecutivo {
  margin-bottom: 8px !important;
  font-size: 12.5px !important;
}
.news-card-pro:not(.news-card-pro--lead) .news-card-top {
  margin-bottom: 6px !important;
}

/* ─── Score pill: más prominente y redondito ─── */
.news-score-pill {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  padding: 5px 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

/* ─── Footer: separador editorial sutil y botón primario con peso ─── */
.news-card-footer {
  padding-top: 14px !important;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.06) !important;
  margin-top: 4px;
}
.news-card-footer .btn.btn-primary {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-weight: 600;
}
.news-card-source-link {
  font-family: var(--font-ui, 'Inter', sans-serif) !important;
  font-size: 11px !important;
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* ─── Búsqueda: input más editorial ─── */
.news-search {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
.news-search::placeholder {
  font-style: italic;
  color: var(--muted, var(--text-3));
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════
   COMPRESIÓN cards NO-PORTADA — menos texto, escaneables de un golpe.
   Solo la portada (.news-card-pro--lead) muestra todo el detalle.
   ════════════════════════════════════════════════════════════════════════ */
.news-card-pro:not(.news-card-pro--lead) {
  padding: 18px 20px 14px !important;
}

/* Ocultar metadata secundaria — la card normal debe tener solo lo esencial:
   zona + fuente + título + 2 líneas de resumen + acciones. */
.news-card-pro:not(.news-card-pro--lead) .news-tema-pill,
.news-card-pro:not(.news-card-pro--lead) .news-plat-sug,
.news-card-pro:not(.news-card-pro--lead) .news-card-razon,
.news-card-pro:not(.news-card-pro--lead) .news-card-section,
.news-card-pro:not(.news-card-pro--lead) .news-card-tags {
  display: none !important;
}

/* Truncar resumen ejecutivo a 2 líneas con elipsis */
.news-card-pro:not(.news-card-pro--lead) .news-card-resumen-ejecutivo {
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 10px 13px !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 8px 0 10px !important;
}
/* Label "POR QUÉ CUBRIR ESTO" se oculta en cards comprimidas — el texto solo basta */
.news-card-pro:not(.news-card-pro--lead) .news-card-rejec-label {
  display: none !important;
}

/* Resumen normal: también máximo 2 líneas */
.news-card-pro:not(.news-card-pro--lead) .news-card-resumen {
  font-size: 13px !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px !important;
}

/* Título de card compacta: un poco más chico */
.news-card-pro:not(.news-card-pro--lead) .news-card-titulo {
  font-size: 17px !important;
  line-height: 1.22 !important;
  margin-bottom: 8px !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Top row más compacto y con gap menor */
.news-card-pro:not(.news-card-pro--lead) .news-card-top {
  margin-bottom: 8px !important;
  gap: 6px !important;
}
.news-card-pro:not(.news-card-pro--lead) .news-card-fuente {
  gap: 6px !important;
}
.news-card-pro:not(.news-card-pro--lead) .news-zona-pill,
.news-card-pro:not(.news-card-pro--lead) .news-source-tag {
  font-size: 10.5px !important;
  padding: 3px 8px !important;
}
.news-card-pro:not(.news-card-pro--lead) .news-score-pill {
  font-size: 11px !important;
  padding: 3px 8px !important;
}
.news-card-pro:not(.news-card-pro--lead) .news-card-time {
  font-size: 10.5px !important;
}

/* Footer más compacto */
.news-card-pro:not(.news-card-pro--lead) .news-card-footer {
  padding-top: 10px !important;
}
.news-card-pro:not(.news-card-pro--lead) .news-card-footer .btn {
  font-size: 12px !important;
  padding: 6px 12px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   CALIDAD EDITORIAL — Six Sigma Dashboard
   Header + sigma hero + 4 KPIs + Pareto chart + lectura editorial
   ════════════════════════════════════════════════════════════════════════ */
.calidad-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.calidad-h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 4px 0;
}
.calidad-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  max-width: 640px;
}

/* 4 KPIs */
.calidad-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 980px) { .calidad-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .calidad-kpis { grid-template-columns: 1fr; } }

.calidad-kpi {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.03) 0%, rgb(var(--ink-rgb) / 0.008) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 16px;
  padding: 16px 18px;
}
.calidad-kpi__label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 8px;
}
.calidad-kpi__num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
}
.calidad-kpi__unit {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.calidad-kpi__hint {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 8px;
  opacity: 0.75;
}

/* Pareto chart */
.calidad-pareto {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.03) 0%, rgb(var(--ink-rgb) / 0.008) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.calidad-pareto__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
}
.calidad-pareto__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 4px;
}
.calidad-pareto__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 4px 0;
}
.calidad-pareto__sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted);
  margin: 0;
}
.calidad-pareto__total {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--muted);
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  padding: 7px 13px;
  border-radius: 99px;
  white-space: nowrap;
}
.calidad-pareto__total span {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-right: 5px;
}

.calidad-pareto__chart { display: flex; flex-direction: column; gap: 12px; }
.pareto-row {
  display: grid;
  grid-template-columns: minmax(180px, 200px) minmax(0, 1fr) 50px 50px 70px;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.pareto-row__label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pareto-row__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pareto-row__name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pareto-row__bar-wrap {
  height: 22px;
  background: rgb(var(--ink-rgb) / 0.04);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.pareto-row__bar {
  height: 100%;
  border-radius: 6px;
  transition: width 1s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.pareto-row__count {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.pareto-row__pct {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
}
.pareto-row__acum {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--accent);
  text-align: right;
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .pareto-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
  }
  .pareto-row__bar-wrap { grid-column: 1; height: 16px; }
  .pareto-row__count, .pareto-row__pct, .pareto-row__acum {
    text-align: left;
    display: inline-block;
    margin-right: 14px;
  }
}

/* Lectura editorial */
.calidad-insights {
  background:
    radial-gradient(ellipse 50% 100% at 100% 50%, rgb(var(--accent-rgb) / 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025) 0%, rgb(var(--ink-rgb) / 0.005) 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  border-radius: 16px;
  padding: 18px 22px;
}
.calidad-insights__head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 8px;
}
.calidad-insights__head svg {
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgb(var(--accent-rgb) / 0.4));
}
.calidad-insights__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-dim, var(--text-2));
  letter-spacing: 0.005em;
}

/* ════════════════════════════════════════════════════════════════════════
   KANBAN — restyle con lenguaje visual de Mi día (lima mono + Fraunces)
   ════════════════════════════════════════════════════════════════════════ */
.kanban-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 !important;
  border: none !important;
}
.kanban-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  text-transform: none !important;
  margin: 0 !important;
}
.kanban-sub {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* Tablero */
.kanban {
  gap: 14px !important;
}
.kanban-col {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.03) 0%, rgb(var(--ink-rgb) / 0.008) 100%) !important;
  border: 1px solid rgb(var(--ink-rgb) / 0.08) !important;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.25s !important;
}
.kanban-col::before {
  /* Strap superior colorido por estado */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgb(var(--ink-rgb) / 0.1);
  opacity: 0.8;
}
.kanban-col[data-estado="borrador"]::before    { background: linear-gradient(90deg, var(--muted), rgba(139,149,163,0.4)); }
.kanban-col[data-estado="programado"]::before  { background: linear-gradient(90deg, var(--info), rgb(var(--info-rgb) / 0.4)); }
.kanban-col[data-estado="revision"]::before    { background: linear-gradient(90deg, var(--warning), rgb(var(--warning-rgb) / 0.4)); }
.kanban-col[data-estado="aprobado"]::before    { background: linear-gradient(90deg, var(--success), rgb(var(--success-rgb) / 0.4)); }
.kanban-col[data-estado="publicado"]::before   { background: linear-gradient(90deg, var(--accent), rgb(var(--accent-rgb) / 0.4)); }
.kanban-col[data-estado="rechazado"]::before   { background: linear-gradient(90deg, var(--danger), rgb(var(--danger-rgb) / 0.4)); }
.kanban-col[data-estado="archivado"]::before   { background: linear-gradient(90deg, var(--info), rgb(var(--info-rgb) / 0.4)); }

.kanban-col.is-dropzone {
  border-color: rgb(var(--accent-rgb) / 0.4) !important;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.08) 0%, rgb(var(--accent-rgb) / 0.02) 100%) !important;
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.32), 0 12px 32px -12px rgb(var(--accent-rgb) / 0.2) !important;
}

/* Header de columna: eyebrow CAP + Fraunces + count */
.kanban-col .kanban-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.kanban-col .kanban-header .kanban-dot {
  width: 8px !important; height: 8px !important;
  flex-shrink: 0;
}
.kanban-col .kanban-header .kanban-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.kanban-col[data-estado="publicado"] .kanban-header .kanban-title { color: var(--accent) !important; }
.kanban-col[data-estado="aprobado"] .kanban-header .kanban-title { color: var(--success) !important; }
.kanban-col[data-estado="revision"] .kanban-header .kanban-title { color: var(--warm-amber) !important; }
.kanban-col[data-estado="rechazado"] .kanban-header .kanban-title { color: var(--danger) !important; }
.kanban-col[data-estado="programado"] .kanban-header .kanban-title { color: var(--info) !important; }

.kanban-count {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  background: rgb(var(--ink-rgb) / 0.06) !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  margin-left: auto !important;
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
}

/* Body de columna */
.kanban-body {
  padding: 12px !important;
  gap: 10px !important;
}

/* Botón "Nueva tarjeta" más sutil */
.kanban-add {
  margin: 8px 12px 12px !important;
  padding: 11px !important;
  border-radius: 10px !important;
  border: 1px dashed rgb(var(--ink-rgb) / 0.12) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-family: var(--font-ui);
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.kanban-add:hover {
  border-color: rgb(var(--accent-rgb) / 0.4) !important;
  color: var(--accent) !important;
  background: rgb(var(--accent-rgb) / 0.04) !important;
}

/* Cards dentro del Kanban */
.kanban-body .card {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.035) 0%, rgb(var(--ink-rgb) / 0.012) 100%) !important;
  border: 1px solid rgb(var(--ink-rgb) / 0.1) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.20s !important;
}
.kanban-body .card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--accent-rgb) / 0.32) !important;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.45) !important;
}
.kanban-body .card-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  color: var(--text) !important;
}
.kanban-body .card-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  color: var(--muted) !important;
  letter-spacing: 0.02em;
}

/* Drag-and-drop visual */
.card.is-dragging {
  opacity: 0.35 !important;
  transform: rotate(-2deg) scale(0.97) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 16px 36px rgb(var(--accent-rgb) / 0.2) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   EQUIPO / PERSONAS — refinar para que use mismo lenguaje
   ════════════════════════════════════════════════════════════════════════ */
.equipo-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.equipo-sub {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  color: var(--muted) !important;
}
.equipo-section-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.equipo-pill {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  background: rgb(var(--accent-rgb) / 0.14);
  color: var(--accent);
  padding: 2px 9px;
  border-radius: 99px;
  margin-left: 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   EQUIPO TABS — barra de navegación entre Personas / Actividad / Asistencias
   ════════════════════════════════════════════════════════════════════════ */
.equipo-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 12px;
  width: fit-content;
}
.equipo-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.18s, color 0.18s;
}
.equipo-tab:hover { color: var(--text); background: rgb(var(--ink-rgb) / 0.04); }
.equipo-tab--active {
  background: rgb(var(--accent-rgb) / 0.14);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.28) inset;
}
.equipo-tab svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════
   PLANIFICACIÓN — tabs funcionales (una sola columna activa a la vez, full-width)
   Auditoría 2026-05: antes la vista mostraba SIEMPRE las 2 cols y los tabs
   solo cambiaban el highlight, lo que era confuso ("hago click y no pasa nada").
   ════════════════════════════════════════════════════════════════════════ */
.planif-split {
  display: block;
}
.planif-split__col {
  display: none;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025) 0%, rgb(var(--ink-rgb) / 0.005) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 16px;
  padding: 20px 22px;
  min-height: 200px;
}
.planif-split__col--active {
  display: block;
  border-color: rgb(var(--accent-rgb) / 0.2);
  animation: planifColFadeIn 0.25s ease-out;
}
@keyframes planifColFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.planif-split__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
}
.planif-split__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   MI JORNADA — layout en 2 columnas (acción + histórico lateral)
   ════════════════════════════════════════════════════════════════════════ */
.jornada-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 22px;
  align-items: start;
}
.jornada-col { min-width: 0; }
.jornada-col--side {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.03) 0%, rgb(var(--ink-rgb) / 0.008) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 16px;
  padding: 18px 20px;
  max-height: 80vh;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .jornada-layout { grid-template-columns: 1fr; }
  .jornada-col--side { max-height: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   LIVE PULSE STRIP — componente reusable de actividad en vivo
   Se usa en Mi día (debajo de stats), Noticias, Kanban, Planificación.
   3 secciones: equipo online + última acción + pulso vital del sistema.
   ════════════════════════════════════════════════════════════════════════ */

@keyframes liveStripShimmer {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(250%); }
}

/* AVATARES del equipo */

/* Sub texto (segundo renglón) */

/* Texto de "última acción" */

/* Health pulse */

/* ════════════════════════════════════════════════════════════════════════
   AI BRIEF — panel "unicorn-app" del lado derecho del hero
   Glassmorphism + gradiente animado + glow + tipografía mixta.
   Es el diferencial visual y de producto. Llena el espacio antes vacío.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   AI GAUGE WIDGET — el corazón central del hero. Gauge circular animado
   + 3 KPIs computados en tiempo real + lectura editorial AI.
   ════════════════════════════════════════════════════════════════════════ */

@keyframes gaugeWidgetGlow {
  0%   { transform: translate(0,0) scale(1); opacity: 0.5; }
  100% { transform: translate(-40%, 30%) scale(1.3); opacity: 0.9; }
}

/* GAUGE circular */

#ai-gauge-progress {
  transition: stroke-dasharray 1.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 3 KPIs */

/* KPIs unificados: misma paleta lima con sutil variación de saturación */

/* En layouts más anchos, KPIs y gauge se acomodan side-by-side */

@keyframes aiBriefGlow {
  0%   { transform: translate(0,0) scale(1);    opacity: 0.5; }
  100% { transform: translate(-30%, 20%) scale(1.2); opacity: 0.8; }
}

/* Header del Brief */

@keyframes sparkleSpin {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(180deg) scale(1.15); }
}

/* Lista de insights */

/* Paleta semafórica restringida — lima por defecto, ámbar/rojo solo cuando hace falta */

/* Loading inicial */

@keyframes aiBriefDot {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50%      { transform: scale(1.2); opacity: 1; }
}

/* Footer */

/* Ocultar el reloj viejo (ahora vive dentro de .ai-brief) */

/* ════════════════════════════════════════════════════════════════════════
   NEWS TICKER — banda horizontal scrolling tipo CNN/Bloomberg
   Va arriba del hero de Mi día. Loop infinito sin saltos (duplica contenido).
   ════════════════════════════════════════════════════════════════════════ */
.news-ticker {
  display: flex;
  align-items: stretch;
  margin-bottom: 18px;
  /* v3: ticker fondo neutro (era naranja CNN). Border sutil. */
  background: linear-gradient(90deg, rgb(var(--ink-rgb) / 0.04) 0%, rgb(var(--ink-rgb) / 0.015) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 99px;
  overflow: hidden;
  height: 44px;
}
/* v3 (2026-05-27): EN VIVO ya no es fill lima sólido. Dot lima pulsante + texto
   blanco. Mismo significado, sin saturar verde en cabecera. */
.news-ticker__label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: transparent;
  color: var(--text, var(--text));
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  white-space: nowrap;
  flex-shrink: 0;
}
.news-ticker__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: edPulseDot 1.4s ease-in-out infinite;
}
.news-ticker__viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.news-ticker__viewport::before,
.news-ticker__viewport::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.news-ticker__viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgb(var(--bg-rgb) / 0.95), transparent);
}
.news-ticker__viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgb(var(--bg-rgb) / 0.95), transparent);
}
.news-ticker__track {
  display: inline-flex;
  align-items: center;
  height: 100%;
  gap: 0;
  animation: tickerScroll 90s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.news-ticker:hover .news-ticker__track {
  animation-play-state: paused;
}
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.news-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text, var(--text));
  cursor: pointer;
  transition: color 0.18s;
  position: relative;
}
.news-ticker__item:hover { color: var(--accent, var(--accent)); }
.news-ticker__item::before {
  content: "•";
  color: var(--warm-coral, var(--warning));
  font-size: 18px;
  line-height: 0;
}
.news-ticker__item:first-child::before { display: none; }
.news-ticker__item-zona {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 8px;
  border-radius: 99px;
  background: rgb(var(--ink-rgb) / 0.06);
}

/* ════════════════════════════════════════════════════════════════════════
   STAT STRIP — 4 stat cards con icono + número + delta
   ════════════════════════════════════════════════════════════════════════ */

.stat-card {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.035) 0%, rgb(var(--ink-rgb) / 0.012) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.09);
  border-radius: 22px;
  padding: 20px 22px;
  cursor: pointer;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  /* Big colored blob top-right corner */
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.10;
  filter: blur(20px);
}
/* Paleta refinada: solo lima por default, las otras se reservan para semántica */
/* Blob suave lima en todas — antes era multicolor */
.stat-card::before { background: var(--accent, var(--accent)); }

.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--ink-rgb) / 0.2);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55);
}
/* Hover unificado en lima */
.stat-card:hover { border-color: rgb(var(--accent-rgb) / 0.4); }

/* Todos los iconos en lima — consistencia visual */

/* Números siempre lima — uniforme y profesional */

/* Sparkline mini abajo del stat card */

/* ════════════════════════════════════════════════════════════════════════
   PORTADA DEL DÍA — card grande tipo "Position Prediction" del trading app
   ════════════════════════════════════════════════════════════════════════ */

/* Side alerts (2 cards apiladas a la derecha) */

/* ════════════════════════════════════════════════════════════════════════
   MI DÍA PRO — Overhaul visual estilo dashboard moderno
   Inspirado en: Restro (cálido + glass), Trading apps (pills chunky + live
   indicator), IndustryOS (stat cards con delta + area chart gradient),
   Fraud Detection (mix de chart types + status pills).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Nueva paleta extendida — añade variedad sin cambiar la base lima */
  --warm-coral:        var(--warning);
  --warm-coral-soft:   rgb(var(--warning-rgb) / 0.14);
  --warm-coral-border: rgb(var(--warning-rgb) / 0.32);
  --warm-amber:        var(--warning);
  --warm-amber-soft:   rgb(var(--warning-rgb) / 0.14);
  --warm-amber-border: rgb(var(--warning-rgb) / 0.32);
  --cool-violet:       var(--info);
  --cool-violet-soft:  rgb(var(--info-rgb) / 0.14);
  --cool-violet-border:rgb(var(--info-rgb) / 0.32);
  --cool-cyan:         var(--info);
  --cool-cyan-soft:    rgb(var(--info-rgb) / 0.14);
  --cool-cyan-border:  rgb(var(--info-rgb) / 0.32);

  --card-radius-xl: 22px;
  --card-radius-pill: 999px;
  --card-shadow-soft: 0 10px 32px -16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.18);
  --card-shadow-hover: 0 18px 48px -16px rgba(0,0,0,0.65), 0 0 0 1px rgb(var(--ink-rgb) / 0.06);
}

/* ─── HERO unified: contenedor transparente con 3 cards independientes ─── */

/* La izquierda ahora es un card también — matching las otras dos */

@keyframes midiaContentGlow {
  0%   { transform: translate(0,0) scale(1); opacity: 0.6; }
  100% { transform: translate(-30%, -20%) scale(1.2); opacity: 1; }
}

/* ─── Stats del hero — refinados para el card más compacto ─── */

/* Delta pill (verde/rojo según trend) */

/* ─── PULSE CHIPS: estilo chunky tipo trading pills ─── */

#pulse-urgent::before  { background: linear-gradient(90deg, var(--danger), var(--warm-coral, var(--warning))); }
#pulse-event::before   { background: linear-gradient(90deg, var(--cool-cyan, var(--info)), var(--cool-violet, var(--info))); }
#pulse-pipeline::before{ background: linear-gradient(90deg, var(--accent, var(--accent)), var(--success)); }

/* ─── PULSO EDITORIAL: 4 cards más grandes con mejor visual ─── */

/* Tintar el SVG de cada chart con su color de marca */

/* ─── PULSE eyebrow más fancy ─── */

/* ─── Color cards más vibrantes (las 3 cards de colores arriba) ─── */
.color-card {
  border-radius: var(--card-radius-xl) !important;
  padding: 22px 22px 20px !important;
  transition: transform 0.22s, box-shadow 0.25s !important;
  position: relative;
  overflow: hidden;
}
.color-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}
.color-card-num {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 42px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin: 10px 0 8px !important;
}

/* ─── Mejorar el reloj del hero ─── */

/* ─── BIG ACTIONS: más punchy, estilo trading pills ─── */

/* ─── Tarjetas Mi día — wrapper de Agenda, Noticias, Idea del día, Sala ─── */

/* ════════════════════════════════════════════════════════════════════════
   MI DÍA MOBILE — Grid 2x3 estilo Life is Green (acciones grandes)
   ════════════════════════════════════════════════════════════════════════ */
.mm-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 22px;
}
.mm-action {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.035) 0%, rgb(var(--ink-rgb) / 0.008) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 18px;
  padding: 22px 16px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
  min-height: 130px;
  position: relative;
  overflow: hidden;
}
.mm-action:active {
  transform: scale(0.97);
  background: rgb(var(--ink-rgb) / 0.06);
}
.mm-action__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  margin-bottom: 4px;
}
.mm-action__icon svg {
  width: 32px;
  height: 32px;
}
.mm-action__label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.mm-action__sub {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
}

/* Card de JORNADA destacada (estilo "Cobrar" de Life is Green) */
.mm-action--jornada {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.2) 0%, rgb(var(--accent-rgb) / 0.08) 100%);
  border-color: rgb(var(--accent-rgb) / 0.45);
  position: relative;
}
.mm-action--jornada .mm-action__icon { color: var(--accent); }
.mm-action--jornada .mm-action__label { color: var(--accent); font-size: 17px; }
.mm-action--jornada .mm-action__sub { color: rgb(var(--accent-rgb) / 0.85); }

/* Cuando la jornada está ACTIVA, se vuelve aún más prominente */
.mm-action--jornada.mm-jornada-activa {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.5) 0%, rgba(154,172,58,0.35) 100%);
  border-color: var(--accent);
  box-shadow: 0 8px 24px -8px rgb(var(--accent-rgb) / 0.45);
}
.mm-action--jornada.mm-jornada-activa .mm-action__label,
.mm-action--jornada.mm-jornada-activa .mm-action__sub {
  color: var(--on-accent);
}
.mm-action--jornada.mm-jornada-activa .mm-action__icon { color: var(--on-accent); }

/* Mobile stats line refinado */
.mm-stats-line {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025) 0%, rgb(var(--ink-rgb) / 0.005) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 14px;
  margin-bottom: 20px;
}
.mm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mm-stat strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.mm-stat span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive fixes para todas las vistas nuevas
   El sidebar ya se vuelve bottom-nav (app.css). Acá arreglamos el contenido.
   Breakpoints: 980px (tablet), 720px (mobile), 480px (phone)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Reservar espacio para el bottom-nav móvil ─── */
@media (max-width: 760px) {
  .main {
    padding-bottom: 100px !important; /* deja espacio para el bottom-nav */
  }
  .topbar {
    padding: 12px 14px !important;
  }
  .page-title {
    font-size: 22px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MI DÍA — Hero stack vertical en móvil
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* En pantallas muy chicas, esconder el ticker — ocupa espacio
     valioso y la info ya está en el stat strip de abajo */
  .news-ticker { display: none !important; }
}

@media (max-width: 720px) {
  /* News ticker más compacto en mobile mediano */
  .news-ticker {
    height: 38px;
    border-radius: 99px;
    margin-bottom: 12px;
  }
  .news-ticker__label {
    padding: 0 12px;
    font-size: 9px;
  }
  .news-ticker__item {
    font-size: 12.5px;
    padding: 0 16px;
  }

  /* AI Brief en móvil */
  
  
  
  
  
  

  /* AI Gauge widget en móvil */
  
  
  
  
  
}

/* Live pulse strip ya tiene reglas mobile pero refinamos */

/* Stat strip de Mi día */
@media (max-width: 720px) {
  
  .stat-card { padding: 14px 16px !important; }
  
  
  
}

/* Portada del día + alertas laterales */

/* Color cards de Mi día */
@media (max-width: 720px) {
  .color-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .color-card { padding: 18px 20px !important; }
  .color-card-num { font-size: 36px !important; }
}

/* Big actions de Mi día */

/* ════════════════════════════════════════════════════════════════════════
   CALIDAD EDITORIAL — Six Sigma mobile
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .calidad-header { gap: 10px; margin-bottom: 16px; }
  .calidad-h2 { font-size: 22px; }
  .calidad-sub { font-size: 13px; }
}

@media (max-width: 720px) {
  /* Pareto chart en mobile ya es responsive (grid -> 1col) */
  .calidad-pareto { padding: 18px 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   NOTICIAS — flat list mobile
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .news-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .news-search {
    width: 100% !important;
  }
  .news-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .news-tabs::-webkit-scrollbar { display: none; }
  .news-tab { flex-shrink: 0; }

  /* Pipeline pill que no choque con el resto */
  .pipeline-status-pill {
    font-size: 10.5px;
    padding: 5px 10px;
  }

  /* Newsroom strip mobile */
  .newsroom-strip {
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .newsroom-strip__total-num { font-size: 32px; }
  .newsroom-strip__total-label { font-size: 12.5px; }

  /* News card en mobile: padding reducido */
  .news-card-pro { padding: 14px 16px !important; }
  .news-card-pro--lead { padding: 18px 18px !important; }
  .news-card-titulo { font-size: 15.5px !important; }
  .news-card-pro--lead .news-card-titulo { font-size: 18px !important; }
  .news-card-resumen-ejecutivo,
  .news-card-resumen { font-size: 12.5px !important; }
  .news-card-footer .btn { font-size: 11.5px; padding: 6px 11px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PLANIFICACIÓN — split view mobile
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .planif-split__col { padding: 16px 18px; }
  .planif-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .planif-tab { flex-shrink: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   EQUIPO — tabs scrollables + listas compactas
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .equipo-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .equipo-tabs::-webkit-scrollbar { display: none; }
  .equipo-tab { flex-shrink: 0; padding: 9px 12px; font-size: 12px; }
  .equipo-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .equipo-roles-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .roles-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MI JORNADA — el split 2-col se cae a 1-col automáticamente <900px
   pero le damos un toque más prolijo
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .jornada-col--side {
    max-height: none !important;
    padding: 14px 16px;
  }
  .jornada-tipo-opt {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .jornada-tipo-opt svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MODALES — full-screen amigable en mobile
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-overlay .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto;
  }
  .modal-overlay.open .modal {
    animation: modalSlideUp 0.28s ease-out;
  }
}
@keyframes modalSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   BOTONES — touch targets mínimos 44x44 en mobile
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .btn:not(.btn-sm):not(.btn-ghost) {
    min-height: 44px;
    padding: 11px 18px;
  }
  /* FAB chat más arriba para no chocar con el bottom-nav */
  
  /* FAB reportar */
  .fab-report {
    bottom: 100px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Accesibilidad: reduce motion
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DICTAR NOTA — vista para periodistas en campo
   Pantalla limpia con textarea grande + tip de dictado + IA processor
   ════════════════════════════════════════════════════════════════════════ */

.dictar-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 4px 32px;
}

.dictar-header {
  margin-bottom: 22px;
}

.dictar-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 6px;
}

.dictar-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}

.dictar-pane { display: none; }
.dictar-pane--active { display: block; animation: dictarFadeIn 0.24s ease; }

@keyframes dictarFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tip — instrucción de cómo usar el dictado nativo del celular */
.dictar-tip {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgb(var(--accent-rgb) / 0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim, var(--text));
}

.dictar-tip__icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

.dictar-tip__body strong { color: var(--text); font-weight: 600; }

/* Textarea grande para dictado */
.dictar-input {
  width: 100%;
  min-height: 320px;
  padding: 18px 20px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  resize: vertical;
  transition: border-color 0.18s, background 0.18s;
}

.dictar-input::placeholder {
  color: var(--muted);
  font-style: italic;
  opacity: 0.75;
}

.dictar-input:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.42);
  background: rgb(var(--ink-rgb) / 0.04);
}

.dictar-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 0 4px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-ui);
}

.dictar-meta__hint { opacity: 0.7; }

/* Actions footer */
.dictar-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}

.dictar-process-spinner {
  display: inline-block;
  animation: dictarSpin 0.9s linear infinite;
  font-size: 16px;
}

@keyframes dictarSpin {
  to { transform: rotate(360deg); }
}

/* PANE 2: resultado IA */
.dictar-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.dictar-result-card {
  padding: 18px 20px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 14px;
  position: relative;
}

.dictar-result-card--cuerpo,
.dictar-result-card--citas {
  grid-column: 1 / -1;  /* full width */
}

.dictar-result-card--titulo {
  background: rgb(var(--accent-rgb) / 0.04);
  border-color: rgb(var(--accent-rgb) / 0.22);
}

.dictar-result-eyebrow {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.dictar-result-card--titulo .dictar-result-eyebrow {
  color: var(--accent);
}

.dictar-result-value {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
}

.dictar-result-card--titulo .dictar-result-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.dictar-result-card--lead .dictar-result-value {
  font-size: 16px;
  color: var(--text);
  font-style: italic;
}

.dictar-result-value--cuerpo {
  white-space: normal;
}

.dictar-cita {
  margin: 0 0 12px;
  padding: 12px 16px;
  background: rgb(var(--ink-rgb) / 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text);
}

.dictar-cita:last-child { margin-bottom: 0; }

.dictar-empty {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  opacity: 0.75;
}

/* Mobile responsive */
@media (max-width: 720px) {
  .dictar-container {
    padding: 4px 0 24px;
  }
  .dictar-title { font-size: 24px; }
  .dictar-sub { font-size: 13px; }
  .dictar-tip {
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
  }
  .dictar-input {
    min-height: 260px;
    font-size: 16px;       /* iOS no zoomea con 16px+ */
    padding: 14px 16px;
  }
  .dictar-result-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dictar-result-card { padding: 14px 16px; }
  .dictar-result-card--titulo .dictar-result-value { font-size: 18px; }
  .dictar-actions {
    flex-direction: column-reverse;
  }
  .dictar-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CENTRO DE AYUDA — estética iOS-clean
   Espacios generosos, tipografías claras, sin saturación visual.
   ════════════════════════════════════════════════════════════════════════ */

#view-ayuda {
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 0 80px;
}

/* HERO */
.ayuda-hero {
  padding: 32px 0 28px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
  margin-bottom: 36px;
}
.ayuda-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 14px;
}
.ayuda-hero__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 14px;
}
.ayuda-hero__sub {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 580px;
  margin: 0;
}

/* TOC (índice) */
.ayuda-toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px;
  background: rgb(var(--ink-rgb) / 0.02);
  border: 1px solid rgb(var(--ink-rgb) / 0.05);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 48px;
}
.ayuda-toc__item {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.18s ease, color 0.18s ease;
}
.ayuda-toc__item:hover {
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--text);
}

/* SECCIONES */
.ayuda-sections {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.ayuda-section {
  position: relative;
  padding-top: 8px;
  scroll-margin-top: 24px;
}
.ayuda-section__num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 1px;
  margin-bottom: 12px;
  opacity: 0.9;
}
.ayuda-section__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 14px;
}
.ayuda-section__lead {
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 660px;
}
.ayuda-section--featured {
  background: linear-gradient(180deg, rgb(var(--info-rgb) / 0.04), transparent 70%);
  border: 1px solid rgb(var(--info-rgb) / 0.18);
  border-radius: 22px;
  padding: 32px 28px;
}
.ayuda-section--featured .ayuda-section__num {
  color: var(--info);
}

/* HOWTO blocks */
.ayuda-howto {
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 18px 0;
}
.ayuda-howto__head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--accent);
  margin-bottom: 12px;
}
.ayuda-howto__list {
  margin: 0;
  padding-left: 22px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.7;
}
.ayuda-howto__list li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.ayuda-howto__list li::marker {
  color: var(--accent);
  font-weight: 600;
}
.ayuda-howto__list strong {
  color: var(--text);
  font-weight: 600;
}
.ayuda-howto__list code {
  font-family: 'SF Mono', Consolas, monospace;
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12.5px;
}

/* TIPS — bloques amarillos sutiles */
.ayuda-tip {
  background: rgba(232,192,80,0.06);
  border-left: 3px solid #e8c050;
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.ayuda-tip strong {
  color: var(--text);
  font-weight: 600;
}

/* ROLES (en sección equipo) */
.ayuda-roles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}
.ayuda-role {
  padding: 14px 18px;
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.05);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}
.ayuda-role strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 6px;
}

/* CTAs iOS-style */
.ayuda-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.18s ease;
  margin-top: 8px;
}
.ayuda-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(var(--accent-rgb) / 0.28);
}
.ayuda-cta:active {
  transform: translateY(0);
}

/* Footer del centro de ayuda */
.ayuda-footer {
  margin-top: 64px;
  padding: 36px;
  text-align: center;
  background: rgb(var(--ink-rgb) / 0.02);
  border: 1px solid rgb(var(--ink-rgb) / 0.05);
  border-radius: 22px;
}
.ayuda-footer__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--text);
  margin-bottom: 8px;
}
.ayuda-footer__sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* Mobile */
@media (max-width: 760px) {
  #view-ayuda {
    padding: 8px 14px 80px;
  }
  .ayuda-hero {
    padding-top: 18px;
  }
  .ayuda-toc {
    grid-template-columns: 1fr;
    padding: 8px;
  }
  .ayuda-sections {
    gap: 40px;
  }
  .ayuda-section--featured {
    padding: 22px 18px;
    border-radius: 16px;
  }
  .ayuda-howto {
    padding: 16px 18px;
  }
}

/* ============================================================
   BRIEFING DEL DÍA — modal con cards de historias sugeridas
   Estilo: iOS-clean, espacioso, jerarquía editorial clara.
   ============================================================ */
.briefing-modal-content .modal-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.07);
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.04) 0%, transparent 100%);
  position: relative;
}
.briefing-modal-content .modal-header .modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
}
/* "EDICIÓN DEL DÍA" eyebrow sobre el título */
.briefing-modal-content .modal-header::before {
  content: 'EDICIÓN DEL DÍA';
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 4px;
}
.briefing-modal-content .modal-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--text);
}
.briefing-modal-sub {
  font-size: 13px;
  color: #a8b4bc;            /* subido de muted */
  line-height: 1.5;
  margin-top: 2px;
  max-width: 92%;
}

/* Resumen editorial del día */
.briefing-resumen {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.06), rgb(var(--accent-rgb) / 0.02));
  border-left: 3px solid var(--accent);
  padding: 15px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #d8e2e8;            /* más claro que antes */
  margin-bottom: 20px;
  font-style: italic;
}

/* Loader animado de 3 puntos */
.briefing-loader {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 40px 0 12px;
}
.briefing-loader-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: briefingDot 1.4s ease-in-out infinite;
}
.briefing-loader-dot:nth-child(2) { animation-delay: 0.2s; }
.briefing-loader-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes briefingDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* ── Portada: resumen visual de la edición ── */
.brf-portada {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 12px;
}
.brf-portada__main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.brf-portada__num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.brf-portada__label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.brf-portada__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brf-portada__analyzed {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.7;
}
.brf-portada__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brf-portada__cat {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cat-color);
  background: color-mix(in srgb, var(--cat-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-color) 25%, transparent);
}

/* Card de historia sugerida */
.briefing-historia {
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-left: 3px solid var(--cat-color, rgb(var(--ink-rgb) / 0.2));
  border-radius: 14px;
  padding: 18px 20px 16px;
  margin-bottom: 14px;
  transition: all 0.2s ease;
  overflow: hidden;
}
.briefing-historia:hover {
  background: rgb(var(--ink-rgb) / 0.04);
  border-top-color: rgb(var(--ink-rgb) / 0.12);
  border-right-color: rgb(var(--ink-rgb) / 0.12);
  border-bottom-color: rgb(var(--ink-rgb) / 0.12);
}
.briefing-historia--working {
  opacity: 0.75;
  pointer-events: none;
}
/* Spinner genérico reutilizable */
@keyframes _spin { to { transform: rotate(360deg); } }
.spin {
  display: inline-block;
  animation: _spin 0.7s linear infinite;
  transform-origin: center;
}
.briefing-historia--done {
  border-left-color: var(--accent) !important;
  background: rgb(var(--accent-rgb) / 0.04);
}

.briefing-historia-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 11px;
  flex-wrap: wrap;
}

/* Número de historia (01, 02, ...) */
.brf-num {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cat-color);
  opacity: 0.9;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.briefing-historia-cat {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--text-dim, var(--text-2));
}
.briefing-historia-cat--politica   { background: rgb(var(--info-rgb) / 0.15); color: #9d8cff; }
.briefing-historia-cat--seguridad  { background: rgba(255, 99, 99, 0.15);  color: #ff8080; }
.briefing-historia-cat--cultura    { background: rgba(255, 170, 80, 0.15); color: #ffc080; }
.briefing-historia-cat--economia   { background: rgba(80, 200, 140, 0.15); color: #80d8a8; }
.briefing-historia-cat--comunidad  { background: rgba(80, 180, 220, 0.15); color: #80c8e0; }
.briefing-historia-cat--deporte    { background: rgba(220, 80, 180, 0.15); color: #e890c8; }
.briefing-historia-cat--ambiente   { background: rgba(120, 200, 100, 0.15); color: #98d480; }

.briefing-historia-fuentes-count {
  color: var(--muted, var(--text-3));
  font-size: 11px;
  font-feature-settings: 'tnum';
}

.briefing-historia-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  line-height: 1.28;
  font-weight: 600;
  color: var(--text);             /* más brillante = más legible */
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.briefing-historia-justif {
  font-size: 14px;
  line-height: 1.6;
  color: #c8d4dc;             /* subido de #b4bec6 */
  margin: 0 0 12px;
}

/* Ángulo editorial — el insight clave, más prominente */
.briefing-historia-angulo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-left: 2px solid var(--cat-color, var(--accent));
  border-radius: 8px;
}
.brf-angulo-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cat-color, var(--accent));
  opacity: 0.9;
}
.brf-angulo-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: #d4dde4;             /* subido de muted */
  font-style: italic;
}

.briefing-historia-fuentes-toggle {
  margin-bottom: 10px;
}
.briefing-historia-fuentes-toggle .link-btn {
  background: none;
  border: none;
  color: var(--muted, var(--text-3));
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.briefing-historia-fuentes-toggle .link-btn:hover {
  color: var(--accent);
}

.briefing-historia-fuentes-list {
  list-style: none;
  padding: 8px 0 8px 0;
  margin: 0 0 12px;
  border-top: 1px dashed rgb(var(--ink-rgb) / 0.06);
}
.briefing-historia-fuentes-list li {
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.4;
}
.briefing-historia-fuentes-list a {
  color: var(--text-dim, var(--text-2));
  text-decoration: none;
  flex: 1;
}
.briefing-historia-fuentes-list a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.briefing-fuente-source {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, var(--text-3));
  white-space: nowrap;
}

.briefing-historia-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}
.briefing-historia-actions .btn-primary {
  flex: 1;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .briefing-modal-content {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .briefing-historia {
    padding: 16px 14px;
  }
  .briefing-historia-titulo {
    font-size: 17px;
  }
  .briefing-historia-actions {
    flex-direction: column;
    gap: 6px;
  }
  .briefing-historia-actions .btn {
    width: 100%;
  }
}

/* ============================================================
   MODAL: detalle administrativo de org (Sarance Admin)
   Solo metadata operativa, NO contenido editorial del cliente
   ============================================================ */
.sarance-admin-org-card {
  cursor: pointer;
}
.sarance-admin-org-card__more {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.sarance-admin-org-card:hover .sarance-admin-org-card__more {
  opacity: 1;
}

.org-detail-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
}
.org-detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.org-detail-section h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.org-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.org-detail-cell {
  padding: 10px 12px;
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.05);
  border-radius: 10px;
}
.org-detail-cell__label {
  font-size: 10.5px;
  color: var(--muted, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-bottom: 4px;
}
.org-detail-cell__val {
  font-family: var(--font-display, Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text, var(--text));
  letter-spacing: -0.005em;
}
.org-detail-cell__val--accent {
  color: var(--accent);
}
.org-detail-cell__val--warn {
  color: #ff8080;
}

.error-context-pill {
  display: inline-block;
  font-size: 11px;
  background: rgba(255, 200, 80, 0.1);
  color: #ffc94d;
  border: 1px solid rgba(255, 200, 80, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  font-family: ui-monospace, monospace;
}

.org-detail-privacy {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgb(var(--info-rgb) / 0.06);
  border: 1px solid rgb(var(--info-rgb) / 0.18);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim, var(--text-2));
}
.org-detail-privacy strong {
  color: #b5acff;
  display: block;
  margin-bottom: 4px;
}

/* ============================================================
   EQUIPO EN VIVO — panel arriba de la vista Actividad
   Muestra quién tiene jornada activa AHORA con timer corriendo
   ============================================================ */
.equipo-live-panel {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.06), rgb(var(--accent-rgb) / 0.01));
  border: 1px solid rgb(var(--accent-rgb) / 0.2);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.equipo-live-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.equipo-live-panel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.6);
  animation: equipoLiveDot 1.6s ease-in-out infinite;
}
@keyframes equipoLiveDot {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.5); }
  50% { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0); }
}
.equipo-live-panel__head h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin: 0;
  flex: 1;
}
.equipo-live-panel__refresh {
  font-size: 10.5px;
  color: var(--muted, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.equipo-live-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.equipo-live-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 12px;
  transition: all 0.18s ease;
}
.equipo-live-card:hover {
  background: rgb(var(--ink-rgb) / 0.06);
  border-color: rgb(var(--accent-rgb) / 0.25);
}
.equipo-live-card__avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--on-accent);
  font-family: var(--font-display, Georgia, serif);
  flex-shrink: 0;
}
.equipo-live-card__pulse {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg, var(--surface));
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.6);
  animation: equipoLivePulse 1.6s ease-in-out infinite;
}
@keyframes equipoLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.6); }
  50% { box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0); }
}
.equipo-live-card__info {
  flex: 1;
  min-width: 0;
}
.equipo-live-card__nombre {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.equipo-live-card__meta {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  margin-top: 2px;
}
.equipo-live-card__timer {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  font-feature-settings: 'tnum';
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .equipo-live-panel__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BOTÓN DE JORNADA EN TOPBAR — siempre visible
   Estados:
   - idle: gris, "Marcar entrada"
   - active: lima sólido, pulsa, muestra timer
   ============================================================ */
.topbar-jornada-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1.5px solid;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 6px;
  white-space: nowrap;
}

/* Estado IDLE: no marcaste entrada hoy */
.topbar-jornada-btn--idle {
  border-color: rgb(var(--ink-rgb) / 0.15);
  color: var(--text-dim, var(--text-2));
  background: rgb(var(--ink-rgb) / 0.02);
}
.topbar-jornada-btn--idle:hover {
  border-color: rgb(var(--accent-rgb) / 0.4);
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.04);
}

/* Estado ACTIVE v3 (2026-05-27): antes lima SÓLIDO grande en topbar producía
   verde oscuro fuerte. Ahora dark con border lima + dot lima pulsante + texto
   lima. Misma señal de "estoy activo" sin saturar la cabecera. */
.topbar-jornada-btn--active {
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgb(var(--ink-rgb) / 0.04);
}
.topbar-jornada-btn--active:hover {
  background: rgb(var(--accent-rgb) / 0.14);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Dot indicador (rojo en idle, verde pulsante en active) */
.topbar-jornada-btn__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Lima-mono (auditoría 2026-05): idle = muted gris quieto, active = lima pulsante.
   Eliminado el rojo agresivo de antes que parecía error. */
.topbar-jornada-btn--idle .topbar-jornada-btn__dot {
  background: rgb(var(--ink-rgb) / 0.35);
  box-shadow: 0 0 0 0 rgb(var(--ink-rgb) / 0);
  animation: none;
}
.topbar-jornada-btn--active .topbar-jornada-btn__dot {
  background: var(--accent);
  animation: tbJornadaDotActive 1.6s ease-in-out infinite;
}

@keyframes tbJornadaDotIdle {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--ink-rgb) / 0.2); }
  50% { box-shadow: 0 0 0 6px rgb(var(--ink-rgb) / 0); }
}
@keyframes tbJornadaDotActive {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Icono SVG */
.topbar-jornada-btn__icon {
  flex-shrink: 0;
  opacity: 0.85;
}

/* Timer cuando hay jornada activa */
.topbar-jornada-btn__timer {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-feature-settings: 'tnum';
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgb(var(--bg-rgb) / 0.18);
}

/* Mobile: solo icono + dot + timer (sin label) */
@media (max-width: 640px) {
  .topbar-jornada-btn {
    padding: 7px 10px;
    font-size: 12px;
  }
  .topbar-jornada-btn__label {
    display: none;
  }
  .topbar-jornada-btn--active .topbar-jornada-btn__label {
    display: none;
  }
  /* En mobile, si está activo, mostrar solo timer; si idle, mostrar solo el dot+icono */
}

@media (max-width: 380px) {
  .topbar-jornada-btn__timer {
    font-size: 11px;
  }
}

/* ============================================================
   PLAN Y FACTURACIÓN — Vista de billing con PayPhone
   ============================================================ */

.billing-hero {
  padding: 24px 0 28px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
  margin-bottom: 24px;
}
.billing-hero__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.billing-hero__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text, var(--text));
  margin: 0 0 6px;
}
.billing-hero__sub {
  font-size: 13.5px;
  color: var(--muted, var(--text-3));
  margin: 0;
  max-width: 540px;
  line-height: 1.5;
}

/* Card del plan actual */
.billing-current { margin-bottom: 32px; }
.billing-current-card {
  background: linear-gradient(135deg, rgb(var(--ink-rgb) / 0.04), rgb(var(--ink-rgb) / 0.02));
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 16px;
  padding: 24px;
}
.billing-current-card--active {
  border-color: rgb(var(--accent-rgb) / 0.2);
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.05), rgb(var(--accent-rgb) / 0.01));
}
.billing-current-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.billing-current-card__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, var(--text-3));
  font-weight: 600;
  margin-bottom: 4px;
}
.billing-current-card h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.billing-current-card__price {
  font-family: var(--font-display, Georgia, serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.02em;
  text-align: right;
}
.billing-current-card__price span {
  font-size: 14px;
  color: var(--muted, var(--text-3));
  font-weight: 400;
  margin-left: 4px;
}
.billing-current-card__msg {
  font-size: 13.5px;
  color: var(--text-dim, var(--text-2));
  line-height: 1.55;
  margin: 0;
}
.billing-current-card__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px dashed rgb(var(--ink-rgb) / 0.08);
  border-bottom: 1px dashed rgb(var(--ink-rgb) / 0.08);
  margin: 16px 0;
}
.billing-current-card__lbl {
  font-size: 10.5px;
  color: var(--muted, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 4px;
}
.billing-current-card__val {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, var(--text));
}
.billing-status-pill {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 600;
  margin-top: 4px;
}
.billing-status-pill--ok {
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent);
}
.billing-current-card__actions {
  display: flex;
  justify-content: flex-end;
}

/* Section titles */
.billing-section-title h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text, var(--text));
  letter-spacing: -0.01em;
}
.billing-section-title p {
  font-size: 13px;
  color: var(--muted, var(--text-3));
  margin: 0 0 18px;
}

/* Grid de planes */
.billing-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.billing-plan {
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s ease;
}
.billing-plan:hover {
  border-color: rgb(var(--ink-rgb) / 0.12);
  background: rgb(var(--ink-rgb) / 0.04);
}
.billing-plan--pro {
  border-color: rgb(var(--accent-rgb) / 0.3);
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.06), rgb(var(--ink-rgb) / 0.02));
}
.billing-plan--pro:hover {
  border-color: rgb(var(--accent-rgb) / 0.5);
}
.billing-plan__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 700;
  text-transform: uppercase;
}
.billing-plan__head h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin: 0 0 4px;
}
.billing-plan__price {
  margin: 8px 0 4px;
}
.billing-plan__price .price-num {
  font-family: var(--font-display, Georgia, serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--text, var(--text));
  letter-spacing: -0.02em;
}
.billing-plan--pro .price-num,
.billing-plan--pro .billing-plan__price-annual {
  color: var(--accent);
}
.billing-plan__price .price-period {
  font-size: 13px;
  color: var(--muted, var(--text-3));
  margin-left: 4px;
}
.billing-plan__price-annual {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  margin-bottom: 16px;
}
.billing-plan__features {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  flex: 1;
}
.billing-plan__features li {
  font-size: 13px;
  line-height: 1.45;
  padding: 6px 0;
  padding-left: 22px;
  position: relative;
  color: var(--text-dim, var(--text-2));
}
.billing-plan__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.billing-plan__features li strong {
  color: var(--text, var(--text));
}
.btn-block { width: 100%; }

/* Historial table */
.billing-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.billing-history-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.08);
  color: var(--muted, var(--text-3));
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.billing-history-table td {
  padding: 12px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.04);
  color: var(--text-dim, var(--text-2));
}
.billing-estado--ok     { color: var(--accent); }
.billing-estado--err    { color: #ff6b6b; }
.billing-estado--cancel { color: var(--muted, var(--text-3)); }
.billing-estado--pend   { color: #ffc94d; }

/* Modal checkout */
.checkout-summary-card {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.06), rgb(var(--accent-rgb) / 0.02));
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
}
.checkout-summary-card__plan {
  font-family: var(--font-display, Georgia, serif);
  font-size: 18px;
  color: var(--text, var(--text));
  margin-bottom: 6px;
}
.checkout-summary-card__msg {
  font-size: 13px;
  color: var(--muted, var(--text-3));
  line-height: 1.5;
}
.checkout-ciclo-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.checkout-ciclo-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1.5px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.checkout-ciclo-opt:has(input:checked) {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.06);
}
.checkout-ciclo-opt input {
  margin: 0;
  accent-color: var(--accent);
}
.checkout-ciclo-opt__label {
  display: flex;
  flex-direction: column;
}
.checkout-ciclo-opt__label strong {
  font-size: 14px;
  color: var(--text, var(--text));
  font-weight: 600;
}
.checkout-ciclo-opt__sub {
  font-size: 12px;
  color: var(--muted, var(--text-3));
  margin-top: 2px;
}
.checkout-payphone-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(100, 140, 255, 0.06);
  border: 1px solid rgba(100, 140, 255, 0.18);
  border-radius: 10px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-dim, var(--text-2));
}
.checkout-payphone-info svg {
  color: #8b9eff;
  flex-shrink: 0;
}

/* Nav badge por plan */
.nav-badge--free     { background: rgb(var(--ink-rgb) / 0.08); color: var(--muted, var(--text-3)); }
.nav-badge--pro      { background: rgb(var(--accent-rgb) / 0.15); color: var(--accent); }
.nav-badge--business { background: rgb(var(--info-rgb) / 0.18); color: #b5acff; }

/* Mobile */
@media (max-width: 760px) {
  .billing-plans-grid { grid-template-columns: 1fr; }
  .billing-current-card__details { grid-template-columns: 1fr; gap: 12px; }
  .billing-current-card__head { flex-direction: column; }
  .billing-current-card__price { text-align: left; }
  .checkout-ciclo-options { grid-template-columns: 1fr; }
}

/* Visibilidad por rol — solo owner ve el item de facturación */
body[data-role="owner"] .role-only-owner { display: flex !important; }
body:not([data-role="owner"]) .role-only-owner { display: none !important; }

/* ============================================================
   SARANCE ADMIN — Vista de plataforma (super-admin)
   Solo accesible para platform_admins (founder/soporte/finanzas).
   ============================================================ */

/* Pill especial del nav item "Sarance Admin" */
.platform-admin-pill {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
  color: var(--on-accent) !important;
  font-weight: 700 !important;
}

/* Hero de la vista */
.sarance-admin-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0 28px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
  margin-bottom: 24px;
}

.sarance-admin-hero__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}

.sarance-admin-hero__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text, var(--text));
  margin: 0 0 6px;
}

.sarance-admin-hero__sub {
  font-size: 13.5px;
  color: var(--muted, var(--text-3));
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}

.sarance-admin-hero__badge {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 20px -6px rgb(var(--accent-rgb) / 0.5);
  flex-shrink: 0;
}

/* Stats globales */
.sarance-admin-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.sarance-admin-stat {
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  transition: all 0.2s ease;
}
.sarance-admin-stat:hover {
  border-color: rgb(var(--accent-rgb) / 0.2);
  background: rgb(var(--ink-rgb) / 0.04);
}

.sarance-admin-stat--accent {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.07), rgb(var(--accent-rgb) / 0.02));
  border-color: rgb(var(--accent-rgb) / 0.2);
}

.sarance-admin-stat__num {
  font-family: var(--font-display, Georgia, serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--text, var(--text));
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-feature-settings: 'tnum';
}
.sarance-admin-stat--accent .sarance-admin-stat__num {
  color: var(--accent);
}

.sarance-admin-stat__label {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-top: 4px;
}

/* Filtros */
.sarance-admin-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.sarance-admin-filters .form-input {
  max-width: 320px;
}
.sarance-admin-filters select.form-input {
  max-width: 180px;
}

/* Grid de orgs */
.sarance-admin-orgs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.sarance-admin-org-card {
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-radius: 14px;
  padding: 18px 18px 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sarance-admin-org-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.25);
  background: rgb(var(--ink-rgb) / 0.05);
  transform: translateY(-1px);
}
.sarance-admin-org-card.org-card--inactiva {
  opacity: 0.65;
}

.sarance-admin-org-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sarance-admin-org-card__title h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}

.sarance-admin-org-slug {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  font-family: ui-monospace, monospace;
}

.sarance-admin-plan-badge {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sarance-admin-plan-badge.plan-free {
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--muted, var(--text-3));
}
.sarance-admin-plan-badge.plan-pro {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.15), rgb(var(--accent-rgb) / 0.05));
  color: var(--accent);
  border: 1px solid rgb(var(--accent-rgb) / 0.2);
}
.sarance-admin-plan-badge.plan-business {
  background: linear-gradient(135deg, rgb(var(--info-rgb) / 0.18), rgb(var(--info-rgb) / 0.06));
  color: #b5acff;
  border: 1px solid rgb(var(--info-rgb) / 0.25);
}

.sarance-admin-org-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-top: 1px dashed rgb(var(--ink-rgb) / 0.06);
  border-bottom: 1px dashed rgb(var(--ink-rgb) / 0.06);
  margin-bottom: 12px;
}

.sarance-admin-org-stat {
  text-align: center;
}
.sarance-admin-org-stat__num {
  font-family: var(--font-display, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text, var(--text));
  line-height: 1;
  font-feature-settings: 'tnum';
}
.sarance-admin-org-stat__label {
  font-size: 10px;
  color: var(--muted, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

.sarance-admin-org-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sarance-admin-org-actividad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
}
.sarance-admin-org-actividad .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.sarance-admin-org-actividad--lime { color: var(--accent); }
.sarance-admin-org-actividad--yellow { color: #ffc94d; }
.sarance-admin-org-actividad--red { color: #ff6b6b; }

/* Mobile: cambiar grid de stats a 3 cols, orgs a 1 col */
@media (max-width: 760px) {
  .sarance-admin-hero { flex-direction: column; }
  .sarance-admin-hero__title { font-size: 24px; }
  .sarance-admin-stats { grid-template-columns: repeat(2, 1fr); }
  .sarance-admin-orgs-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BANNER ENGANCHE DIARIO en Mi día
   Aparece SOLO cuando hay noticias nuevas pendientes de briefing.
   ============================================================ */
.briefing-pending-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 18px;
  /* v3 (2026-05-27): completamente neutro. La barra lima se quitó. Solo el
     icono mantiene un toque de lima en su fondo, el resto totalmente dark. */
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.03), rgb(var(--ink-rgb) / 0.015));
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 14px;
  position: relative;
  animation: briefingBannerSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════
   WELCOME-BACK BANNER — "Te extrañábamos"
   Look cálido (coral) para que se sienta CARIÑO, no regaño.
   Layout idéntico al briefing-pending-banner pero paleta tibia.
   ════════════════════════════════════════════════════════════ */
.welcome-back-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 14px;
  background: linear-gradient(135deg, rgb(var(--info-rgb) / 0.08), rgb(var(--info-rgb) / 0.02));
  border: 1px solid rgb(var(--info-rgb) / 0.18);
  border-radius: 14px;
  position: relative;
  animation: briefingBannerSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.welcome-back-banner__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--info), #c46f5d);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -3px rgb(var(--info-rgb) / 0.45);
}
.welcome-back-banner__body { flex: 1; min-width: 0; }
.welcome-back-banner__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.welcome-back-banner__sub {
  font-family: var(--font-body, Georgia, serif);
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45;
}
.welcome-back-banner__cta {
  flex-shrink: 0;
  white-space: nowrap;
}
.welcome-back-banner__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}
.welcome-back-banner__close:hover {
  opacity: 1;
  background: rgb(var(--ink-rgb) / 0.05);
  color: var(--text);
}
@media (max-width: 760px) {
  .welcome-back-banner {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
  }
  .welcome-back-banner__cta {
    width: 100%;
    margin-top: 4px;
  }
}
@keyframes briefingBannerSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.briefing-pending-banner__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  /* v3: icono dark con accent lima, no fill lima. Solo el icono SVG queda lima. */
  background: rgb(var(--accent-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.briefing-pending-banner__body {
  flex: 1;
  min-width: 0;
}

.briefing-pending-banner__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text, var(--text));
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.briefing-pending-banner__title #briefing-pending-count {
  color: var(--accent);
  font-feature-settings: 'tnum';
  font-weight: 700;
}

.briefing-pending-banner__sub {
  font-size: 12.5px;
  color: var(--muted, var(--text-3));
  line-height: 1.4;
  margin-top: 3px;
}

.briefing-pending-banner__cta {
  flex-shrink: 0;
}

.briefing-pending-banner__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--muted, var(--text-3));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.briefing-pending-banner__close:hover {
  opacity: 1;
  background: rgb(var(--ink-rgb) / 0.05);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .briefing-pending-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 16px 14px;
  }
  .briefing-pending-banner__icon {
    margin: 0 auto;
  }
  .briefing-pending-banner__cta {
    width: 100%;
  }
}

/* ============================================================
   EDITOR IA "Sara" — FAB + drawer lateral + chat
   Estilo: iOS clean, glassmorphism sutil, voz cálida.
   ============================================================ */

/* ----- FAB Pill horizontal (lima, identificable) ----- */
.fab-editor-ia {
  position: fixed;
  right: 20px;
  bottom: 88px;  /* arriba del fab-chat (52px + 24 + 12) */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px 11px 14px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.95), rgb(var(--accent-rgb) / 0.92));
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  color: var(--on-accent);
  cursor: pointer;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow:
    0 10px 28px -8px rgb(var(--accent-rgb) / 0.45),
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgb(var(--ink-rgb) / 0.3);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1480;
}
.fab-editor-ia:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 14px 32px -8px rgb(var(--accent-rgb) / 0.55),
    0 6px 16px rgba(0, 0, 0, 0.3);
}
.fab-editor-ia:active {
  transform: scale(0.97);
}
.fab-editor-ia svg {
  flex-shrink: 0;
}
.fab-editor-ia__label {
  white-space: nowrap;
}

/* Mobile: arriba del fab-chat móvil */
@media (max-width: 768px) {
  .fab-editor-ia {
    right: 16px;
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    padding: 9px 14px 9px 12px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .fab-editor-ia {
    bottom: calc(232px + env(safe-area-inset-bottom, 0px));
  }
}

/* Ocultar FAB cuando el drawer está abierto */
body.editor-ia-open .fab-editor-ia {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

/* ----- Backdrop ----- */
.editor-ia-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1495;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
body.editor-ia-open .editor-ia-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ----- Drawer lateral ----- */
.editor-ia-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100%;
  /* Auditoría v3: fondo con gradiente sutil + radiales decorativos en bordes
     (esquinas) para profundidad estilo Fintrixity, sin saturar de verde. */
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgb(var(--info-rgb) / 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgb(var(--info-rgb) / 0.04) 0%, transparent 65%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
  border-left: 1px solid rgb(var(--ink-rgb) / 0.08);
  box-shadow: -24px 0 70px -10px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1500;
  visibility: hidden;
}
.editor-ia-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

/* Header — hero card embebida estilo Fintrixity (v3) */
.editor-ia-header {
  padding: 22px 20px 18px;
  margin: 14px 14px 12px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  overflow: hidden;
  /* Hero card: dark base + radial accent lima + radial indigo en esquina opuesta */
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgb(var(--accent-rgb) / 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 100% 100%, rgb(var(--info-rgb) / 0.1) 0%, transparent 60%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface) 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  box-shadow:
    0 12px 32px -10px rgba(0,0,0,0.5),
    0 0 0 1px rgb(var(--ink-rgb) / 0.03) inset;
}
.editor-ia-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgb(var(--accent-rgb) / 0.2), transparent);
}
.editor-ia-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgb(var(--accent-rgb) / 0.04) 40%, transparent 80%);
  background-size: 200% 100%;
  animation: saraHeaderShimmer 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes saraHeaderShimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .editor-ia-header::after { animation: none; }
}
.editor-ia-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.editor-ia-header-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 28%, rgb(var(--ink-rgb) / 0.5) 0%, transparent 45%),
    linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 8px 24px -6px rgb(var(--accent-rgb) / 0.65),
    0 0 0 1px rgb(var(--ink-rgb) / 0.18) inset,
    0 2px 0 rgba(0,0,0,0.20) inset;
  position: relative;
  z-index: 1;
}
.editor-ia-header-avatar svg {
  width: 22px;
  height: 22px;
}
.editor-ia-header-avatar::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.55) 0%, transparent 70%);
  filter: blur(10px);
  opacity: 0.75;
  z-index: -1;
  animation: saraAvatarGlow 2.8s ease-in-out infinite;
}
@keyframes saraAvatarGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  .editor-ia-header-avatar::after { animation: none; }
}
.editor-ia-header h3 {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text, var(--text));
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.editor-ia-tag {
  font-family: var(--font-ui, system-ui);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: rgb(var(--accent-rgb) / 0.15);
  color: var(--accent);
  padding: 3px 7px;
  border-radius: 4px;
}
.editor-ia-sub {
  font-size: 11.5px;
  color: var(--muted, var(--text-3));
  margin-top: 2px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.editor-ia-model-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgb(var(--ink-rgb) / 0.06);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  color: var(--text-dim, var(--text-2));
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum';
}

.editor-ia-header-actions {
  display: flex;
  gap: 4px;
}
.editor-ia-clear,
.editor-ia-close {
  background: none;
  border: none;
  color: var(--muted, var(--text-3));
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}
.editor-ia-clear:hover,
.editor-ia-close:hover {
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--text, var(--text));
}

/* ----- Presets (pills horizontales scrolleables) v3 ----- */
.editor-ia-presets {
  padding: 6px 14px 14px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.editor-ia-presets::-webkit-scrollbar {
  display: none;
}
.editor-ia-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.06), rgb(var(--ink-rgb) / 0.03));
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  color: var(--text-dim, var(--text-2));
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.editor-ia-preset:hover {
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.16), rgb(var(--accent-rgb) / 0.08));
  border-color: rgb(var(--accent-rgb) / 0.45);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgb(var(--accent-rgb) / 0.25);
}
.editor-ia-preset:active {
  transform: translateY(0);
}
.editor-ia-preset svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* ----- Mensajes ----- */
.editor-ia-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.editor-ia-welcome {
  text-align: center;
  padding: 32px 18px 24px;
  color: var(--muted, var(--text-3));
  margin: 8px;
  border-radius: 18px;
  /* Welcome card con profundidad: gradient + radial sutil */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgb(var(--accent-rgb) / 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025) 0%, rgb(var(--ink-rgb) / 0.005) 100%);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  position: relative;
  overflow: hidden;
}
.editor-ia-welcome::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.editor-ia-welcome-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 28% 28%, rgb(var(--ink-rgb) / 0.45) 0%, transparent 50%),
    linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow:
    0 12px 32px -6px rgb(var(--accent-rgb) / 0.45),
    0 0 0 1px rgb(var(--ink-rgb) / 0.2) inset;
  position: relative;
}
.editor-ia-welcome-avatar::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.4) 0%, transparent 70%);
  filter: blur(14px);
  opacity: 0.6;
  z-index: -1;
  animation: saraAvatarGlow 2.8s ease-in-out infinite;
}
.editor-ia-welcome h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--text, var(--text));
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.editor-ia-welcome p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 10px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.editor-ia-welcome-hint {
  font-size: 11.5px !important;
  color: var(--text-dim, var(--text-2)) !important;
  margin-top: 18px !important;
}
.editor-ia-welcome-hint kbd {
  background: rgb(var(--ink-rgb) / 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-bottom-width: 2px;
}

/* Mensaje individual */
.editor-ia-msg {
  display: flex;
  gap: 10px;
  max-width: 100%;
}
.editor-ia-msg--user {
  justify-content: flex-end;
}
.editor-ia-msg--assistant {
  justify-content: flex-start;
}

.editor-ia-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px -2px rgb(var(--accent-rgb) / 0.4);
}

.editor-ia-msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 84%;
}
.editor-ia-msg--user .editor-ia-msg-bubble-wrap {
  align-items: flex-end;
}

.editor-ia-msg-bubble {
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Acciones bajo cada respuesta de Sara */
.editor-ia-msg-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-left: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.editor-ia-msg:hover .editor-ia-msg-actions,
.editor-ia-msg-actions:focus-within {
  opacity: 1;
}
@media (hover: none) {
  /* En mobile siempre visibles */
  .editor-ia-msg-actions { opacity: 1; }
}

.editor-ia-msg-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  color: var(--muted, var(--text-3));
  padding: 4px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.editor-ia-msg-action:hover {
  background: rgb(var(--accent-rgb) / 0.08);
  border-color: rgb(var(--accent-rgb) / 0.3);
  color: var(--accent);
}
.editor-ia-msg-action:active {
  transform: scale(0.96);
}
.editor-ia-msg-action svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.editor-ia-msg--user .editor-ia-msg-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent)));
  color: var(--on-accent);
  border-bottom-right-radius: 4px;
  font-weight: 500;
  box-shadow: 0 4px 14px -4px rgb(var(--accent-rgb) / 0.4);
}
.editor-ia-msg--assistant .editor-ia-msg-bubble {
  background:
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.055), rgb(var(--ink-rgb) / 0.025));
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  color: var(--text, var(--text));
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.20);
  position: relative;
}
.editor-ia-msg--assistant .editor-ia-msg-bubble::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), transparent);
  border-radius: 4px 0 0 4px;
  opacity: 0.6;
}
.editor-ia-msg-bubble strong {
  color: var(--text, var(--text));
  font-weight: 600;
}
.editor-ia-msg--user .editor-ia-msg-bubble strong {
  color: var(--on-accent);
}
.editor-ia-msg-bubble em {
  font-style: italic;
  opacity: 0.9;
}

/* "Pensando..." */
.editor-ia-msg--thinking .editor-ia-msg-bubble {
  padding: 14px 16px;
  min-width: 60px;
}
.editor-ia-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 14px;
}
.editor-ia-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: editorIADot 1.4s ease-in-out infinite;
}
.editor-ia-dots span:nth-child(2) { animation-delay: 0.18s; }
.editor-ia-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes editorIADot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* ----- Composer (input + botones) ----- */
.editor-ia-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.editor-ia-paste {
  background: none;
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  color: var(--muted, var(--text-3));
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.16s ease;
}
.editor-ia-paste:hover {
  background: rgb(var(--ink-rgb) / 0.05);
  color: var(--text, var(--text));
  border-color: rgb(var(--ink-rgb) / 0.15);
}
.editor-ia-composer textarea {
  flex: 1;
  min-height: 36px;
  max-height: 200px;
  padding: 9px 12px;
  background: rgb(var(--ink-rgb) / 0.05);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 10px;
  color: var(--text, var(--text));
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
  transition: border-color 0.18s ease;
}
.editor-ia-composer textarea:focus {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: rgb(var(--ink-rgb) / 0.06);
}
.editor-ia-composer textarea::placeholder {
  color: var(--muted, var(--text-3));
}
.editor-ia-send {
  background: var(--accent);
  border: none;
  color: var(--on-accent);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.16s ease;
  box-shadow: 0 4px 12px -2px rgb(var(--accent-rgb) / 0.4);
}
.editor-ia-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgb(var(--accent-rgb) / 0.5);
}
.editor-ia-send:active {
  transform: scale(0.95);
}
.editor-ia-send svg {
  transform: translateX(-1px) translateY(0px);
}

/* ----- Mobile: fullscreen del drawer ----- */
@media (max-width: 640px) {
  .editor-ia-drawer {
    width: 100%;
    border-left: none;
  }
  .editor-ia-header {
    padding: 14px 16px 12px;
  }
  .editor-ia-header h3 {
    font-size: 17px;
  }
  .editor-ia-presets {
    padding: 10px 16px;
  }
  .editor-ia-messages {
    padding: 16px;
  }
  .editor-ia-composer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MI DÍA — REDISEÑO 2026-05 (Finpath-inspired)
   Estilo: dark + lima + glass cards, jerarquía clara, números grandes monospace.
   Tokens reusados: --accent, --accent-deep, --text, --muted, --border.
   ═══════════════════════════════════════════════════════════════════════════ */

#midia-desktop-app {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0 32px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* — 1. Header — */

@keyframes md2PulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.5); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0); }
}

/* — 2. Hero KPI Card — */

/* — 3. Filas y cards base — */

/* — 3a. Sara card — */

@keyframes md2Sparkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 0.9; }
  50%      { transform: scale(1.15) rotate(8deg); opacity: 1; }
}

@keyframes md2Wave {
  0%, 100% { height: 12px; opacity: 0.55; }
  50%      { height: 42px; opacity: 1; }
}

/* — 3b. Top del día — */

/* — 4. Pulso semanal — */

.md2-pulse-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  height: 150px;
  align-items: end;
  padding: 4px 4px 0;
}
.md2-pulse-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}
.md2-pulse-bar__fill {
  width: 100%;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.1) 0%, rgb(var(--ink-rgb) / 0.04) 100%);
  border-radius: 8px 8px 4px 4px;
  min-height: 6px;
  transition: height 0.5s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}
/* Bar "HOY" — gradient lima vertical + glow expansivo estilo Fintrixity */
.md2-pulse-bar__fill--today {
  background: linear-gradient(180deg, #e8f08a 0%, var(--accent) 35%, var(--accent-deep) 100%);
  box-shadow:
    0 0 40px -2px rgb(var(--accent-rgb) / 0.55),
    0 0 80px -10px rgb(var(--accent-rgb) / 0.35),
    inset 0 0 0 1px rgb(var(--ink-rgb) / 0.15);
}
.md2-pulse-bar__fill--today::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px 8px 4px 4px;
  background: rgb(var(--ink-rgb) / 0.1);
  animation: md2BarPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes md2BarPulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
.md2-pulse-bar__value {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: -4px;
}
.md2-pulse-bar__fill--today + .md2-pulse-bar__value,
.md2-pulse-bar__value--today {
  color: var(--accent);
}
.md2-pulse-bar__label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.md2-pulse-bar__label--today {
  color: var(--accent);
  font-weight: 700;
}

/* — 5a. Tasks list — */

.md2-task {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}
.md2-task:hover { background: rgb(var(--ink-rgb) / 0.03); }

/* — 5b. Equipo en vivo — */

@keyframes md2PulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--success-rgb) / 0.4); }
  50%      { box-shadow: 0 0 0 5px rgb(var(--success-rgb) / 0); }
}

/* — 5c. Mi jornada — */

/* — 6. Pool noticias — */

/* — Skeleton loaders — */
.md2-skeleton-line {
  background: linear-gradient(90deg, rgb(var(--ink-rgb) / 0.04) 25%, rgb(var(--ink-rgb) / 0.1) 50%, rgb(var(--ink-rgb) / 0.04) 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: md2Shimmer 1.4s ease-in-out infinite;
}

@keyframes md2Shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* — Empty states de cada card — */
.md2-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.md2-card__empty svg { opacity: 0.4; }

/* — Responsive — */

@media (max-width: 760px) {
  /* En móvil el view #midia-mobile-app toma el control, este desktop se oculta */
  #midia-desktop-app { display: none; }
  
  .md2-pulse-chart { gap: 6px; height: 110px; }
  
  
}

/* — Animaciones de entrada para las cards (stagger) — */

@keyframes md2CardIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  
  .md2-sara-waveform span,
  .md2-pulse-bar__fill--today::after,
  .md2-team-pulse,
  .md2-sparkle,
  .md2-pill-live__dot {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEWS CARD — IMAGEN DEL POST ORIGINAL (og:image)
   La imagen se obtiene del og:image de la URL fuente vía Edge Function og-image.
   Aspect-ratio fijo para evitar layout shift mientras carga.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Imagen del post — thumbnail compacto a la derecha del título (estilo Twitter card).
   En desktop: float right, no se come el alto de la card.
   En mobile: arriba del título, full width pero baja. */
.news-card-imagen {
  display: block;
  width: 200px;
  height: 130px;
  margin: 0 0 10px 14px;
  float: right;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.04), rgb(var(--ink-rgb) / 0.01));
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  position: relative;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
  text-decoration: none;
  flex-shrink: 0;
}
.news-card-imagen:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.5);
}
.news-card-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.news-card-imagen:hover img {
  transform: scale(1.04);
}

/* Lead card: thumbnail un poco más grande pero NUNCA full-screen */
.news-card-pro--lead .news-card-imagen {
  width: 280px;
  height: 170px;
  border-radius: 12px;
  margin: 0 0 12px 18px;
}

/* Mobile: la imagen vuelve a banner arriba del título, compacta */
@media (max-width: 760px) {
  .news-card-imagen {
    width: 100%;
    height: 160px;
    float: none;
    margin: 8px 0 12px;
    border-radius: 10px;
  }
  .news-card-pro--lead .news-card-imagen {
    width: 100%;
    height: 200px;
    margin: 10px 0 14px;
  }
}

/* Limpiar el float al final de la card para que el footer no quede pegado a la derecha */
.news-card-pro::after {
  content: '';
  display: block;
  clear: both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR COLAPSABLE 2026-05
   Toggle entre 240px (full) y 64px (icon-only). Estado persistido en localStorage.
   Hotkey: Ctrl+B / Cmd+B.
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar {
  transition: width 0.28s cubic-bezier(.2,.7,.2,1);
  position: relative;
}

/* Botón toggle (chevron) en el header de sidebar */
.sidebar-brand { position: relative; }
.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  z-index: 2;
}
.sidebar-toggle:hover {
  background: rgb(var(--accent-rgb) / 0.1);
  border-color: rgb(var(--accent-rgb) / 0.25);
  color: var(--accent);
}
.sidebar-toggle__icon {
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}

/* ── Estado COLAPSADO ────────────────────────────────────────────────────── */
.sidebar.is-collapsed {
  width: 68px !important;
}
.sidebar.is-collapsed .sidebar-brand-text,
.sidebar.is-collapsed .ws-switcher-label,
.sidebar.is-collapsed .ws-name,
.sidebar.is-collapsed .ws-caret,
.sidebar.is-collapsed .ws-dropdown,
.sidebar.is-collapsed .nav-label,
.sidebar.is-collapsed .nav-item > span:not(.nav-icon):not(.nav-badge) {
  display: none;
}
/* Profile en sidebar */

.sidebar.is-collapsed .sidebar-brand {
  justify-content: center;
  padding: 14px 8px;
}
.sidebar.is-collapsed .sidebar-brand-logo {
  margin: 0;
}
.sidebar.is-collapsed .sidebar-toggle {
  position: static;
  transform: none;
  margin-top: 8px;
}
.sidebar.is-collapsed .sidebar-toggle__icon {
  transform: rotate(180deg);
}

.sidebar.is-collapsed .ws-switcher {
  padding: 10px 8px;
}
.sidebar.is-collapsed .ws-current {
  padding: 8px;
  justify-content: center;
}

.sidebar.is-collapsed .nav {
  padding: 10px 8px;
}
.sidebar.is-collapsed .nav-item {
  justify-content: center;
  padding: 10px 8px;
  position: relative;
}
.sidebar.is-collapsed .nav-icon {
  width: 20px;
  font-size: 16px;
}
/* Badge: redondo chiquito en lugar de pill con número */
.sidebar.is-collapsed .nav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  margin: 0;
  min-width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  border-radius: 50%;
}

/* Tooltip al hover cuando está colapsada */
.sidebar.is-collapsed .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: rgb(var(--bg-rgb) / 0.96);
  color: var(--text);
  font-size: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1500;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
}
.sidebar.is-collapsed .nav-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Hover lift en items (consistente con el lift de cards) */
.nav-item {
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nav-item:hover { transform: translateX(2px); }
.sidebar.is-collapsed .nav-item:hover { transform: none; }  /* en colapsada el lift molesta el tooltip */

/* Reducir motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-toggle__icon, .nav-item, .sidebar.is-collapsed .nav-item::after {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MI DÍA v3 — Organización Stratum (3 columnas: stats | chart+sara | donut+summary)
   Mantiene dark + lima oficial. Usa tipografía editorial grande y multi-serie chart.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — 1. Headline editorial — */

.md3-pill-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.md3-pill-live__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: md2PulseDot 1.8s ease-in-out infinite;
}

/* — 2. Tabs row — */
.md3-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 8px 0 6px;
  flex-wrap: wrap;
}
.md3-tabs__group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 12px;
}
.md3-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  border-radius: 9px;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: all 0.18s ease;
  min-height: 36px;
}
.md3-tab:hover { color: var(--text); }
.md3-tab--active {
  background: var(--text);
  color: var(--on-accent);
  font-weight: 600;
}
/* Override hover en el tab activo: sino se hereda color: var(--text) (cream) y
   el texto desaparece sobre el bg cream del active. Bug observado 2026-05-27. */
.md3-tab--active:hover,
.md3-tab--active:focus {
  color: var(--on-accent) !important;
  background: var(--text);
}
.md3-tab--active svg { stroke-width: 2.4; }
.md3-ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
}
.md3-ticker__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green, var(--success));
  box-shadow: 0 0 0 0 rgb(var(--success-rgb) / 0.5);
  animation: md2PulseGreen 2s ease-in-out infinite;
}
.md3-ticker__label { color: var(--muted); }
.md3-ticker__val { color: var(--text); font-weight: 500; }

/* — Stats row arriba (4 cards horizontales) — */
.md3-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

/* — Grid principal (chart | donut+summary) — */
.md3-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}

/* — Stat card (compartida row + sin col left) — */
.md3-stat {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.03), rgb(var(--ink-rgb) / 0.005));
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-radius: 16px;
  padding: 18px 18px;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.md3-stat:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 30px -8px rgba(0,0,0,0.45),
    0 4px 10px -4px rgba(0,0,0,0.30);
}
.md3-stat:active { transform: translateY(-1px); }
.md3-stat__icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
}
/* Stat icons (auditoría 2026-05 v3 — hero invertido):
   ANTES: card hero lima sólida (verde oscuro pesado en cabecera).
   AHORA: card oscura con BORDE lima brillante + glow radial sutil de
   esquina. Mantiene jerarquía visual sin saturar toda la vista de verde. */
.md3-stat--noticias {
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgb(var(--accent-rgb) / 0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-tint) 100%) !important;
  border: 1px solid rgb(var(--accent-rgb) / 0.4) !important;
  position: relative;
  overflow: hidden;
}
.md3-stat--noticias::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 16px 16px 0 0;
}
.md3-stat--noticias .md3-stat__icon--lime,
.md3-stat--noticias .md3-stat__icon {
  background: rgb(var(--accent-rgb) / 0.15);
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  color: var(--accent);
}
.md3-stat--noticias .md3-stat__label {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.md3-stat--noticias .md3-stat__value {
  color: var(--text);
}
.md3-stat--noticias .md3-stat__delta {
  color: var(--muted);
}
.md3-stat--noticias:hover {
  border-color: rgb(var(--accent-rgb) / 0.6) !important;
  transform: translateY(-2px);
}

/* — Icon base (fallback neutro cuando no hay variante de color) — */
.md3-stat__icon {
  background: rgb(var(--ink-rgb) / 0.06);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  color: var(--muted);
}

/* — TAREAS: índigo/azul — */
.md3-stat--tareas {
  background:
    radial-gradient(ellipse 65% 55% at 0% 0%, rgb(var(--info-rgb) / 0.13) 0%, transparent 60%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025), rgb(var(--ink-rgb) / 0.005));
  border: 1px solid rgb(var(--info-rgb) / 0.24);
  overflow: hidden;
}
.md3-stat--tareas::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), transparent);
  border-radius: 16px 16px 0 0;
}
.md3-stat--tareas .md3-stat__icon--blue {
  background: rgb(var(--info-rgb) / 0.14);
  border: 1px solid rgb(var(--info-rgb) / 0.3);
  color: var(--blue);
}
.md3-stat--tareas .md3-stat__label {
  color: var(--blue);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.md3-stat--tareas:hover {
  border-color: rgb(var(--info-rgb) / 0.48) !important;
  box-shadow:
    0 14px 30px -8px rgba(0,0,0,0.45),
    0 6px 14px -6px rgb(var(--info-rgb) / 0.22);
}

/* — EQUIPO: coral/rosa — */
.md3-stat--equipo {
  background:
    radial-gradient(ellipse 65% 55% at 0% 0%, rgb(var(--info-rgb) / 0.13) 0%, transparent 60%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025), rgb(var(--ink-rgb) / 0.005));
  border: 1px solid rgb(var(--info-rgb) / 0.24);
  overflow: hidden;
}
.md3-stat--equipo::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--coral), transparent);
  border-radius: 16px 16px 0 0;
}
.md3-stat--equipo .md3-stat__icon--coral {
  background: rgb(var(--info-rgb) / 0.14);
  border: 1px solid rgb(var(--info-rgb) / 0.3);
  color: var(--coral);
}
.md3-stat--equipo .md3-stat__label {
  color: var(--coral);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.md3-stat--equipo:hover {
  border-color: rgb(var(--info-rgb) / 0.48) !important;
  box-shadow:
    0 14px 30px -8px rgba(0,0,0,0.45),
    0 6px 14px -6px rgb(var(--info-rgb) / 0.22);
}

/* — JORNADA: violeta/púrpura — */
.md3-stat--jornada {
  background:
    radial-gradient(ellipse 65% 55% at 0% 0%, rgb(var(--info-rgb) / 0.13) 0%, transparent 60%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025), rgb(var(--ink-rgb) / 0.005));
  border: 1px solid rgb(var(--info-rgb) / 0.24);
  overflow: hidden;
}
.md3-stat--jornada::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), transparent);
  border-radius: 16px 16px 0 0;
}
.md3-stat--jornada .md3-stat__icon--violet {
  background: rgb(var(--info-rgb) / 0.14);
  border: 1px solid rgb(var(--info-rgb) / 0.3);
  color: var(--purple);
}
.md3-stat--jornada .md3-stat__label {
  color: var(--purple);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.md3-stat--jornada:hover {
  border-color: rgb(var(--info-rgb) / 0.48) !important;
  box-shadow:
    0 14px 30px -8px rgba(0,0,0,0.45),
    0 6px 14px -6px rgb(var(--info-rgb) / 0.22);
}
.md3-stat__label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.md3-stat__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.md3-stat__delta {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.md3-stat__delta--cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgb(var(--accent-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 8px;
  color: var(--accent);
  font-weight: 600;
  text-transform: none;
  align-self: flex-start;
  font-size: 11px;
}
.md3-stat--jornada.is-active .md3-stat__value { color: var(--purple); }
.md3-stat--jornada.is-active .md3-stat__delta--cta {
  background: rgb(var(--danger-rgb) / 0.08);
  border-color: rgb(var(--danger-rgb) / 0.22);
  color: #ff8a8a;
}

/* — Col centro: chart card + Sara — */
.md3-col--center { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.md3-chart-card {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025), rgb(var(--ink-rgb) / 0.005));
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-radius: 16px;
  padding: 22px 24px 18px;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.md3-chart-card:hover {
  border-color: rgb(var(--ink-rgb) / 0.16);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -8px rgba(0,0,0,0.45);
}
.md3-chart-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.md3-chart-card__eyebrow,
.md3-pulse-card__eyebrow,
.md3-donut-card__eyebrow {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.md3-chart-card__title,
.md3-pulse-card__title,
.md3-donut-card__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.md3-chart-card__legend {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--muted);
}
.md3-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.md3-chart-legend__dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.md3-chart-legend__dot--lime { background: var(--accent); }
.md3-chart-legend__dot--blue { background: var(--info); }

.md3-chart-card__wrap {
  position: relative;
  width: 100%;
  height: 200px;
}
.md3-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.md3-chart-svg .md3-chart-area {
  opacity: 0.18;
  transition: opacity 0.2s ease;
}
.md3-chart-svg .md3-chart-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.md3-chart-svg .md3-chart-dot {
  cursor: pointer;
  transition: r 0.15s ease;
}
.md3-chart-svg .md3-chart-dot:hover { r: 5; }
.md3-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgb(var(--bg-rgb) / 0.96);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px -6px rgba(0,0,0,0.6);
  font-family: var(--font-ui);
  font-size: 12px;
  z-index: 5;
  min-width: 140px;
}
.md3-chart-tooltip__date {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 11.5px;
}
.md3-chart-tooltip__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
  padding: 2px 0;
}
.md3-chart-tooltip__val {
  margin-left: auto;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.md3-chart-card__axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* — Sara floating chip — */
.md3-sara-chip {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.06), rgb(var(--ink-rgb) / 0.01));
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.md3-sara-chip:hover {
  border-color: rgb(var(--accent-rgb) / 0.36);
  transform: translateY(-3px);
  box-shadow:
    0 14px 30px -8px rgba(0,0,0,0.45),
    0 6px 14px -6px rgb(var(--accent-rgb) / 0.22);
}
.md3-sara-chip__head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.md3-sara-chip__sparkle {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.md3-sara-chip__sparkle svg { width: 14px; height: 14px; }
.md3-sara-chip__title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.md3-sara-chip__sub {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-body);
  font-style: italic;
  transition: color 0.4s ease;
}
/* Cuando Sara tiene contexto real, el subtítulo se ilumina levemente */
#md3-sara-chip-sub:not(:empty) {
  color: #c0cdd6;
}
.md3-sara-chip__waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  height: 22px;
}
.md3-sara-chip__waveform span {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: md2Wave 1.4s ease-in-out infinite;
}
.md3-sara-chip__waveform span:nth-child(2) { animation-delay: 0.12s; }
.md3-sara-chip__waveform span:nth-child(3) { animation-delay: 0.24s; }
.md3-sara-chip__waveform span:nth-child(4) { animation-delay: 0.18s; }
.md3-sara-chip__waveform span:nth-child(5) { animation-delay: 0.08s; }
.md3-sara-chip__prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.md3-sara-chip-btn {
  padding: 7px 12px;
  background: rgb(var(--ink-rgb) / 0.04);
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
}
.md3-sara-chip-btn:hover {
  background: rgb(var(--accent-rgb) / 0.08);
  border-color: rgb(var(--accent-rgb) / 0.24);
  color: var(--accent);
}

/* — Col derecha: Donut + Summary — */
.md3-col--right { display: flex; flex-direction: column; gap: 14px; }
.md3-donut-card {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025), rgb(var(--ink-rgb) / 0.005));
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-radius: 16px;
  padding: 18px 18px 14px;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.md3-donut-card:hover {
  border-color: rgb(var(--ink-rgb) / 0.16);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -8px rgba(0,0,0,0.45);
}
.md3-donut-card__head { margin-bottom: 12px; }
.md3-donut-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 14px;
}
.md3-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.md3-donut-svg circle { transition: stroke-dashoffset 0.7s cubic-bezier(.2,.7,.2,1); }
.md3-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.md3-donut-center__num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.md3-donut-center__lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.md3-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.md3-donut-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.md3-donut-legend__dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.md3-donut-legend__label {
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md3-donut-legend__val {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* — Weekly AI Summary card — */
.md3-summary-card {
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.05), rgb(var(--ink-rgb) / 0.01));
  border: 1px solid rgb(var(--accent-rgb) / 0.15);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.md3-summary-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.32);
  transform: translateY(-3px);
  box-shadow:
    0 14px 30px -8px rgba(0,0,0,0.45),
    0 6px 14px -6px rgb(var(--accent-rgb) / 0.18);
}
.md3-summary-card__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.md3-summary-card__sparkle {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgb(var(--accent-rgb) / 0.15);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.md3-summary-card__sparkle svg { width: 12px; height: 12px; }
.md3-summary-card__eyebrow {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
}
.md3-summary-card__title {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
}
.md3-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md3-summary-item {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
  font-family: var(--font-body);
}
.md3-summary-item__icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}
.md3-summary-item__strong { font-weight: 600; color: var(--accent); }
.md3-summary-item--skeleton {
  padding: 4px;
  background: none;
  border: none;
}
.md3-summary-card__foot {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

/* — Pulse card (reusa md2) — */
.md3-pulse-card {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025), rgb(var(--ink-rgb) / 0.005));
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-radius: 16px;
  padding: 22px 24px;
  margin-top: 6px;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.md3-pulse-card:hover {
  border-color: rgb(var(--ink-rgb) / 0.16);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -8px rgba(0,0,0,0.45);
}
.md3-pulse-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.md3-pulse-card__num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.md3-pulse-card__lbl {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  margin-top: 2px;
}

/* — Pool card — */
.md3-pool-card {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.02), rgb(var(--ink-rgb) / 0.005));
  border: 1px solid rgb(var(--ink-rgb) / 0.06);
  border-radius: 16px;
  padding: 22px 24px;
  margin-top: 6px;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.md3-pool-card:hover {
  border-color: rgb(var(--ink-rgb) / 0.14);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -8px rgba(0,0,0,0.45);
}
.md3-pool-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.md3-pool-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.md3-pool-count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.md3-pool-refresh {
  background: none;
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  color: var(--muted);
  border-radius: 8px;
  width: 30px; height: 30px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.md3-pool-refresh:hover { color: var(--accent); border-color: rgb(var(--accent-rgb) / 0.2); }

/* — Responsive — */
@media (max-width: 1100px) {
  .md3-grid { grid-template-columns: 1fr; }
  .md3-col--right { flex-direction: row; flex-wrap: wrap; }
  .md3-col--right > * { flex: 1 1 280px; min-width: 0; }
  .md3-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .md3-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .md3-col--right { flex-direction: column; }
  
  .md3-tabs { gap: 8px; }
  .md3-tabs__group { flex-wrap: wrap; }
  .md3-chart-card__wrap { height: 160px; }
  .md3-stat { padding: 14px 14px; }
  .md3-stat__value { font-size: 24px; }
}

/* — Entrada con stagger — */
.md3-headline, .md3-tabs, .md3-stats-row .md3-stat, .md3-chart-card, .md3-sara-chip, .md3-donut-card, .md3-summary-card, .md3-pulse-card, .md3-pool-card {
  opacity: 0;
  transform: translateY(8px);
  animation: md2CardIn 0.45s cubic-bezier(.2, .7, .2, 1) forwards;
}

.md3-tabs                                      { animation-delay: 0.04s; }
.md3-stats-row .md3-stat:nth-child(1)          { animation-delay: 0.08s; }
.md3-stats-row .md3-stat:nth-child(2)          { animation-delay: 0.12s; }
.md3-stats-row .md3-stat:nth-child(3)          { animation-delay: 0.16s; }
.md3-stats-row .md3-stat:nth-child(4)          { animation-delay: 0.20s; }
.md3-chart-card                                { animation-delay: 0.24s; }
.md3-sara-chip                                 { animation-delay: 0.32s; }
.md3-donut-card                                { animation-delay: 0.28s; }
.md3-summary-card                              { animation-delay: 0.36s; }
.md3-pulse-card                                { animation-delay: 0.40s; }
.md3-pool-card                                 { animation-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .md3-headline, .md3-tabs, .md3-stats-row .md3-stat, .md3-chart-card, .md3-sara-chip, .md3-donut-card, .md3-summary-card, .md3-pulse-card, .md3-pool-card {
    animation: none; opacity: 1; transform: none;
  }
  .md3-stat:hover, .md3-chart-card:hover, .md3-sara-chip:hover, .md3-donut-card:hover, .md3-summary-card:hover, .md3-pulse-card:hover, .md3-pool-card:hover {
    transform: none !important;
  }
  .md3-sara-chip__waveform span,
  .md3-pill-live__dot,
  .md3-ticker__dot { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADERS UNIFICADOS DE VISTAS (auditoría 2026-05 v3)
   Aplica el mismo tratamiento Fraunces editorial de Mi día a:
   - Sarance Admin
   - Noticias
   - Kanban
   - Asistencias/Equipo
   Resultado: la app se siente cohesiva, no como vistas separadas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Title gigante editorial — solo el title de PAGE (no las columnas del kanban).
   Auditoría 2026-05 v4: antes `#view-kanban .kanban-title` pescaba TAMBIÉN los
   titles de cada columna (.kanban-col .kanban-header .kanban-title), haciéndolos
   gigantes (clamp 28-44px). Restringido al hijo directo del view. */
.sarance-admin-hero__title,
.equipo-title,
#view-kanban > .kanban-title,
#view-kanban > .panel-header .kanban-title,
.planif-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  color: var(--text) !important;
  margin: 0 0 8px !important;
}

/* Eyebrow encima del title (cuando existe) */
.sarance-admin-hero__eyebrow {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: 14px !important;
}

/* Sub bajo el title */
.sarance-admin-hero__sub {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--muted) !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
  max-width: 60ch;
}

/* Badge FOUNDER al lado del title */
.sarance-admin-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  box-shadow: 0 6px 18px -4px rgb(var(--accent-rgb) / 0.45);
}

/* ─── Sarance Admin: card de MRR es el HERO ─── */
.sarance-admin-stat--accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%) !important;
  border: 1px solid var(--accent-deep) !important;
  box-shadow: 0 12px 30px -8px rgb(var(--accent-rgb) / 0.35) !important;
  position: relative;
  overflow: hidden;
}
.sarance-admin-stat--accent .sarance-admin-stat__num,
.sarance-admin-stat--accent #stat-mrr {
  color: var(--on-accent) !important;
}
.sarance-admin-stat--accent .sarance-admin-stat__label {
  color: var(--on-accent) !important;
  font-weight: 600 !important;
}
.sarance-admin-stat--accent::after {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgb(var(--ink-rgb) / 0.18) 0%, transparent 60%);
  pointer-events: none;
}

/* Las otras stats: subtle uniformes */
.sarance-admin-stat:not(.sarance-admin-stat--accent) {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.025), rgb(var(--ink-rgb) / 0.005)) !important;
  border: 1px solid rgb(var(--ink-rgb) / 0.07) !important;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), border-color 0.2s ease, box-shadow 0.3s ease;
}
.sarance-admin-stat:not(.sarance-admin-stat--accent):hover {
  transform: translateY(-3px);
  border-color: rgb(var(--accent-rgb) / 0.25) !important;
  box-shadow: 0 14px 30px -8px rgba(0,0,0,0.5), 0 6px 14px -6px rgb(var(--accent-rgb) / 0.18);
}

/* ─── Asistencias: cards de personas con tinte lima al hover ─── */
.asist-card {
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), border-color 0.25s, box-shadow 0.3s;
}
.asist-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--accent-rgb) / 0.25) !important;
  box-shadow: 0 14px 30px -8px rgba(0,0,0,0.5), 0 6px 14px -6px rgb(var(--accent-rgb) / 0.15);
}

/* ─── Kanban: cards con lift hover ─── */
.kanban-card {
  transition: transform 0.2s cubic-bezier(.2,.7,.2,1), border-color 0.2s, box-shadow 0.3s;
}
.kanban-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--accent-rgb) / 0.25);
  box-shadow: 0 10px 22px -6px rgba(0,0,0,0.5), 0 4px 10px -4px rgb(var(--accent-rgb) / 0.15);
}

/* Mobile: bajar el tamaño del title gigante (también excluyendo columnas) */
@media (max-width: 760px) {
  .sarance-admin-hero__title,
  .equipo-title,
  #view-kanban > .kanban-title,
  #view-kanban > .panel-header .kanban-title,
  .planif-title {
    font-size: 26px !important;
  }
  .sarance-admin-hero__sub {
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sarance-admin-stat:not(.sarance-admin-stat--accent):hover,
  .asist-card:hover,
  .kanban-card:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL "¿Dónde estás trabajando?" — rediseño 2026-05 v4
   Look minimal Apple-style + lift hover + tema oscuro + responsive
   ═══════════════════════════════════════════════════════════════════════════ */
.tipo-jornada-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: tipoFadeIn 0.22s ease-out;
}
.tipo-jornada-overlay--closing {
  animation: tipoFadeOut 0.18s ease-out forwards;
}
@keyframes tipoFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tipoFadeOut { from { opacity: 1; } to { opacity: 0; } }

.tipo-jornada-modal {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.98), rgb(var(--bg-rgb) / 0.98));
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 22px;
  padding: 26px 24px 22px;
  box-shadow:
    0 28px 64px -16px rgba(0,0,0,0.7),
    0 0 0 1px rgb(var(--ink-rgb) / 0.04) inset,
    0 -1px 0 0 rgb(var(--accent-rgb) / 0.08) inset;
  animation: tipoSlideUp 0.28s cubic-bezier(.2,.7,.2,1);
}
@keyframes tipoSlideUp {
  from { transform: translateY(16px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}
.tipo-jornada-modal__handle {
  width: 40px; height: 3px;
  background: rgb(var(--ink-rgb) / 0.18);
  border-radius: 99px;
  margin: 0 auto 18px;
}
.tipo-jornada-modal__eyebrow {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}
.tipo-jornada-modal__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.15;
}
.tipo-jornada-modal__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 22px;
  line-height: 1.45;
}
.tipo-jornada-modal__opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.tipo-jornada-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-radius: 14px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1), border-color 0.2s, background 0.2s, box-shadow 0.25s;
}
.tipo-jornada-opt:hover {
  background: rgb(var(--accent-rgb) / 0.06);
  border-color: rgb(var(--accent-rgb) / 0.32);
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px -8px rgba(0,0,0,0.5),
    0 0 0 1px rgb(var(--accent-rgb) / 0.12);
}
.tipo-jornada-opt:active { transform: translateY(0); }
.tipo-jornada-opt__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--accent-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  border-radius: 11px;
  color: var(--accent);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.tipo-jornada-opt:hover .tipo-jornada-opt__icon {
  background: rgb(var(--accent-rgb) / 0.18);
  border-color: rgb(var(--accent-rgb) / 0.4);
}
.tipo-jornada-opt__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tipo-jornada-opt__text strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.tipo-jornada-opt__text small {
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-body);
}
.tipo-jornada-opt__arrow {
  color: var(--muted);
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
  flex-shrink: 0;
}
.tipo-jornada-opt:hover .tipo-jornada-opt__arrow {
  color: var(--accent);
  opacity: 1;
  transform: translateX(3px);
}
.tipo-jornada-opt--cancel {
  width: 100%;
  justify-content: center;
  padding: 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}
.tipo-jornada-opt--cancel:hover {
  background: rgb(var(--ink-rgb) / 0.04);
  transform: none;
  box-shadow: none;
  color: var(--text);
  border-color: transparent;
}

@media (max-width: 480px) {
  .tipo-jornada-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .tipo-jornada-modal {
    max-width: 100%;
    border-radius: 22px 22px 0 0;
    border-bottom: none;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .tipo-jornada-overlay, .tipo-jornada-modal, .tipo-jornada-opt { animation: none !important; }
  .tipo-jornada-opt:hover { transform: none !important; }
}

/* Link "Ver historial y reporte →" en la stat card de jornada */
.md3-stat__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, transform 0.18s ease;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.md3-stat__link:hover {
  color: var(--accent);
  transform: translateX(2px);
}

/* ════════════════════════════════════════════════════════════════════════
   MI DÍA v3 — Header compacto + Próxima acción
   Reemplaza el hero gigante (md3-headline).
   ════════════════════════════════════════════════════════════════════════ */

/* Ocultar el hero viejo si por alguna razón quedó en el DOM */

/* ─── Línea compacta de saludo ─── */
.mdia-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 12px;
  gap: 12px;
}
.mdia-hdr__left {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.01em;
}
.mdia-hdr__saludo {
  color: var(--text);            /* BLANCO — legible */
  font-weight: 400;
}
.mdia-hdr__name {
  color: var(--accent);
  font-style: italic;
}
.mdia-hdr__right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text);            /* fecha también blanca */
  letter-spacing: 0.07em;
  text-transform: uppercase;
  flex-shrink: 0;
  opacity: 0.9;
}

/* ─── Card "Próxima acción" ─── */
.mdia-next-action {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  margin-bottom: 18px;
  background: rgb(var(--ink-rgb) / 0.025);
  border: 1px solid rgb(var(--ink-rgb) / 0.07);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  cursor: default;
}
.mdia-next-action:hover {
  background: rgb(var(--ink-rgb) / 0.04);
  box-shadow: 0 4px 20px -8px rgba(0,0,0,0.4);
}

/* Barra lateral cambia color según tipo de acción */
.mdia-next-action[data-na-type="jornada"]  { border-left-color: var(--accent); }
.mdia-next-action[data-na-type="briefing"] { border-left-color: #facc15; }
.mdia-next-action[data-na-type="tareas"]   { border-left-color: var(--blue, #60a5fa); }
.mdia-next-action[data-na-type="sara"]     { border-left-color: var(--info); }
.mdia-next-action[data-na-type="loading"]  { border-left-color: rgb(var(--ink-rgb) / 0.15); }

/* Ícono circular */
.mdia-na__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgb(var(--ink-rgb) / 0.05);
  color: var(--accent);
  transition: color 0.18s ease;
}
.mdia-next-action[data-na-type="briefing"] .mdia-na__icon { color: #facc15; }
.mdia-next-action[data-na-type="tareas"]   .mdia-na__icon { color: var(--blue, #60a5fa); }
.mdia-next-action[data-na-type="sara"]     .mdia-na__icon { color: var(--info); }

/* Cuerpo de texto */
.mdia-na__body {
  flex: 1;
  min-width: 0;
}
.mdia-na__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.65;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.mdia-na__text {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA alineado a la derecha */
.mdia-na__cta {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12.5px !important;
}

/* Mobile */
@media (max-width: 640px) {
  .mdia-hdr { padding-top: 12px; }
  .mdia-hdr__left { font-size: 18px; }
  .mdia-hdr__right { display: none; }
  .mdia-next-action { padding: 13px 14px; gap: 12px; margin-bottom: 12px; }
  .mdia-na__icon { width: 36px; height: 36px; border-radius: 8px; }
  .mdia-na__cta { display: none; }
  .mdia-na__text { font-size: 13.5px; white-space: normal; }
}

/* ════════════════════════════════════════════════════════════════════════
   COMMAND PALETTE (Cmd/Ctrl+K) — overlay estilo Linear/Notion
   ════════════════════════════════════════════════════════════════════════ */

/* Backdrop / overlay */
.cmdp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(60px, 12vh, 120px);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cmdpFadeIn 0.14s ease forwards;
}
@keyframes cmdpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Central box */
.cmdp-box {
  width: 100%;
  max-width: 560px;
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgb(var(--ink-rgb) / 0.04) inset,
    0 32px 80px -16px rgba(0, 0, 0, 0.85),
    0 8px 24px -8px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: cmdpScaleIn 0.16s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: top center;
}
@keyframes cmdpScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Search row */
.cmdp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.07);
}
.cmdp-search > svg {
  flex-shrink: 0;
  color: var(--muted);
}

#cmdp-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  caret-color: var(--accent);
}
#cmdp-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

/* ESC badge */
.cmdp-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: rgb(var(--ink-rgb) / 0.06);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 5px;
  font-size: 11px;
  font-family: inherit;
  color: var(--muted);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Scrollable list */
.cmdp-list {
  max-height: 352px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--ink-rgb) / 0.1) transparent;
}
.cmdp-list::-webkit-scrollbar { width: 4px; }
.cmdp-list::-webkit-scrollbar-track { background: transparent; }
.cmdp-list::-webkit-scrollbar-thumb {
  background: rgb(var(--ink-rgb) / 0.1);
  border-radius: 99px;
}

/* Item row */
.cmdp-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.1s ease;
  user-select: none;
}
.cmdp-item:hover,
.cmdp-item.is-active {
  background: rgb(var(--ink-rgb) / 0.06);
}

/* Featured item: Sara — lima accent */
.cmdp-item--featured {
  background: rgb(var(--accent-rgb) / 0.07);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  margin-bottom: 2px;
}
.cmdp-item--featured:hover,
.cmdp-item--featured.is-active {
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.3);
}
.cmdp-item--featured .cmdp-item__icon {
  color: var(--accent);
}
.cmdp-item--featured .cmdp-item__label {
  color: var(--accent);
  font-weight: 500;
}

/* Item parts */
.cmdp-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
  transition: color 0.12s ease;
}
.cmdp-item.is-active .cmdp-item__icon {
  color: var(--text);
}

.cmdp-item__label {
  flex: 1;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdp-item__hint {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Empty state */
.cmdp-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  opacity: 0.7;
}

/* Footer / keyboard hints */
.cmdp-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
  background: rgb(var(--ink-rgb) / 0.02);
}
.cmdp-foot span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.65;
}
.cmdp-foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  background: rgb(var(--ink-rgb) / 0.06);
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 4px;
  font-size: 10px;
  font-family: inherit;
  color: var(--muted);
}

/* Mobile: bottom sheet */
@media (max-width: 540px) {
  .cmdp-overlay {
    align-items: flex-end;
    padding-top: 0;
  }
  .cmdp-box {
    margin: 0;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmdp-overlay { animation: none; }
  .cmdp-box { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   MENÚ DE CUENTA — popover del footer del sidebar (2026-05-28)
   El user-pill ya no cierra sesión al click; ahora abre este menú con
   contexto (email + org) y accesos: config / facturación / ayuda / salir.
   ════════════════════════════════════════════════════════════════════════ */
.sidebar-footer { position: relative; }

.account-menu {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(100% - 6px);     /* sube por encima del pill */
  background: var(--surface, var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 -10px 34px -10px rgba(0,0,0,0.65), 0 0 0 1px rgb(var(--ink-rgb) / 0.03);
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(.2,.7,.2,1);
  z-index: 60;
}
.account-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.account-menu__head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 4px;
}
.account-menu__head .avatar { width: 38px; height: 38px; font-size: 14px; }
.account-menu__head-info { min-width: 0; flex: 1; }
.account-menu__name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu__email {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu__meta {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 6px;
  min-width: 0;
}
.account-menu__role-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.28);
  border-radius: 6px; padding: 2px 7px;
  flex-shrink: 0;
}
.account-menu__org {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu__divider {
  height: 1px; background: var(--border);
  margin: 6px 4px;
}
.account-menu__item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 10px;
  min-height: 40px;          /* touch target cómodo */
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--text);
  font-family: var(--font-ui), inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.account-menu__item svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  transition: color 0.14s ease;
}
.account-menu__item:hover { background: var(--surface2); }
.account-menu__item:hover svg { color: var(--text); }
.account-menu__item--danger { color: #ff8a8a; }
.account-menu__item--danger svg { color: #ff8a8a; }
.account-menu__item--danger:hover { background: rgb(var(--danger-rgb) / 0.12); color: #ff9a9a; }

/* Caret del pill: apunta arriba; rota al abrir para indicar "cerrar" */
.user-pill .user-menu svg { transition: transform 0.2s ease; }
.user-pill[aria-expanded="true"] .user-menu svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .account-menu { transition: opacity 0.01s; transform: none; }
  .account-menu.open { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   A11y — Foco visible por teclado (WCAG 2.4.7)
   Antes no existía ninguna regla de foco: quien navega con Tab no veía dónde
   estaba parado. Mostramos un anillo claro SOLO en navegación por teclado
   (:focus-visible), sin afectar el click con mouse.
   ════════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* No quitar el foco a quien usa teclado: solo lo ocultamos en foco por mouse */
:focus:not(:focus-visible) { outline: none; }
/* Inputs/areas de texto: refuerzo con halo además del borde */
.form-input:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(204,255,0,0.25));
}

/* ════════════════════════════════════════════════════════════════════════
   iOS-calm — pasada 2: "sensación de app" (2026-06).
   SOLO pulido visual — no cambia funcionamiento, datos ni flujos.
   Aditivo y reversible (borrar este bloque vuelve todo atrás).
   ════════════════════════════════════════════════════════════════════════ */

/* Texto más nítido y parejo, como en apps nativas */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sin el flash gris al tocar (las apps de iOS/Android no lo muestran) */
* { -webkit-tap-highlight-color: transparent; }

/* Scrollbars finos y discretos en vez de las barras gruesas del navegador */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--ink-rgb) / 0.16) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgb(var(--ink-rgb) / 0.16); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--ink-rgb) / 0.28); }

/* Selección de texto con el acento de la marca (en vez del azul del sistema) */
::selection { background: rgb(var(--accent-rgb) / 0.3); color: #fff; }

/* Imágenes nunca desbordan su contenedor (evita saltos de layout en cards) */
img { max-width: 100%; }

/* Botones con leve "press" al tocar, como apps nativas (reduced-motion lo anula) */
.btn:active { transform: scale(0.97); }

/* Modales como "sheet" de iOS: fondo plano en vez de gradiente — más limpio.
   (El blur del fondo, el radio 16px y la sombra ya estaban.) */
.modal { background: var(--surface); }

/* ============================================================================
   PATRÓN SARANCE — un solo contenedor de sección para toda la app
   ============================================================================
   Auditoría de diseño 2026-08: convivían 7 contenedores que son el MISMO
   objeto con números distintos (.equipo-section r16/p22, .config-section
   r12/p20, .panel r14/p20, .insights-card r16/p20…). Por eso cada vista se
   "sentía" de un producto distinto.

   La vista Equipo es la que quedó bien, así que su forma pasa a ser la regla.
   Se aplica por alias al final del archivo: las demás vistas la adoptan sin
   tocar una línea de su HTML.

   Conservador a propósito: NO toca .card (tarjeta chica del kanban) ni los
   KPI (.md3-stat, .calidad-kpi), que son otro objeto y otra escala.
   ============================================================================ */
.config-section,
.panel,
.insights-card {
  background: var(--surface-section);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-8);
}

/* Encabezado de sección: mismo escalón tipográfico que Equipo
   (Inter 10.5px uppercase con letter-spacing amplio). */
.config-section > h3,
.panel > .panel-title,
.insights-h2 {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-5);
}

/* Utilitarias mínimas para ir sacando estilos inline sin reescribir vistas */
.t-meta    { font-size: var(--fs-meta); color: var(--muted); }
.t-eyebrow { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 600;
             letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.row          { display: flex; align-items: center; gap: var(--sp-4); }
.row-between  { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.is-hidden    { display: none !important; }

/* ============================================================================
   DICTAR NOTA — indicador de "grabando"
   ============================================================================
   El dictado real lo hace el teclado del celular, pero sin ninguna señal en
   pantalla la vista se sentía muerta: parecía un textarea cualquiera. Estas
   barritas se mueven mientras la persona dicta y se calman al hacer silencio.
   Respeta prefers-reduced-motion.
   ============================================================================ */
.dictar-rec {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin-right: var(--sp-3);
  vertical-align: -2px;
}
.dictar-rec i {
  display: block;
  width: 2.5px;
  height: 3px;
  border-radius: 2px;
  background: var(--muted);
  opacity: 0.45;
  transition: height .18s ease, background .18s ease, opacity .18s ease;
}
.dictar-rec.is-rec i {
  background: var(--accent);
  opacity: 1;
  animation: dictarOnda .9s ease-in-out infinite;
}
.dictar-rec.is-rec i:nth-child(1) { animation-delay: 0s;    }
.dictar-rec.is-rec i:nth-child(2) { animation-delay: .12s;  }
.dictar-rec.is-rec i:nth-child(3) { animation-delay: .24s;  }
.dictar-rec.is-rec i:nth-child(4) { animation-delay: .36s;  }
.dictar-rec.is-rec i:nth-child(5) { animation-delay: .48s;  }

@keyframes dictarOnda {
  0%, 100% { height: 3px;  }
  50%      { height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .dictar-rec.is-rec i { animation: none; height: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BITÁCORA — que contar el día cueste 2 toques, no un párrafo
   0 de 262 jornadas tenían resumen. El textarea en blanco al final del día
   perdía siempre contra el botón de descartar. (2026-08-27)
   ══════════════════════════════════════════════════════════════════════════ */
.rj-chip {
  font-size: 12px;
  padding: 6px 12px;
  min-height: 32px;
  border-radius: var(--r-pill, 99px);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rj-chip:hover { border-color: var(--accent); color: var(--text); }
.rj-chip--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* Aviso en la tarjeta colapsada: antes el "sin resumen" vivía dentro del
   detalle plegado, así que nadie lo veía nunca. */
.btn-falta-bitacora {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--r-pill, 99px);
  border: 1px solid rgb(var(--warning-rgb) / 0.45);
  background: rgb(var(--warning-rgb) / 0.12);
  color: var(--warning);
  cursor: pointer;
  white-space: nowrap;
}
.btn-falta-bitacora:hover { background: rgb(var(--warning-rgb) / 0.22); }

@media (prefers-reduced-motion: reduce) {
  .rj-chip { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROGRESO DEL DÍA — checklist en vez de cuota
   La cuota ("3 piezas aprobadas hoy") solo la podía poner en verde un editor.
   Con 2 aprobaciones en toda la historia, cada pasante veía "negro" todos los
   días que trabajaba. Ahora son tres preguntas que responde uno mismo.
   Ver 20260827_progreso_por_checklist.sql (2026-08-27)
   ══════════════════════════════════════════════════════════════════════════ */
.pg-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.pg-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.pg-check-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}
.pg-check-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  line-height: 1.35;
}
.pg-check-detail {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
  line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════════════════
   TU DÍA — contenedor del checklist en escritorio
   Vivía dentro del bloque oculto de compatibilidad, así que la tarjeta de
   progreso nunca se vio en escritorio (ni la vieja de cuota, ni el checklist
   nuevo). Mismo lenguaje visual que el patrón de secciones. (2026-08-27)
   ══════════════════════════════════════════════════════════════════════════ */
.pg-card {
  background: var(--surface-section, var(--card));
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 14px);
  padding: var(--sp-5, 18px) var(--sp-6, 20px);
  margin-bottom: var(--sp-5, 18px);
}

/* ══════════════════════════════════════════════════════════════════════════
   DEVOLUCIÓN DE LA IA — coach, no semáforo
   Con 20 pasantes remotos, esperar la corrección del coordinador significa
   repetir el error varios días. Esto le llega a la persona en dos minutos.
   El verde es "listo", el ámbar es "hay algo que mejorar" — nunca rojo: no
   es una nota, es una ayuda. (2026-08-27)
   ══════════════════════════════════════════════════════════════════════════ */
.rev-ia {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  padding: var(--sp-4, 14px) var(--sp-5, 16px);
  font-size: 13px;
  line-height: 1.55;
  background: var(--surface2);
}
.rev-ia--ok   { border-color: rgb(var(--success-rgb) / 0.35); background: rgb(var(--success-rgb) / 0.07); }
.rev-ia--fix  { border-color: rgb(var(--warning-rgb) / 0.35);  background: rgb(var(--warning-rgb) / 0.07); }
.rev-ia--warn { border-color: rgb(var(--warning-rgb) / 0.3);  background: rgb(var(--warning-rgb) / 0.05); color: var(--text-dim); }
.rev-ia--load { color: var(--muted); font-style: italic; }

.rev-ia__head {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: var(--sp-3, 10px);
}
.rev-ia__block { margin-top: var(--sp-3, 10px); }
.rev-ia__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 4px;
}
.rev-ia ul { margin: 0; padding-left: 18px; }
.rev-ia li { margin-bottom: 5px; color: var(--text-dim); }
.rev-ia li strong { color: var(--text); font-weight: 600; }
.rev-ia__foot {
  margin-top: var(--sp-3, 10px);
  padding-top: var(--sp-2, 8px);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}

/* Botón de acción dentro del checklist. El punto pendiente deja de ser un
   reproche y pasa a ser la cosa que hay que hacer, a un toque. (2026-08-27) */
.pg-check-btn {
  flex-shrink: 0;
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  min-height: 34px;
  border-radius: var(--r-pill, 99px);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.pg-check-btn:hover { background: var(--accent); color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) { .pg-check-btn { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   ASIGNAR UNA NOTICIA — repartir por carga, no por memoria
   La lista viene ordenada por quién tiene menos horas esta semana, así el
   trabajo cae donde hay lugar y no siempre sobre el mismo. (2026-08-27)
   ══════════════════════════════════════════════════════════════════════════ */
.asig-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.asig-persona {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 52px;
  padding: 9px 12px;
  border-radius: var(--r-md, 10px);
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.asig-persona:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.06);
}
.asig-persona:disabled { cursor: default; }
.asig-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--on-accent);
}
.asig-nombre {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.asig-meta {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}
@media (prefers-reduced-motion: reduce) { .asig-persona { transition: none; } }

/* Filtro por área del semáforo. Con redacción, marketing y diseño en la misma
   lista, verlas todas juntas no dice nada. Solo aparece si hay más de un
   área cargada. (2026-08-27) */
.peloton-filtro {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.peloton-chip {
  font-size: 12px;
  padding: 5px 12px;
  min-height: 30px;
  border-radius: var(--r-pill, 99px);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  cursor: pointer;
}
.peloton-chip:hover { border-color: var(--accent); }
.peloton-chip--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   RETOS DE LA PASANTÍA — requisitos del convenio + opinión asesora de la IA
   Cada tarjeta muestra el reto, su estado, y si la IA opinó, por qué. La IA
   nunca decide el estado — solo explica su lectura. (2026-09-07)
   ══════════════════════════════════════════════════════════════════════════ */
.reto-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--r-md, 10px);
  padding: 10px 13px;
  margin-bottom: 8px;
}
.reto-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.reto-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.reto-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--r-pill, 99px);
  white-space: nowrap;
}
.reto-programa {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.reto-ia {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface);
  border-radius: 8px;
  padding: 7px 10px;
  margin-top: 8px;
  line-height: 1.5;
}
.reto-ia strong { color: var(--text); }
.reto-acciones {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

/* Vencimiento de un reto, dentro de la tarjeta. Ámbar si vence en 7 días o
   menos, rojo si ya venció — para que salte a la vista sin tener que leer
   la fecha exacta. (2026-09-07) */
.reto-vence { color: var(--muted); }
.reto-vence--pronto { color: var(--warning); font-weight: 600; }
.reto-vence--tarde { color: var(--danger); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   PANORAMA DEL EQUIPO — horas, retos y tareas en una sola pantalla
   Grupos compactos, clickeables, cada uno abre la ficha de la persona.
   (2026-09-15)
   ══════════════════════════════════════════════════════════════════════════ */
.panorama-grupo { margin-bottom: 16px; }
.panorama-grupo:last-child { margin-bottom: 0; }
.panorama-grupo-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.panorama-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-md, 10px);
  background: var(--surface2);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.panorama-item:hover { border-color: var(--accent); }
.panorama-item-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.panorama-item-detalle {
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .panorama-item { transition: none; } }
@media (max-width: 600px) {
  .panorama-item { flex-direction: column; align-items: flex-start; gap: 2px; }
  .panorama-item-detalle { text-align: left; white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RECURSOS DEL EQUIPO — links, archivos y datos, dentro de Mi día
   (2026-09-15)
   ══════════════════════════════════════════════════════════════════════════ */
.recurso-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md, 10px);
  background: var(--surface2);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.recurso-item:hover { border-color: var(--accent); }
.recurso-item-titulo { font-size: 13px; font-weight: 600; color: var(--text); }
.recurso-item-desc { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.recurso-item--texto { flex-direction: column; align-items: flex-start; cursor: default; }
.recurso-item-top { display: flex; align-items: center; gap: 10px; }
.recurso-item-texto { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; padding-left: 26px; white-space: pre-wrap; }
.recurso-tipo-tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .recurso-item { transition: none; } }

/* ── Actividades de hoy + Revisiones (2026-09-26) ───────────────────────── */
.act-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}
.act-item--editable { cursor: pointer; }
.act-item--editable:hover, .act-item--editable:focus-visible { border-color: var(--accent); outline: none; }
.act-item-top { display: flex; align-items: baseline; gap: 10px; }
.act-item-hora { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.act-item-titulo { font-size: 13.5px; color: var(--text); font-weight: 500; line-height: 1.4; }
.act-item-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; padding-left: 46px; font-size: 11.5px; color: var(--text-dim); }
.act-item-meta a { color: var(--accent); }
.act-chip { background: rgb(var(--accent-rgb) / 0.12); color: var(--accent); padding: 2px 8px; border-radius: 99px; font-size: 11px; }
.act-total { font-size: 12px; color: var(--text-dim); text-align: right; margin-top: 4px; }
.act-vacio { font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 10px 2px; }
.act-dia { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 14px 0 8px; }
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.act-opcional { font-weight: 400; color: var(--muted); }
.act-resumir-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.act-resumen { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: rgb(var(--info-rgb) / 0.06); border: 1px solid rgb(var(--info-rgb) / 0.2); font-size: 12.5px; line-height: 1.55; color: var(--text); }
.act-detalle { width: 100%; }
.act-detalle summary { cursor: pointer; color: var(--accent); }
.act-detalle div { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text); }

.rev-item { padding: 10px 12px; border: 1px solid rgb(var(--info-rgb) / 0.28); border-radius: 10px; background: rgb(var(--info-rgb) / 0.05); margin-bottom: 8px; }
.rev-item--hecha, .rev-item--cancelada { opacity: 0.6; border-color: var(--border); background: var(--surface); }
.rev-item-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.rev-item-cuando { color: var(--info); font-weight: 600; text-transform: capitalize; }
.rev-item-estado { color: var(--muted); }
.rev-item-tema { font-size: 13.5px; color: var(--text); margin-top: 4px; line-height: 1.4; }
.rev-item-dur { font-size: 11px; color: var(--muted); }
.rev-item-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rev-item-acciones .btn { min-height: 32px; text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  .act-item-meta { padding-left: 0; }
  .rev-item-acciones .btn { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .act-item { transition: none; } }

/* ── Tu equipo hoy (coordinador, 2026-09-27) ───────────────────────────── */
.eq-resumen { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.eq-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s ease; }
.eq-item:hover, .eq-item:focus-visible { border-color: var(--accent); outline: none; }
.eq-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eq-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.eq-punto--activa { background: var(--success); box-shadow: 0 0 0 3px rgb(var(--success-rgb) / 0.18); }
.eq-punto--hecha { background: var(--accent); }
.eq-punto--nada { background: var(--danger); }
.eq-nombre { font-size: 13.5px; font-weight: 600; color: var(--text); }
.eq-estado { margin-left: auto; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.eq-acts { font-size: 12px; color: var(--text); margin-top: 6px; line-height: 1.45; padding-left: 16px; }
.eq-acts--vacio { color: var(--muted); }
.eq-rev { font-size: 11.5px; color: var(--info); margin-top: 4px; padding-left: 16px; }
@media (max-width: 760px) { .eq-estado { margin-left: 16px; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .eq-item { transition: none; } }
.eq-espera { font-size: 12px; color: var(--warning); margin-top: 4px; padding-left: 16px; font-weight: 500; }
.eq-avisos { margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.eq-aviso { font-size: 12px; color: var(--text-dim); background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; padding: 8px 10px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.eq-aviso strong { color: var(--text); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   HORAS PREVIAS — horas hechas antes de entrar al sistema (2026-10-01)
   El pasante pide, el director aprueba. Mismo lenguaje que .pg-card / .act-*.
   Estados: pendiente = ámbar, aprobada = verde, rechazada = rojo suave,
   retirada = gris. Nunca rojo fuerte: es una respuesta, no un castigo.
   ══════════════════════════════════════════════════════════════════════════ */
.hp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hp-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; max-width: 46ch; }
.hp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hp-stat { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.hp-stat-num { font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--text); }
.hp-stat-num small { font-size: 12px; color: var(--muted); margin-left: 2px; font-family: inherit; }
.hp-stat--ok .hp-stat-num { color: var(--accent); }
.hp-stat-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 3px; }
.hp-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--surface); }
.hp-item-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-item-horas { font-family: var(--font-display); font-size: 20px; color: var(--text); }
.hp-item-horas small { font-size: 12px; color: var(--muted); }
.hp-item-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.hp-item-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-top: 8px; white-space: pre-wrap; word-break: break-word; }
.hp-item-nota { font-size: 12.5px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface2); color: var(--text-dim); line-height: 1.45; }
.hp-item-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hp-chip { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; }
.hp-chip--pendiente { color: var(--warning); background: rgb(var(--warning-rgb) / 0.1); border-color: rgb(var(--warning-rgb) / 0.3); }
.hp-chip--aprobada  { color: var(--success); background: rgb(var(--success-rgb) / 0.1); border-color: rgb(var(--success-rgb) / 0.3); }
.hp-chip--rechazada { color: var(--danger); background: rgb(var(--danger-rgb) / 0.08); border-color: rgb(var(--danger-rgb) / 0.28); }
.hp-chip--retirada  { color: var(--muted); background: var(--surface2); border-color: var(--border); }
.hp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp-lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.hp-hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.hp-err { display: none; color: var(--danger); font-size: 12px; margin-top: 10px; }
@media (max-width: 520px) { .hp-form-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   MENÚ MÍNIMO (2026-10-01) — lo esencial primero, el resto en "Más herramientas".
   !important porque otras partes del código fijan style.display en línea.
   ══════════════════════════════════════════════════════════════════════════ */
body.menu-minimo .nav-item.nav-extra { display: none !important; }
.nav-label.nav-label--vacio { display: none !important; }
.nav-item.nav-mas { cursor: pointer; opacity: .75; margin-top: 6px; }
.nav-item.nav-mas:hover, .nav-item.nav-mas:focus-visible { opacity: 1; }