/* ══════════════════════════════════════════════════════════════
   ARPADA TRADING — COMPONENTES
   Origen: static/web/css/arpada-components.css, arpada-ticker.css,
   arpada-hero.css (valores exactos). Lo marcado "AÑADIDO" no existe
   en la web: son las piezas de app que el dashboard necesita para
   vivir sin Bootstrap. Todos los valores salen de tokens.css.
   ══════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--arpada-navy-deep);
  color: var(--arpada-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--arpada-cyan-bright); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--arpada-cyan); }
:focus-visible { outline: 2px solid var(--arpada-cyan); outline-offset: 2px; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Fondo de app con profundidad — AÑADIDO ───────────────────────
   Para que el blur de las cards tenga algo detrás. Capas, de arriba abajo:
   luz cyan tenue detrás de la cabecera, contraluz navy en la esquina
   inferior derecha, trama de 40px (la de las secciones de la web) y una
   base vertical de arpada-ink a arpada-navy-deep.
   .arpada-bg  → en un contenedor (maquetas, secciones).
   body.arpada-app → en páginas reales: la capa va fija con un ::before,
   porque iOS ignora background-attachment: fixed. */
.arpada-bg,
body.arpada-app::before {
  background-color: var(--arpada-navy-deep);
  background-image:
    radial-gradient(ellipse 70% 420px at 50% -80px, rgba(34, 211, 238, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 45% at 100% 100%, rgba(18, 40, 68, 0.85), transparent 70%),
    linear-gradient(rgba(31, 191, 212, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 191, 212, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, var(--arpada-ink) 0%, var(--arpada-navy-deep) 520px);
  background-size: auto, auto, 40px 40px, 40px 40px, auto;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
}
body.arpada-app { background: var(--arpada-navy-deep); }
body.arpada-app::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}
@media (max-width: 640px) { .container { padding: 0 var(--gutter-mobile); } }

/* ── Navbar (origen: .navbar-arpada) ──────────────────────────── */
.navbar-arpada {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  transition: all 250ms ease;
  font-family: var(--font-sans);
}
.navbar-arpada.scrolled,
.navbar-arpada.solid {
  background: var(--arpada-navbar-glass);
  backdrop-filter: blur(var(--blur-navbar)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-navbar)) saturate(140%);
  border-bottom: 1px solid var(--arpada-line);
}
.navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.navbar-brand-text { font-weight: 700; font-size: 17px; color: var(--arpada-text); letter-spacing: -0.2px; white-space: nowrap; }
.navbar-brand-text span { font-weight: 400; opacity: 0.72; }

.nav-pills { display: flex; align-items: center; gap: var(--space-4); }
.pill-link {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--arpada-text);
  background: transparent;
  transition: all 160ms ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.pill-link.active, .pill-link:hover { background: var(--arpada-cyan); color: var(--arpada-ink); }
.pill-link.outline { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--arpada-line2); display: inline-flex; align-items: center; gap: 7px; }
.pill-link.outline:hover { background: var(--arpada-cyan); color: var(--arpada-ink); }
.nav-sep { width: 1px; height: 22px; background: var(--arpada-line2); margin: 0 10px; }

/* Reloj NY en el navbar del dashboard — AÑADIDO */
.nav-clock { font-family: var(--font-mono); font-size: 12px; color: var(--arpada-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-clock strong { color: var(--arpada-text); font-weight: 600; }

/* Menú móvil — AÑADIDO. Botón de 44px y hoja desplegable. */
.nav-toggle {
  display: none;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--radius-12);
  border: 1px solid var(--arpada-line2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--arpada-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-sheet {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: var(--gutter-mobile);
  right: var(--gutter-mobile);
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--arpada-navy);
  border: 1px solid var(--arpada-line2);
  border-radius: var(--radius-14);
  box-shadow: var(--shadow-banner);
  /* Si no cabe (móvil bajo, horizontal), se desplaza: alto de pantalla menos navbar, separación y margen. */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-sheet a, .nav-sheet button {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--touch-min);
  padding: 0 var(--space-12);
  border-radius: var(--radius-8);
  color: var(--arpada-text);
  font: 500 15px/1.2 var(--font-sans);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.nav-sheet a:hover, .nav-sheet button:hover { background: var(--arpada-cyan-soft); }
.nav-sheet hr { border: 0; border-top: 1px solid var(--arpada-line); margin: var(--space-4) 0; width: 100%; }

@media (max-width: 768px) {
  .navbar-arpada { padding: 12px 18px; }
  .navbar-arpada .nav-pills { display: none; }
  .nav-toggle { display: inline-flex; }
  .navbar-arpada[data-open] .nav-sheet { display: flex; }
  /* Con la hoja abierta el navbar (y la hoja con él) queda por encima del aviso de cookies (z-index 2000). */
  .navbar-arpada[data-open] { z-index: 2100; }
}

/* ── Botones (origen) ─────────────────────────────────────────── */
.btn-primary-arpada, .btn-glass-arpada {
  height: 54px;
  border-radius: var(--radius-12);
  font-family: var(--font-sans);
  font-size: 14.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s ease;
}
.btn-primary-arpada {
  padding: 0 26px;
  border: none;
  background: var(--arpada-cyan);
  color: var(--arpada-ink);
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.btn-primary-arpada:hover { background: var(--arpada-cyan-bright); transform: translateY(-2px); box-shadow: var(--shadow-cta); }
.btn-glass-arpada {
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid var(--arpada-line2);
  color: var(--arpada-text);
  font-weight: 500;
}
.btn-glass-arpada:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--arpada-cyan); }
/* Tamaño compacto para barras de herramientas — AÑADIDO (mínimo táctil) */
.btn-compact { height: var(--touch-min); padding: 0 16px; font-size: 13px; border-radius: var(--radius-10); }
@media (max-width: 768px) {
  .btn-primary-arpada, .btn-glass-arpada { height: 48px; padding: 0 20px; font-size: 13px; }
  .btn-compact { height: var(--touch-min); }
  .btn-block-mobile { width: 100%; }
}

/* ── Cards (origen) ───────────────────────────────────────────── */
.card-arpada {
  background: linear-gradient(180deg, var(--arpada-card-top) 0%, var(--arpada-card-bottom) 100%);
  backdrop-filter: blur(var(--blur-card));
  -webkit-backdrop-filter: blur(var(--blur-card));
  border: 1px solid var(--arpada-line);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  transition: all 0.3s ease;
}
.glass-card {
  background: linear-gradient(180deg, var(--arpada-glass-top) 0%, var(--arpada-glass-bottom) 100%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--arpada-line2);
  border-radius: var(--radius-18);
  box-shadow: var(--shadow-glass);
  padding: var(--space-32);
}
.glass-card.accent { border-color: var(--arpada-cyan-line); }
@media (hover: hover) {
  .card-arpada.interactive:hover { transform: translateY(-4px); border-color: var(--arpada-line2); box-shadow: var(--shadow-card-hover); }
}
/* Cabecera de card — AÑADIDO, a partir de .market-card-header */
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); margin-bottom: var(--space-16); padding-bottom: var(--space-12); border-bottom: 1px solid var(--arpada-line); }
.card-head h3 { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 640px) {
  .card-arpada { padding: var(--space-16); border-radius: var(--radius-14); }
  .glass-card { padding: var(--space-24); }
}

/* ── Eyebrow badge y pulse-dot (origen) ───────────────────────── */
.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--arpada-cyan-soft);
  border: 1px solid var(--arpada-cyan-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--arpada-cyan-bright);
  text-transform: uppercase;
}
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--arpada-green); box-shadow: 0 0 8px var(--arpada-green); animation: arpada-pulse 2s ease-in-out infinite; }
.pulse-dot.closed { background: var(--arpada-red); box-shadow: 0 0 8px var(--arpada-red); animation: none; }
@keyframes arpada-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Cabecera de sección (origen: estilos inline de web_ventajas) ─ */
.section-head { text-align: center; margin-bottom: var(--space-80); }
.section-index { font-family: var(--font-mono); font-size: 11px; color: rgba(31, 191, 212, 0.6); letter-spacing: 3px; margin-bottom: 16px; text-transform: uppercase; }
.section-title { font-size: 56px; font-weight: 700; line-height: 1.1; letter-spacing: -2px; margin: 0 0 24px; color: var(--arpada-text); }
.section-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--arpada-cyan-bright); }
.section-lead { font-size: 18px; line-height: 1.6; color: var(--arpada-muted); max-width: 680px; margin: 0 auto; }
@media (max-width: 768px) {
  .section-head { margin-bottom: var(--space-40); }
  .section-title { font-size: 32px; letter-spacing: -1px; }
  .section-lead { font-size: 16px; }
}

/* ── Chip (origen: .market-stat-change, generalizado) ─────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-4);
  white-space: nowrap;
  color: var(--arpada-muted);
  background: rgba(255, 255, 255, 0.06);
}
.chip.positive { color: var(--arpada-green); background: var(--arpada-green-soft); }
.chip.negative { color: var(--arpada-red); background: var(--arpada-red-soft); }
.chip.warning { color: var(--arpada-amber); background: var(--arpada-amber-soft); }
.chip.brand { color: var(--arpada-cyan-bright); background: var(--arpada-cyan-soft); }

/* ── Stat card (origen) ───────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-20); }
.stat-card {
  background: linear-gradient(180deg, var(--arpada-card-top) 0%, var(--arpada-card-bottom) 100%);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid var(--arpada-line);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.stat-value { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--arpada-cyan-bright); letter-spacing: -0.5px; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 12px; color: var(--arpada-muted); text-transform: uppercase; letter-spacing: 0.5px; }
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .stat-card { padding: var(--space-16); }
  .stat-value { font-size: 24px; }
}

/* ── Tarjeta de mercado (origen: .live-market-card) ───────────── */
.market-stats { display: flex; flex-direction: column; gap: var(--space-16); }
.market-stat-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); }
.market-stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--arpada-muted); letter-spacing: 0.5px; }
.market-stat-value { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--arpada-text); font-variant-numeric: tabular-nums; }
.market-update-time { font-size: 11px; color: var(--arpada-dim); font-family: var(--font-mono); }

/* ── Cinta de tickers (origen: .ticker-bar) ───────────────────── */
.ticker-bar { background: rgba(8, 20, 38, 0.72); backdrop-filter: blur(14px); border-top: 1px solid var(--arpada-line); border-bottom: 1px solid var(--arpada-line); overflow: hidden; padding: 12px 0; }
.ticker-scroll { display: flex; gap: 42px; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; animation: arpada-ticker 60s linear infinite; }
.ticker-bar:hover .ticker-scroll { animation-play-state: paused; }
/* --ticker-recorrido lo pone arpada-main.js (una pasada exacta en px); sin JS, media cinta. */
@keyframes arpada-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(var(--ticker-recorrido, -50%)); } }
.ticker-item { display: inline-flex; gap: 8px; align-items: baseline; flex-shrink: 0; }
.ticker-symbol { color: var(--arpada-cyan-bright); font-weight: 600; letter-spacing: 0.3px; }
.ticker-value { color: var(--arpada-text); font-variant-numeric: tabular-nums; }
.ticker-upside { color: var(--arpada-green); font-size: 11px; font-weight: 500; }
.ticker-downside { color: var(--arpada-red); font-size: 11px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .ticker-scroll { animation: none; overflow-x: auto; } }
@media (max-width: 768px) { .ticker-bar { padding: 10px 0; } .ticker-scroll { font-size: 11px; gap: 28px; } }

/* ── Selector de idioma (origen) ──────────────────────────────── */
.language-selector { position: relative; }
.lang-dropdown, .menu-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px;
  background: var(--arpada-navy);
  border: 1px solid var(--arpada-line2);
  border-radius: var(--radius-12);
  padding: 8px;
  z-index: 1000;
  box-shadow: var(--shadow-banner);
}
.lang-option, .menu-dropdown a, .menu-dropdown button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 40px;
  border: none; background: transparent; color: var(--arpada-text); font: 13px/1.2 var(--font-sans);
  border-radius: var(--radius-6); cursor: pointer; text-align: left;
}
.lang-option:hover, .menu-dropdown a:hover, .menu-dropdown button:hover { background: var(--arpada-cyan-soft); }

/* Desplegable sin JS con <details> — AÑADIDO (sustituye a dropdown de Bootstrap) */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }

/* ── Banner de cookies (origen) ───────────────────────────────── */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 880px; margin: 0 auto; z-index: 2000; display: flex; align-items: center; gap: 24px; padding: 20px 24px; border-radius: var(--radius-14); background: var(--arpada-navy-deep); border: 1px solid var(--arpada-line2); box-shadow: var(--shadow-banner); }
.cookie-banner.inline { position: static; }
.cookie-banner__title { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.cookie-banner__text p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--arpada-muted); }
.cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner__btn { min-width: 120px; height: 44px; padding: 0 22px; border-radius: var(--radius-10); background: transparent; border: 1px solid var(--arpada-cyan); color: var(--arpada-text); font: 600 14px var(--font-sans); cursor: pointer; }
.cookie-banner__btn:hover { background: var(--arpada-cyan-soft); }
@media (max-width: 640px) { .cookie-banner { flex-direction: column; align-items: stretch; gap: 16px; } .cookie-banner__actions .cookie-banner__btn { flex: 1; } }

/* ══ AÑADIDOS PARA EL DASHBOARD (sustituyen a Bootstrap) ═════════ */

/* ── Rejilla: móvil primero ───────────────────────────────────── */
.grid { display: grid; gap: var(--space-16); grid-template-columns: minmax(0, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 768px) {
  .grid { gap: var(--space-24); }
  .md-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg-span-2 { grid-column: span 2; }
}
.stack { display: flex; flex-direction: column; gap: var(--space-16); }
.row { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.spacer { flex: 1; }

/* ── Tabla de datos ───────────────────────────────────────────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--arpada-line); border-radius: var(--radius-12); }
.table-arpada { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-arpada th {
  position: sticky; top: 0;
  background: var(--arpada-navy-mid);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--arpada-muted); text-align: left; padding: 10px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--arpada-line2);
}
.table-arpada td { padding: 10px 12px; border-bottom: 1px solid var(--arpada-line); color: var(--arpada-text); white-space: nowrap; }
.table-arpada tr:last-child td { border-bottom: 0; }
.table-arpada tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.table-arpada .num, .table-arpada th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-arpada td.num { font-family: var(--font-mono); }
.table-arpada .sym { font-family: var(--font-mono); font-weight: 600; color: var(--arpada-cyan-bright); letter-spacing: 0.3px; }
/* Primera columna fija al hacer scroll horizontal */
.table-arpada.sticky-first th:first-child, .table-arpada.sticky-first td:first-child { position: sticky; left: 0; background: var(--arpada-navy-deep); z-index: 1; box-shadow: 1px 0 0 var(--arpada-line); }
.table-arpada.sticky-first th:first-child { background: var(--arpada-navy-mid); z-index: 2; }
/* Celda resaltada (strike, ITM) */
.table-arpada .cell-key { background: var(--arpada-navy); font-weight: 700; text-align: center; }
.table-arpada .cell-itm { background: var(--arpada-cyan-soft); }

/* Filas como tarjetas por debajo de 640px: cada td lleva data-label */
@media (max-width: 640px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--arpada-line); }
  .table-stack td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: var(--space-12); white-space: normal; }
  .table-stack td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--arpada-muted); }
  .table-stack td.row-title { font-size: 15px; padding-bottom: 6px; }
  .table-stack td.row-title::before { content: none; }
}

/* ── Formulario ───────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--arpada-muted); }
.input, .select {
  height: var(--touch-min);
  padding: 0 14px;
  background: var(--arpada-navy-mid);
  border: 1px solid var(--arpada-line2);
  border-radius: var(--radius-8);
  color: var(--arpada-text);
  font: 400 16px var(--font-sans); /* 16px: iOS no hace zoom */
  width: 100%;
}
.input::placeholder { color: var(--arpada-dim); }
.input:focus, .select:focus { outline: 2px solid var(--arpada-cyan); outline-offset: 0; border-color: transparent; }
.field .help { font-size: 12px; color: var(--arpada-muted); }
.field.error .input { border-color: var(--arpada-red); }
.field.error .help { color: var(--arpada-red); }
.search { position: relative; }
.search .input { padding-left: 40px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--arpada-muted); pointer-events: none; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--arpada-text); min-height: var(--touch-min); }
.switch input { appearance: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--arpada-navy); border: 1px solid var(--arpada-line2); position: relative; cursor: pointer; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--arpada-muted); transition: transform 0.2s ease; }
.switch input:checked { background: var(--arpada-cyan); border-color: var(--arpada-cyan); }
.switch input:checked::after { transform: translateX(18px); background: var(--arpada-ink); }

/* ── Segmentado (periodos, pestañas, filtros) ─────────────────── */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--arpada-line2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button, .segmented a {
  min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 0; background: transparent;
  color: var(--arpada-muted); font: 500 13px var(--font-sans); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.segmented [aria-pressed="true"], .segmented [aria-current="page"], .segmented [aria-selected="true"] { background: var(--arpada-cyan); color: var(--arpada-ink); font-weight: 600; }
.segmented.block { display: flex; width: 100%; }
.segmented.block > * { flex: 1; justify-content: center; }

/* ── Plegable con <details> (sustituye a collapse de Bootstrap) ── */
.disclosure { border: 1px solid var(--arpada-line); border-radius: var(--radius-12); background: linear-gradient(180deg, var(--arpada-card-top) 0%, var(--arpada-card-bottom) 100%); }
.disclosure > summary { list-style: none; display: flex; align-items: center; gap: var(--space-12); min-height: 52px; padding: 0 var(--space-16); cursor: pointer; font-weight: 600; font-size: 14px; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--arpada-muted); border-bottom: 1.5px solid var(--arpada-muted); transform: rotate(45deg); transition: transform 0.2s ease; }
.disclosure[open] > summary::after { transform: rotate(-135deg); }
.disclosure > .disclosure-body { padding: 0 var(--space-16) var(--space-16); border-top: 1px solid var(--arpada-line); padding-top: var(--space-12); }

/* ── Carga ────────────────────────────────────────────────────── */
.loading-shimmer { display: inline-block; background: linear-gradient(90deg, rgba(232, 238, 246, 0.1) 0%, rgba(232, 238, 246, 0.3) 50%, rgba(232, 238, 246, 0.1) 100%); background-size: 200% 100%; animation: arpada-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-4); min-width: 60px; height: 1em; }
@keyframes arpada-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ══ PATRONES DEL DASHBOARD (salidos de las maquetas) ════════════ */

/* ── Página: cabecera, enlace atrás, columna lateral + contenido ── */
.page { width: 100%; box-sizing: border-box; max-width: var(--container-max); margin: 0 auto; padding: 32px 24px 64px; display: flex; flex-direction: column; gap: 24px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; flex: 1; min-width: 240px; font-size: 40px; line-height: 1.2; font-weight: 600; letter-spacing: -1px; }
.page-head .page-sub { width: 100%; margin-top: -8px; font-size: 13px; color: var(--arpada-muted); }
.back-link { align-self: flex-start; min-height: var(--touch-min); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.back-link::before { content: ""; width: 7px; height: 7px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-right: 2px; }
/* Columna lateral + contenido: en móvil se apilan solas, sin media query */
.layout-split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.layout-aside { flex: 1 1 300px; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.layout-aside.right { max-width: 400px; }
.layout-content { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 768px) {
  .page { padding: 16px var(--gutter-mobile) 40px; gap: 16px; }
  .page-head h1 { font-size: 28px; }
  .layout-aside, .layout-aside.right { max-width: none; }
}
/* Menú lateral de secciones (perfil, backoffice) */
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a { min-height: var(--touch-min); display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: var(--radius-10); color: var(--arpada-text); font-size: 14px; }
.side-nav a:hover { background: rgba(255, 255, 255, 0.04); }
.side-nav a[aria-current="page"] { background: var(--arpada-cyan-soft); color: var(--arpada-cyan-bright); font-weight: 600; }
@media (max-width: 768px) { .side-nav { display: none; } } /* en móvil la sustituye un .tabbar */

/* ── Barra de pestañas fija (secciones de una página) ─────────── */
.tabbar { position: sticky; top: 68px; z-index: 5; padding: 6px 0; background: var(--arpada-navbar-glass); backdrop-filter: blur(var(--blur-navbar)); -webkit-backdrop-filter: blur(var(--blur-navbar)); }
.tabbar .segmented { display: flex; width: 100%; }
.tabbar .segmented > * { flex: 1; justify-content: center; }
@media (min-width: 769px) { .tabbar { position: static; background: none; backdrop-filter: none; padding: 0; } .tabbar .segmented { display: inline-flex; width: auto; } .tabbar .segmented > * { flex: none; } }

/* ── Filas etiqueta / valor ───────────────────────────────────── */
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--arpada-line); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv > :first-child { color: var(--arpada-muted); }
.kv > :last-child { text-align: right; }
.kv .num { font-size: 13px; }
.kv.compact { min-height: 32px; border-bottom: 0; font-size: 13px; }

/* ── Avatar ───────────────────────────────────────────────────── */
.avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--arpada-cyan-soft); border: 2px solid var(--arpada-cyan-line); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--arpada-cyan-bright); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; border-width: 1px; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }

/* ── Tira de días del calendario ──────────────────────────────── */
.day-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.day-strip::-webkit-scrollbar { display: none; }
.day-strip.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; }
.day-btn {
  flex-shrink: 0; width: 56px; height: 68px; border-radius: var(--radius-12);
  border: 1px solid var(--arpada-line2); background: var(--arpada-navy-mid); color: var(--arpada-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-sans); cursor: pointer; transition: border-color 0.15s ease;
}
.day-strip.grid5 .day-btn { width: auto; height: 60px; }
.day-btn .dow { font-size: 11px; color: var(--arpada-muted); text-transform: uppercase; }
.day-btn .dnum { font-family: var(--font-mono); font-size: 20px; font-weight: 600; line-height: 1.1; }
.day-btn:hover { border-color: var(--arpada-cyan-line); }
.day-btn[aria-pressed="true"] { background: var(--arpada-cyan); border-color: var(--arpada-cyan); color: var(--arpada-ink); }
.day-btn[aria-pressed="true"] .dow { color: var(--arpada-ink); font-weight: 600; }
.day-btn[aria-pressed="true"] .dnum { font-weight: 700; }
.day-btn.holiday { border-color: var(--arpada-red); }
.day-btn.holiday .dnum { color: var(--arpada-red); }
.day-btn.early { border-color: var(--arpada-amber); }
.day-btn.early .dow::after { content: "*"; color: var(--arpada-amber); }
.day-btn:disabled, .day-btn.weekend { background: transparent; border-style: dashed; color: var(--arpada-muted); cursor: default; }
.day-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--arpada-muted); }
.day-legend span { display: inline-flex; align-items: center; gap: 6px; }
.day-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--arpada-line2); }
.day-legend i.holiday { border-color: var(--arpada-red); }
.day-legend i.early { border-color: var(--arpada-amber); }
.day-legend i.weekend { border-style: dashed; }

/* ── Tarjeta de empresa (calendario en móvil) ─────────────────── */
.company-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: var(--radius-14); border: 1px solid var(--arpada-line); background: linear-gradient(180deg, var(--arpada-card-top) 0%, var(--arpada-card-bottom) 100%); color: var(--arpada-text); }
a.company-card:hover { border-color: var(--arpada-cyan-line); color: var(--arpada-text); }
.company-card .cc-head { display: flex; align-items: flex-start; gap: 10px; }
.company-card .cc-id { flex: 1; min-width: 0; }
.company-card .cc-sym { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--arpada-cyan-bright); }
.company-card .cc-name { font-size: 13px; color: var(--arpada-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-card .cc-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.company-card .cc-data .num { font-size: 14px; font-weight: 600; }
.company-card .cc-data .up, .company-card .cc-data .down { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.company-card .cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--arpada-line); font-size: 12px; color: var(--arpada-muted); }
.company-card .cc-foot strong { color: var(--arpada-text); font-family: var(--font-mono); font-weight: 600; }
.up { color: var(--arpada-green); }
.down { color: var(--arpada-red); }

/* ── Indicador vs. industria ──────────────────────────────────── */
.indicator-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.indicator { padding: 12px; border-radius: var(--radius-10); border: 1px solid var(--arpada-line); display: flex; flex-direction: column; gap: 6px; }
.indicator .chip { align-self: flex-start; font-size: 14px; }
.indicator .ref { font-family: var(--font-mono); font-size: 11px; color: var(--arpada-muted); }

/* ── Cadena de opciones ───────────────────────────────────────── */
.chain-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chain-totals > div { padding: 12px 10px; border-radius: var(--radius-10); background: var(--arpada-navy-mid); }
.chain-totals .num { display: block; font-size: 18px; font-weight: 700; color: var(--arpada-cyan-bright); }
.chain-totals .positive { background: var(--arpada-green-soft); }
.chain-totals .positive .num { color: var(--arpada-green); }
.chain-totals .negative { background: var(--arpada-red-soft); }
.chain-totals .negative .num { color: var(--arpada-red); }
.table-arpada .side-head { text-align: center; color: var(--arpada-cyan-bright); }
.table-arpada .price-row td { padding: 4px 12px; background: var(--arpada-cyan-soft); border-bottom: 1px solid var(--arpada-cyan-line); font-family: var(--font-mono); font-size: 11px; color: var(--arpada-cyan-bright); text-align: center; }
/* En móvil se ve un lado cada vez: data-side en la tabla y data-side-col en cada celda */
@media (max-width: 768px) {
  .chain[data-side="calls"] [data-side-col="puts"], .chain[data-side="puts"] [data-side-col="calls"] { display: none; }
}
@media (min-width: 769px) { .chain-side-toggle { display: none; } }

/* ── Hoja inferior (móvil) / panel (escritorio) ───────────────── */
.sheet-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(8, 20, 38, 0.72); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 901; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--arpada-navy); border-top: 1px solid var(--arpada-line2); border-radius: var(--radius-18) var(--radius-18) 0 0; box-shadow: var(--shadow-banner);
}
.sheet::before { content: ""; width: 40px; height: 4px; border-radius: 4px; background: var(--arpada-line2); margin: 10px auto 0; flex-shrink: 0; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; border-bottom: 1px solid var(--arpada-line); }
.sheet-head h2 { margin: 0; flex: 1; font-size: 20px; font-weight: 600; }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.sheet-foot { display: flex; gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--arpada-line); }
.sheet.inline { position: static; max-height: none; border-radius: var(--radius-18); border: 1px solid var(--arpada-line2); }
dialog.sheet { margin: 0; width: 100%; max-width: none; padding: 0; color: var(--arpada-text); border: 0; border-top: 1px solid var(--arpada-line2); }
dialog.sheet::backdrop { background: rgba(8, 20, 38, 0.72); }
dialog.sheet:not([open]) { display: none; }

/* ── Aviso ────────────────────────────────────────────────────── */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-12); border: 1px solid var(--arpada-cyan-line); background: var(--arpada-cyan-soft); font-size: 14px; color: var(--arpada-text); }
.alert .alert-mark { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding-top: 2px; color: var(--arpada-cyan-bright); }
.alert.success { border-color: rgba(61, 220, 151, 0.35); background: var(--arpada-green-soft); }
.alert.success .alert-mark { color: var(--arpada-green); }
.alert.warning { border-color: rgba(245, 181, 68, 0.4); background: var(--arpada-amber-soft); }
.alert.warning .alert-mark { color: var(--arpada-amber); }
.alert.danger { border-color: rgba(255, 107, 107, 0.4); background: var(--arpada-red-soft); }
.alert.danger .alert-mark { color: var(--arpada-red); }

/* ── Barra de nivel (calidad de datos, progreso) ──────────────── */
.meter { display: block; width: 100%; min-width: 80px; height: 6px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.row > .meter { flex: 1; width: auto; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--arpada-cyan); }
.meter.warning > span { background: var(--arpada-amber); }
.meter.danger > span { background: var(--arpada-red); }

/* ══════════════════════════════════════════════════════════════
   AÑADIDOS DE LA FASE 1 DE LA MIGRACIÓN DEL DASHBOARD
   Lo que el navbar y el pie del dashboard necesitaban y no estaba.
   Misma copia en docs/diseno/css/arpada.css y static/arpada/css/arpada.css.
   ══════════════════════════════════════════════════════════════ */

/* Pie pegado abajo: la página es una columna y <main> crece. */
body.arpada-app { min-height: 100vh; display: flex; flex-direction: column; }
body.arpada-app > main { flex: 1; }

/* Reloj: separadores, y en móvil solo NY + ET (el resto va a la hoja). */
.nav-clock-sep { color: var(--arpada-line2); }
@media (max-width: 768px) {
  .nav-clock .hide-sm { display: none; }
  .navbar-arpada .nav-clock { margin-left: auto; }
}

/* Botón de la hoja: hamburguesa cerrada, X abierta. */
.nav-toggle .icon-close { display: none; }
.navbar-arpada[data-open] .nav-toggle { border-color: var(--arpada-cyan); }
.navbar-arpada[data-open] .nav-toggle .icon-open { display: none; }
.navbar-arpada[data-open] .nav-toggle .icon-close { display: block; }

/* Hoja: fila de fecha/hora, destino actual, chips y cerrar sesión. */
.nav-sheet .nav-sheet-meta { padding: 6px 12px 8px; font-size: 11px; color: var(--arpada-muted); display: flex; justify-content: space-between; gap: var(--space-12); }
.nav-sheet a[aria-current="page"] { background: var(--arpada-cyan-soft); color: var(--arpada-cyan-bright); }
.nav-sheet a .chip { margin-left: auto; }
.nav-sheet form, .menu-dropdown form { margin: 0; }
.nav-sheet button { width: 100%; }
.menu-danger { color: var(--arpada-red); }

/* Menú de usuario (details.menu): ancho y separadores. */
details.menu > .menu-dropdown { width: max-content; min-width: 220px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); }
.menu-dropdown > a, .menu-dropdown > form, .menu-dropdown > form > button { width: 100%; }
.menu-dropdown hr { border: 0; border-top: 1px solid var(--arpada-line); margin: var(--space-4) 0; width: 100%; }
.menu-dropdown a, .menu-dropdown button { min-height: var(--touch-min); font-size: 14px; justify-content: flex-start; white-space: nowrap; }
.menu-dropdown a:hover { color: var(--arpada-text); }
details.menu > summary.pill-link { min-height: var(--touch-min); }

/* Pie de la app. */
.app-footer { margin-top: var(--space-60); padding: var(--space-24) 0; border-top: 1px solid var(--arpada-line); background: var(--arpada-navy-deep); text-align: center; }
.app-footer p { margin: 0 0 var(--space-8); font-size: 13px; color: var(--arpada-muted); }
.app-footer ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 var(--space-24); }
.app-footer a { display: inline-flex; align-items: center; min-height: var(--touch-min); font-size: 13px; color: var(--arpada-muted); }
.app-footer a:hover { color: var(--arpada-cyan-bright); }

/* ══════════════════════════════════════════════════════════════
   AÑADIDOS DE LA FASE 2 DE LA MIGRACIÓN DEL DASHBOARD (inicio)
   Misma copia en docs/diseno/css/arpada.css y static/arpada/css/arpada.css.
   ══════════════════════════════════════════════════════════════ */

/* Visibilidad por tamaño. Una sola pieza de HTML sirve a móvil y a escritorio. */
.only-md { display: none !important; }
@media (min-width: 769px) {
  .only-sm { display: none !important; }
  .only-md { display: revert !important; }
}

/* Cabecera de la lista de resultados: título, recuento y acciones. */
.list-head { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.list-head .list-title { flex: 1; min-width: 0; }
.list-head .btn-compact { flex-shrink: 0; }
.list-head .list-title strong { display: block; font-size: 17px; font-weight: 600; }
.list-head .list-len { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 13px; color: var(--arpada-muted); }
.select.select-compact { width: auto; height: 36px; padding: 0 28px 0 12px; font-size: 13px; }
.list-head .list-count { font-size: 12px; color: var(--arpada-muted); }

@media (max-width: 768px) {
  .list-head { flex-wrap: nowrap; }
  .list-head .btn-compact { padding: 0 var(--space-12); }
}

/* Sesiones del mercado (pre, regular, post) y tickers clave. */
.session-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); text-align: center; }
.session-grid .num { font-size: 12px; color: var(--arpada-muted); white-space: nowrap; }
.key-tickers { display: flex; flex-wrap: wrap; gap: var(--space-8); max-height: 132px; overflow-y: auto; }

/* Enlaces de ticker que genera el JS o un fragmento (favorites_list_html_api,
   autocomplete.js): .favorite-ticker-btn, .recent-ticker-btn y .ac-item. */
.arpada-app .favorite-ticker-btn, .arpada-app .recent-ticker-btn {
  display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--arpada-cyan-line); background: var(--arpada-cyan-soft);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--arpada-cyan-bright);
}
.arpada-app .recent-ticker-btn { border-color: var(--arpada-line2); background: rgba(255, 255, 255, 0.04); color: var(--arpada-text); }
.arpada-app .favorite-ticker-btn:hover, .arpada-app .recent-ticker-btn:hover { border-color: var(--arpada-cyan); }
/* Las tarjetas llevan backdrop-filter, que crea su propio contexto de apilamiento: sin esto, la lista quedaba
   atrapada dentro de la del buscador y la tarjeta siguiente (la franja de mercado) se pintaba encima. */
.buscador-card { position: relative; z-index: 10; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; max-height: 260px; overflow-y: auto; background: var(--arpada-navy); border: 1px solid var(--arpada-line2); border-radius: var(--radius-12); box-shadow: var(--shadow-banner); padding: var(--space-4); }
.ac-list .ac-item { display: flex; align-items: center; gap: var(--space-8); min-height: var(--touch-min); padding: 0 var(--space-12); border-radius: var(--radius-8); color: var(--arpada-text); font-size: 14px; }
.ac-list .ac-item:hover, .ac-list .ac-item.active { background: var(--arpada-cyan-soft); color: var(--arpada-text); }
.ac-list .ac-empty { color: var(--arpada-muted); justify-content: center; }
.autocomplete-match { color: var(--arpada-cyan-bright); font-weight: 700; }
.ac-list .ac-item strong { flex-shrink: 0; font-family: var(--font-mono); }
.ac-list .ac-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--arpada-muted); }
.ac-list .ac-cik { margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--arpada-muted); }

/* Calendario compacto (2026-11-05): los 5 días y el momento, a la derecha de la búsqueda (encima en móvil). */
.cal-compacto { display: grid; gap: 8px; align-content: start; }
.day-strip.compact { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 0; }
.day-strip.compact .day-btn { width: auto; height: 52px; }
.day-strip.compact .day-btn .dnum { font-size: 18px; }
@media (max-width: 1023px) { .cal-compacto { order: -1; } }
@media (min-width: 1024px) {
  .day-strip.compact .day-btn { width: 58px; }
  .segmented.cal-momento > button { min-height: 34px; padding: 0 10px; font-size: 12px; }
}

/* Búsqueda avanzada del calendario (2026-11-05, _arpada_consulta.html + consulta.js): a todo lo ancho, debajo
   de la franja. Sustituye a los filtros laterales. Por encima de las tarjetas siguientes, como el buscador. */
.consulta-card { position: relative; z-index: 9; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16) var(--space-24); margin-bottom: var(--space-16); }
.consulta-principal { gap: 10px; min-width: 0; }
@media (min-width: 1024px) { .consulta-card { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.consulta-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.consulta-fila [hidden] { display: none; }   /* .btn-glass-arpada pone display y taparía el hidden */
.consulta-card, #consultaSugerencias { font-variant-ligatures: none; }   /* que >= se vea como se escribe */
.consulta-campo { flex: 1 1 260px; min-width: 0; }
.consulta-campo .input { height: 52px; font-family: var(--font-mono); font-size: 15px; }
.consulta-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.consulta-chips:empty { display: none; }
.consulta-chip { display: inline-flex; align-items: center; gap: 6px; }
.consulta-chip code { font-family: var(--font-mono); font-size: 11px; opacity: 0.7; }
.consulta-quitar { min-width: 24px; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.consulta-ayuda { position: relative; }
.consulta-ayuda summary { list-style: none; cursor: pointer; font-family: var(--font-mono); }
.consulta-ayuda summary::-webkit-details-marker { display: none; }
.consulta-ayuda-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(560px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: var(--space-16); background: var(--arpada-navy); border: 1px solid var(--arpada-line2); border-radius: var(--radius-12); box-shadow: var(--shadow-banner); font-size: 13px; }
.consulta-ayuda-panel p { margin: 0 0 var(--space-12); }
.consulta-tabla td, .consulta-tabla th { padding: 6px 8px; }
.consulta-ayuda-panel code { font-family: var(--font-mono); color: var(--arpada-cyan-bright); }
.consulta-reglas { margin: var(--space-12) 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--arpada-muted); }
.ac-list .ac-grupo { padding: 8px 12px 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--arpada-muted); }
/* Mis búsquedas (2026-11-05): las guardadas con su nombre editable y su consulta; las recientes, como enlaces. */
.busquedas-lista, .busquedas-recientes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.busqueda-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: var(--space-12) 0; border-top: 1px solid var(--arpada-line); }
.busqueda-consulta, .busquedas-recientes code { font-family: var(--font-mono); font-size: 12px; color: var(--arpada-cyan-bright); overflow-wrap: anywhere; }
.busqueda-acciones { display: flex; flex-wrap: wrap; gap: var(--space-8); }
@media (min-width: 769px) {
  .busqueda-fila { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); }
}

/* Tabla de resultados como tarjetas en móvil (.table-cards): la MISMA tabla,
   con el <tr> en rejilla. DataTables sigue filtrando, ordenando y paginando las
   mismas filas. Cada celda va a su sitio por su clase cell-*. Los chips
   .cards-only (tamaño, día y momento de publicación) solo se ven en tarjeta. */
.table-cards .cards-only { display: none; }
.table-cards .sub-value { display: block; max-width: 150px; white-space: normal; font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--arpada-muted); }
.table-cards .obj-pct { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
@media (max-width: 768px) {
  .table-cards .table-only { display: none; }
  .table-cards .cards-only { display: inline-flex; }
  .table-cards.table-arpada, .table-cards.table-arpada > tbody { display: block; width: 100%; }
  .table-cards.table-arpada > thead { display: none; }
  .table-cards.table-arpada > tbody { display: flex; flex-direction: column; gap: var(--space-12); }
  .table-cards.table-arpada > tbody > tr {
    position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-12) 0;
    padding: 14px var(--space-16); border: 1px solid var(--arpada-line); border-radius: var(--radius-14);
    background: linear-gradient(180deg, var(--arpada-card-top) 0%, var(--arpada-card-bottom) 100%);
  }
  .table-cards.table-arpada > tbody > tr > td { display: block; min-width: 0; padding: 0; border: 0; white-space: normal; background: none; }
  .table-cards.table-arpada > tbody > tr:hover > td { background: none; }
  .table-cards.table-arpada > tbody > tr > td[data-label]::before {
    content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.5px; text-transform: uppercase; color: var(--arpada-muted);
  }
  .table-cards.table-arpada > tbody > tr > td.num { text-align: left; font-size: 14px; font-weight: 600; }
  .table-cards.table-arpada td.cell-ticker { grid-column: 1 / 4; grid-row: 1; }
  .table-cards.table-arpada td.cell-fecha { grid-column: 4 / 7; grid-row: 1; justify-self: end; text-align: right; }
  .table-cards.table-arpada td.cell-fecha .chip.cards-only { white-space: normal; text-align: right; }
  .table-cards .sub-value { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  .table-cards.table-arpada td.cell-mcap { display: none; }
  .table-cards.table-arpada td.cell-eps, .table-cards.table-arpada td.cell-previo, .table-cards.table-arpada td.cell-objetivo { padding: 12px var(--space-8) 0 0; border-top: 1px solid var(--arpada-line); }
  .table-cards.table-arpada td.cell-eps { grid-column: 1 / 3; grid-row: 2; }
  .table-cards.table-arpada td.cell-previo { grid-column: 3 / 5; grid-row: 2; }
  .table-cards.table-arpada td.cell-objetivo { grid-column: 5 / 7; grid-row: 2; }
  .table-cards.table-arpada td.cell-cp-ratio { grid-column: 1 / 4; grid-row: 3; }
  .table-cards.table-arpada td.cell-int-ab { grid-column: 4 / 7; grid-row: 3; text-align: right; }
  .table-cards.table-arpada td.cell-cp-ratio, .table-cards.table-arpada td.cell-int-ab { padding-top: 10px; border-top: 1px solid var(--arpada-line); font-size: 12px; font-weight: 400; color: var(--arpada-muted); }
  .table-cards.table-arpada td.cell-int-ab strong { color: var(--arpada-text); font-family: var(--font-mono); font-weight: 600; }
  .table-cards.table-arpada td.cell-ticker .sym { font-size: 16px; }
  /* Toda la tarjeta es el enlace del ticker (no hay nada más pulsable dentro). */
  .table-cards.table-arpada td.cell-ticker a.sym::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-14); }
  .table-cards.table-arpada > tbody > tr:has(a.sym:focus-visible) { outline: 2px solid var(--arpada-cyan); outline-offset: 2px; }
  .table-cards.table-arpada td.cell-ticker a.sym:focus-visible { outline: none; }
}
@media (max-width: 768px) and (hover: hover) {
  .table-cards.table-arpada > tbody > tr:hover { border-color: var(--arpada-cyan-line); }
}

/* DataTables 2 sin su integración de Bootstrap: sus controles con el sistema.
   El CSS base de DataTables usa div.dt-container y !important en los colores de los
   botones de paginación, así que aquí se repite el selector con div. y se fuerza. */
div.dt-container { font-family: var(--font-sans); font-size: 13px; color: var(--arpada-text); }
div.dt-container .dt-layout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); margin: 0; padding: var(--space-8) 0; }
div.dt-container .dt-layout-cell { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
div.dt-container .dt-layout-cell.dt-layout-full { width: 100%; display: block; }
div.dt-container .dt-search, div.dt-container .dt-length { display: flex; align-items: center; gap: var(--space-8); color: var(--arpada-muted); }
div.dt-container .dt-input {
  height: var(--touch-min); padding: 0 var(--space-12); background: var(--arpada-navy-mid);
  border: 1px solid var(--arpada-line2); border-radius: var(--radius-8); color: var(--arpada-text); font: 400 16px var(--font-sans);
}
div.dt-container .dt-input:focus-visible { outline: 2px solid var(--arpada-cyan); outline-offset: 0; border-color: transparent; }
div.dt-container .dt-info { font-family: var(--font-mono); font-size: 12px; color: var(--arpada-muted); }
div.dt-container .dt-paging { display: flex; flex-wrap: wrap; gap: var(--space-4); }
div.dt-container .dt-paging .dt-paging-button {
  min-width: var(--touch-min); height: var(--touch-min); margin: 0; padding: 0 var(--space-12); border-radius: var(--radius-pill);
  border: 1px solid var(--arpada-line2); background: transparent !important; color: var(--arpada-text) !important;
  font: 500 13px var(--font-sans); cursor: pointer;
}
div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) { border-color: var(--arpada-cyan); background: var(--arpada-cyan-soft) !important; color: var(--arpada-text) !important; }
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--arpada-cyan) !important; border-color: var(--arpada-cyan); color: var(--arpada-ink) !important; font-weight: 600;
}
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
  background: transparent !important; border-color: transparent; color: var(--arpada-muted) !important; cursor: default;
}
div.dt-container .dt-paging .dt-paging-button:focus-visible { outline: 2px solid var(--arpada-cyan); outline-offset: 2px; }
@media (min-width: 769px) {
  div.dt-container table.table-arpada.dataTable > thead > tr > th {
    padding: 10px 8px; border-bottom: 1px solid var(--arpada-line2); background: var(--arpada-navy-mid); color: var(--arpada-muted);
    white-space: normal; vertical-align: bottom; line-height: 1.3;
  }
  div.dt-container table.table-arpada.dataTable > tbody > tr > td { padding: 10px 8px; border-bottom: 1px solid var(--arpada-line); background: transparent; color: var(--arpada-text); }
  div.dt-container table.table-arpada.dataTable > thead > tr > th.dt-orderable-asc, div.dt-container table.table-arpada.dataTable > thead > tr > th.dt-orderable-desc { cursor: pointer; }
  div.dt-container table.table-arpada.dataTable > thead > tr > th.dt-ordering-asc, div.dt-container table.table-arpada.dataTable > thead > tr > th.dt-ordering-desc { color: var(--arpada-cyan-bright); }
}
@media (max-width: 768px) {
  div.dt-container .dt-length { display: none; }
  div.dt-container .dt-layout-row { justify-content: center; }
  div.dt-container .dt-search { width: 100%; }
  div.dt-container .dt-search .dt-input { flex: 1; }
}

/* Tabla del calendario sin DataTables (2026-11-05, calendar_earnings.js): cabeceras que ordenan (botón con
   aria-sort), paginación propia y fila de «ninguna empresa». */
.th-orden { all: unset; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.th-orden:focus-visible { outline: 2px solid var(--arpada-cyan); outline-offset: 2px; border-radius: 4px; }
.table-cards th[aria-sort="ascending"], .table-cards th[aria-sort="descending"] { color: var(--arpada-cyan-bright); }
.table-cards th[aria-sort="ascending"] .th-orden::after { content: " ▲"; font-size: 9px; }
.table-cards th[aria-sort="descending"] .th-orden::after { content: " ▼"; font-size: 9px; }
.table-cards tr.lista-vacia td { padding: var(--space-24) var(--space-8); text-align: center; color: var(--arpada-muted); }
.lista-paginas { display: flex; align-items: center; justify-content: center; gap: var(--space-12); }
.lista-paginas[hidden] { display: none; }
.lista-paginas button:disabled { opacity: 0.4; cursor: default; }
.lista-paginas .num { font-size: 12px; color: var(--arpada-muted); }
@media (min-width: 769px) {
  .lista-scroll { overflow-x: auto; }
  .table-cards.table-arpada > thead > tr > th {
    padding: 10px 8px; border-bottom: 1px solid var(--arpada-line2); background: var(--arpada-navy-mid); color: var(--arpada-muted);
    white-space: normal; vertical-align: bottom; line-height: 1.3;
  }
  .table-cards.table-arpada > tbody > tr > td { padding: 10px 8px; border-bottom: 1px solid var(--arpada-line); }
}
@media (max-width: 768px) {
  .table-cards.table-arpada tr.lista-vacia td { grid-column: 1 / -1; }
}

/* Mensaje vacío del fragmento heredado de tickers clave. */
.key-tickers small { font-size: 13px; color: var(--arpada-muted); }

/* Tabla de resultados: línea ticker + chip, etiqueta de interés abierto, y scroll horizontal
   de la tabla en escritorio si no cabe (en móvil son tarjetas y no hay scroll). */
.table-cards .id-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.table-cards .oi-label { margin-right: var(--space-4); }
@media (min-width: 769px) {
  .dt-container .dt-layout-cell.dt-layout-full { overflow-x: auto; }
}


/* Tabla de resultados en escritorio: compacta para que quepan las 8 columnas sin scroll. */
@media (min-width: 769px) {
  .table-cards { font-size: 12.5px; }
  .table-cards td.cell-fecha .table-only { display: flex; width: max-content; }
  .table-cards td.cell-fecha .chip.table-only { margin-top: 4px; }
  .table-cards td.cell-int-ab .oi-label { display: block; margin: 0; font-size: 11px; color: var(--arpada-muted); }
}

/* ══════════════════════════════════════════════════════════════
   AÑADIDOS DE LA FASE 3 DE LA MIGRACIÓN DEL DASHBOARD (ficha de ticker)
   Misma copia en docs/diseno/css/arpada.css y static/arpada/css/arpada.css.
   ══════════════════════════════════════════════════════════════ */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Destino de una ancla: deja sitio al navbar (68 px) y a la barra de pestañas. */
.anchor { scroll-margin-top: 132px; }

/* Cabecera de la ficha: símbolo, nombre, cierre previo, resultados y acciones. */
.ticker-hero { display: flex; flex-direction: column; gap: var(--space-16); }
.ticker-hero .th-top { display: flex; align-items: flex-start; gap: var(--space-12); }
.ticker-hero .th-id { flex: 1; min-width: 0; }
.ticker-hero h1 { margin: 0; font-family: var(--font-mono); font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.5px; color: var(--arpada-text); }
.ticker-hero .th-name { display: block; margin-top: var(--space-4); font-size: 16px; }
.ticker-hero .th-meta { margin-top: var(--space-4); font-size: 12px; color: var(--arpada-muted); }
.ticker-hero .th-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; }
.ticker-hero .th-price { font-size: 28px; font-weight: 600; line-height: 1.2; }
.ticker-hero .th-actions { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
@media (min-width: 769px) { .ticker-hero h1 { font-size: 40px; } }

/* Botón de icono de 44 px (favorito). aria-pressed pinta la estrella. */
.icon-btn { flex-shrink: 0; width: var(--touch-min); height: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-12); border: 1px solid var(--arpada-line2); background: rgba(255, 255, 255, 0.06); color: var(--arpada-text); cursor: pointer; transition: border-color 0.15s ease; }
.icon-btn svg { fill: none; }
.icon-btn:hover { border-color: var(--arpada-cyan-line); }
.icon-btn[aria-pressed="true"] { color: var(--arpada-amber); border-color: var(--arpada-amber); background: var(--arpada-amber-soft); }
.icon-btn[aria-pressed="true"] svg { fill: currentColor; }

/* Tres datos con etiqueta (rendimiento, datos clave, totales). */
.stat-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.stat-trio .num { display: block; font-size: 16px; font-weight: 600; }

/* Enlaces a otros tickers (noticias, similares): píldora de 44 px. */
.ticker-link { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--arpada-line2); background: rgba(255, 255, 255, 0.04); font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--arpada-text); }
.ticker-link:hover { border-color: var(--arpada-cyan); color: var(--arpada-text); }
.ticker-link.positive { border-color: rgba(61, 220, 151, 0.4); color: var(--arpada-green); }
.ticker-link.negative { border-color: rgba(255, 107, 107, 0.4); color: var(--arpada-red); }
.ticker-link[aria-current="true"] { border-color: var(--arpada-cyan); background: var(--arpada-cyan-soft); color: var(--arpada-cyan-bright); }
.link-list { display: flex; flex-wrap: wrap; gap: var(--space-8); }

/* Noticias (fragmento que sirve ticker_noticias_html). */
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-item { display: flex; flex-direction: column; gap: var(--space-8); padding: 14px; border: 1px solid var(--arpada-line); border-radius: var(--radius-12); background: var(--arpada-navy-mid); }
.news-item .news-title { display: flex; align-items: flex-start; gap: var(--space-8); font-weight: 600; color: var(--arpada-text); }
.news-item .news-title img { margin-top: 3px; border-radius: var(--radius-4); }
.news-item .news-meta { font-size: 12px; color: var(--arpada-muted); }
.news-item p { margin: 0; font-size: 13px; color: var(--arpada-muted); }
.empty-note { margin: 0; padding: var(--space-8) 0; font-size: 13px; color: var(--arpada-muted); text-align: center; }

/* Cadena de opciones: tabla única; en móvil un lado cada vez (data-side) con el strike
   pegado al borde: a la derecha viendo calls, a la izquierda viendo puts. */
.chain td.cell-key, .chain th.strike-head { text-align: center; }
.chain .cell-itm { background: var(--arpada-cyan-soft); }
.chain-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.chain-controls .segmented.block { flex: 1 1 100%; }
@media (min-width: 769px) { .chain-controls .segmented.block { flex: none; } }
@media (max-width: 768px) {
  .chain[data-side="calls"] td.cell-key, .chain[data-side="calls"] th.strike-head { position: sticky; right: 0; z-index: 1; box-shadow: -1px 0 0 var(--arpada-line2); }
  .chain[data-side="puts"] td.cell-key, .chain[data-side="puts"] th.strike-head { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--arpada-line2); }
  .chain th.strike-head { background: var(--arpada-navy-mid); }
}
.disclosure-body .table-scroll { border: 0; }

/* Fase 3, retoques: el formulario del vencimiento encoge (select flexible, botón fijo) y el
   segmentado Calls/Puts solo existe donde se ve un lado cada vez. El .segmented.block (0,2,0)
   ganaba al ocultado de .chain-side-toggle (0,1,0), por eso se repite con .segmented. */
.options-form { flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; gap: var(--space-8); }
.options-form .select { flex: 1 1 auto; min-width: 0; width: auto; max-width: 100%; }
.options-form .btn-compact { flex-shrink: 0; }
.news-item { overflow-wrap: anywhere; }
@media (min-width: 769px) {
  .segmented.chain-side-toggle, .chain-controls .segmented.chain-side-toggle { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   AÑADIDOS DE LA FASE 4 DE LA MIGRACIÓN DEL DASHBOARD (financials y perfil)
   Misma copia en docs/diseno/css/arpada.css y static/arpada/css/arpada.css.
   ══════════════════════════════════════════════════════════════ */

/* Estados financieros: sangría por nivel de la partida, totales y etiqueta cortada. */
.table-arpada td.lvl-1 { padding-left: 24px; }
.table-arpada td.lvl-2 { padding-left: 36px; }
.table-arpada td.lvl-3 { padding-left: 48px; }
.table-arpada td.lvl-4 { padding-left: 60px; }
.table-arpada td.lvl-5 { padding-left: 72px; }
.table-arpada td.lvl-6 { padding-left: 84px; }
.table-arpada td.lvl-7 { padding-left: 96px; }
.table-arpada tr.row-total td { font-weight: 600; background: rgba(255, 255, 255, 0.03); border-top: 1px solid var(--arpada-line2); }
.table-arpada.sticky-first tr.row-total td:first-child { background: var(--arpada-navy); }
.fin-label { display: block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; }
/* Barra de controles de financials: en escritorio, una fila: periodos (enlaces) · nº de periodos,
   interruptor y «Ver» (el formulario) · buscador a la derecha. En móvil se apila: periodos; luego el
   formulario en una fila; luego el buscador. «Ver» solo acompaña al formulario, nunca a los periodos. */
.fin-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-12) var(--space-16); }
.fin-controls > .segmented { flex: none; }
.fin-form { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: var(--space-12); }
.fin-form .field { flex: none; }
.fin-form .field .input { width: 90px; }
.fin-form .switch { min-width: 0; line-height: 1.3; }
.fin-form .switch input { flex-shrink: 0; }
.fin-form .btn-compact { flex-shrink: 0; }
.fin-search { margin-left: auto; flex: 1 1 220px; max-width: 320px; }
@media (max-width: 768px) {
  .fin-controls { flex-direction: column; align-items: stretch; }
  .fin-controls > .segmented { align-self: flex-start; }
  .fin-form { width: 100%; }
  .fin-form .switch { flex: 1 1 0; }
  .fin-search { margin-left: 0; max-width: none; flex: none; }
}
/* Segmentado que ocupa todo el ancho solo en móvil (en escritorio es un segmentado normal). */
@media (max-width: 768px) {
  .segmented.block-sm { display: flex; width: 100%; }
  .segmented.block-sm > * { flex: 1; justify-content: center; }
}

/* Perfil: cabecera, menú lateral estrecho (solo escritorio) y formularios. */
.profile-head { display: flex; align-items: center; gap: var(--space-16); }
.profile-head h1 { margin: 0; font-size: 28px; line-height: 1.2; }
@media (min-width: 769px) { .profile-head h1 { font-size: 36px; } }
.layout-aside.slim { flex: 0 0 220px; max-width: 220px; }
@media (max-width: 768px) { .layout-aside.slim { display: none; } }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-16); }
.form-stack { display: flex; flex-direction: column; gap: var(--space-16); }
.form-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
@media (min-width: 769px) { .form-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.switch.spread { display: flex; justify-content: space-between; width: 100%; min-height: 46px; padding: 0; border-bottom: 1px solid var(--arpada-line); }
.switch.spread:last-child { border-bottom: 0; }
.errorlist { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--arpada-red); }
.field .help a, .filter-hint a { color: var(--arpada-cyan-bright); }
.news-item .news-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }

/* ══════════════════════════════════════════════════════════════
   AÑADIDOS DE LA FASE 1 DEL BACKOFFICE (base, navbar, KPIs, gráficas)
   Misma copia en docs/diseno/css/arpada.css y static/arpada/css/arpada.css.
   ══════════════════════════════════════════════════════════════ */

/* KPI que es un enlace, nota bajo la cifra y cifra centrada de las tarjetas de estado. */
a.stat-card { color: var(--arpada-text); }
a.stat-card:hover { border-color: var(--arpada-cyan-line); color: var(--arpada-text); }
.stat-card .stat-body { min-width: 0; flex: 1; }
.stat-note { margin-top: var(--space-4); font-size: 12px; color: var(--arpada-muted); }
.stat-hero { text-align: center; padding: var(--space-4) 0 var(--space-8); }
.stat-hero .stat-value { font-size: 34px; margin-bottom: var(--space-4); }
.stat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); text-align: center; }
.stat-pair .num, .stat-trio.center .num { display: block; font-size: 18px; font-weight: 600; }
.stat-trio.center { text-align: center; }
.stat-card .stat-trio { margin-top: var(--space-8); }

/* Gráficas propias en SVG (static/arpada/js/charts.js): sin librerías. El JS pinta el <svg>, la
   leyenda con las cifras y una tabla de datos alternativa dentro de un <details>. */
.chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.chart-canvas { min-height: 120px; }
.chart-canvas svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid line { stroke: var(--arpada-line); stroke-width: 1; }
.chart-axis text { fill: var(--arpada-muted); font-family: var(--font-mono); font-size: 11px; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.main { stroke: var(--arpada-cyan); }
.chart-line.ref { stroke: var(--arpada-muted); stroke-width: 2; stroke-dasharray: 5 5; }
.chart-dot { fill: var(--arpada-navy-deep); stroke: var(--arpada-cyan); stroke-width: 2; }
.chart-dot.ref { stroke: var(--arpada-muted); }
.chart-hit { fill: transparent; }
.chart-hit:hover + .chart-dot, .chart-hit:focus + .chart-dot { fill: var(--arpada-cyan); }
.chart-bar.t0 { fill: var(--arpada-green); }
.chart-bar.t1 { fill: var(--arpada-amber); }
.chart-bar.t2 { fill: var(--arpada-red); }
.chart-bar.t3 { fill: var(--arpada-cyan); }
.chart-bar:hover { opacity: 0.8; }
.chart-line.t0, .chart-dot.t0 { stroke: var(--arpada-green); }
.chart-line.t1, .chart-dot.t1 { stroke: var(--arpada-amber); }
.chart-line.t2, .chart-dot.t2 { stroke: var(--arpada-red); }
.chart-line.t3, .chart-dot.t3 { stroke: var(--arpada-cyan); }
.chart .chart-csv { align-self: flex-start; }
.donut-seg { fill: none; stroke-width: 18; }
.donut-seg.t0 { stroke: var(--arpada-green); }
.donut-seg.t1 { stroke: var(--arpada-amber); }
.donut-seg.t2 { stroke: var(--arpada-red); }
.donut-seg.t3 { stroke: var(--arpada-cyan); }
.donut-total { fill: var(--arpada-text); font-family: var(--font-mono); font-size: 24px; font-weight: 700; text-anchor: middle; }
.donut-caption { fill: var(--arpada-muted); font-size: 10px; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.5px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--arpada-muted); }
.chart-legend li { display: inline-flex; align-items: center; gap: var(--space-8); }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--arpada-cyan); }
.chart-legend .swatch.ref { background: transparent; border: 1px dashed var(--arpada-muted); }
.chart-legend .swatch.t0 { background: var(--arpada-green); }
.chart-legend .swatch.t1 { background: var(--arpada-amber); }
.chart-legend .swatch.t2 { background: var(--arpada-red); }
.chart-legend .swatch.t3 { background: var(--arpada-cyan); }
.chart-legend strong { color: var(--arpada-text); font-family: var(--font-mono); font-weight: 600; }
.chart-data { font-size: 12px; color: var(--arpada-muted); }
.chart-data summary { min-height: var(--touch-min); display: flex; align-items: center; cursor: pointer; }
.chart-data .table-scroll { margin-top: var(--space-4); }
.chart-donut { display: grid; grid-template-columns: minmax(0, 200px) 1fr; align-items: center; gap: var(--space-16); }
@media (max-width: 480px) { .chart-donut { grid-template-columns: 1fr; justify-items: center; } }

/* Texto secundario pequeño bajo un dato. .th-meta se usaba ya en el perfil, la ficha y financials, pero
   solo estaba definido dentro de .ticker-hero: fuera de la cabecera salía sin estilo. */
.th-meta { font-size: 12px; color: var(--arpada-muted); }
.stats-grid > .stat-card.wide .stat-body { width: 100%; }
@media (max-width: 768px) { .stats-grid > .wide { grid-column: 1 / -1; } }
.stat-pair > .stat-card { padding: var(--space-16); }

/* ══════════════════════════════════════════════════════════════
   AÑADIDOS DE LA FASE 2 DEL BACKOFFICE (tablas en modo servidor y logs)
   Misma copia en docs/diseno/css/arpada.css y static/arpada/css/arpada.css.
   ══════════════════════════════════════════════════════════════ */

/* Chip que es un botón (nivel del log: filtra la tabla). Mide 44 px como cualquier objetivo pulsable. */
.chip.chip-action { min-height: var(--touch-min); padding: 0 var(--space-12); border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.chip.chip-action:hover { filter: brightness(1.25); }
.chip.chip-action:focus-visible { outline: 2px solid var(--arpada-cyan); outline-offset: 2px; }
.chip.level-critical { border: 1px solid var(--arpada-red); font-weight: 700; }

/* Mensaje de un log: respeta los saltos de línea y no rompe el ancho de la tabla. */
.log-mensaje { white-space: pre-wrap; word-break: break-word; font-size: 13px; max-width: 70ch; max-height: 12rem; overflow-y: auto; }

/* DataTables en modo servidor con .table-stack: en móvil la fila es una tarjeta; el CSS base de
   DataTables (padding de celda) tiene más especificidad y se corrige aquí. */
@media (max-width: 640px) {
  div.dt-container table.table-stack.dataTable > tbody > tr > td { padding: 3px 0; border: 0; background: none; }
  div.dt-container table.table-stack.dataTable > tbody > tr { display: block; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--arpada-line); }
}
.table-stack td .row { align-items: center; }

/* Fase 3 · botones de paginación deshabilitados: el CSS base de DataTables se carga después de este
   archivo y, con la misma especificidad, gana (rgba(0,0,0,.5) sobre fondo oscuro no se lee). */
body.arpada-app div.dt-container .dt-paging .dt-paging-button.disabled,
body.arpada-app div.dt-container .dt-paging .dt-paging-button.disabled:hover,
body.arpada-app div.dt-container .dt-paging .dt-paging-button.disabled:active { color: var(--arpada-muted) !important; background: transparent !important; }


/* ══════════════════════════════════════════════════════════════
   FASE 3 DEL BACKOFFICE: API Console (diálogos modales y acciones peligrosas)
   Misma copia en docs/diseno/css/arpada.css y static/arpada/css/arpada.css.
   ══════════════════════════════════════════════════════════════ */

/* <dialog> modal centrado (en móvil casi a pantalla completa). Sin .sheet: esa es la hoja inferior. */
dialog.modal-arpada {
  width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; margin: auto;
  color: var(--arpada-text); background: var(--arpada-navy); border: 1px solid var(--arpada-line2);
  border-radius: var(--radius-18); box-shadow: var(--shadow-banner); overflow: hidden;
}
dialog.modal-arpada[open] { display: flex; flex-direction: column; }
dialog.modal-arpada::backdrop { background: rgba(8, 20, 38, 0.72); }
dialog.modal-arpada > form { display: flex; flex-direction: column; min-height: 0; }
.modal-body-arpada { padding: var(--space-20, 20px) var(--space-16); overflow-y: auto; min-height: 0; }
.modal-body-arpada h2 { margin: 0; font-size: 20px; font-weight: 600; }
.modal-foot-arpada { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--arpada-line); }

/* Acción destructiva (revocar): rojo del sistema, sin dejar de ser un botón de 44 px. */
.btn-compact.danger { color: var(--arpada-red); border-color: rgba(255, 107, 107, 0.4); }
.btn-primary-arpada.danger { background: var(--arpada-red); color: var(--arpada-ink); }
.btn-primary-arpada.danger:hover { background: var(--arpada-red); filter: brightness(1.1); }
.btn-glass-arpada:disabled, .btn-primary-arpada:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.table-arpada th a { color: inherit; text-decoration: none; }
.table-arpada th a:hover { color: var(--arpada-cyan-bright); }
.table-arpada code { font-family: var(--font-mono); font-size: 12px; white-space: normal; overflow-wrap: anywhere; }


/* ══════════════════════════════════════════════════════════════
   RESUMEN DE LA FICHA (2026-11-03): frase (modo explicado), barrita (modo directo)
   y selector de modo (ficha sin preferencia y perfil → Resumen).
   Misma copia en docs/diseno/css/arpada.css y static/arpada/css/arpada.css.
   ══════════════════════════════════════════════════════════════ */

.th-resumen { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-16); border-top: 1px solid var(--arpada-line); }
.resumen-frase { margin: 0; font-size: 15px; line-height: 1.55; color: var(--arpada-text); max-width: 72ch; }
.resumen-nota { margin: 0; }
.resumen-nota a { color: var(--arpada-cyan-bright); }

/* Barrita: etiqueta en mono mayúsculas + chip, siempre en el mismo orden. */
.resumen-barrita { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); margin: 0; padding: 0; list-style: none; }
.resumen-barrita li { display: inline-flex; align-items: center; gap: var(--space-8); }
.resumen-barrita .market-stat-label { margin: 0; text-transform: uppercase; }
.resumen-barrita .resumen-pieza { display: inline-flex; align-items: center; gap: var(--space-8); }
.resumen-barrita .resumen-cambiar { margin-left: auto; font-size: 12px; color: var(--arpada-muted); }
.resumen-barrita .resumen-cambiar:hover { color: var(--arpada-cyan-bright); }

/* Selector: dos opciones pulsables, cada una con su ejemplo. Una columna en móvil. */
.resumen-elegir h2 { margin: 0; font-size: 16px; font-weight: 600; }
.resumen-opciones { display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
@media (min-width: 769px) { .resumen-opciones { grid-template-columns: 1fr 1fr; } }
.resumen-opcion {
  display: flex; flex-direction: column; gap: var(--space-8); min-height: var(--touch-min); padding: var(--space-16);
  text-align: left; font: inherit; color: var(--arpada-text); cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--arpada-line2); border-radius: var(--radius-12);
  transition: border-color 0.16s ease, background 0.16s ease;
}
@media (hover: hover) { .resumen-opcion:hover { border-color: var(--arpada-cyan-line); background: var(--arpada-cyan-soft); } }
.resumen-opcion:focus-visible { outline: 2px solid var(--arpada-cyan); outline-offset: 2px; }
.resumen-opcion[aria-pressed="true"] { border-color: var(--arpada-cyan); background: var(--arpada-cyan-soft); }
.resumen-opcion-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); font-weight: 600; font-size: 14px; }
.resumen-opcion-ejemplo { display: block; font-size: 13px; line-height: 1.5; color: var(--arpada-muted); }
.resumen-opcion-ejemplo .resumen-parrafo { display: block; }
.resumen-opcion-ejemplo .resumen-parrafo + .resumen-parrafo { margin-top: var(--space-8); }
.resumen-opcion .resumen-barrita { gap: var(--space-8) var(--space-12); }


/* ══════════════════════════════════════════════════════════════
   SECTORES E INDUSTRIAS (2026-11-04): página de detalle (/dashboard/mercado/). En la home, la franja (abajo).
   Misma copia en docs/diseno/css/arpada.css y static/arpada/css/arpada.css.
   ══════════════════════════════════════════════════════════════ */

.filtro-sector { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.filtro-sector .chip { text-decoration: none; min-height: 32px; padding: 0 var(--space-12); }
@media (hover: hover) { .filtro-sector .chip:hover { color: var(--arpada-cyan-bright); } }
.tabla-grupos th a[aria-sort] { color: var(--arpada-cyan-bright); }
.tabla-grupos th a[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }
.tabla-grupos th a[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; }
.grupos-sector { display: grid; gap: var(--space-8); }
.grupo-sector > summary { gap: 10px; }
.grupo-sector .grupo-nombre { flex: 1; min-width: 0; }
.grupo-industrias { list-style: none; margin: 0; padding: 0 var(--space-16) var(--space-12); }
.grupo-industrias li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--space-12); padding: 8px 0; border-top: 1px solid var(--arpada-line); font-size: 13px; }
.grupo-quien { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
@media (min-width: 769px) {
  .grupo-industrias li { grid-template-columns: minmax(0, 1.2fr) 90px minmax(0, 1.6fr); }
  .grupo-quien { grid-column: auto; }
}
.grupo-ver { font-size: 12px; color: var(--arpada-cyan-bright); }
a.grupo-nombre { color: var(--arpada-text); }
@media (hover: hover) { a.grupo-nombre:hover { color: var(--arpada-cyan-bright); } }
/* Página de industria (2026-11-05): medianas en una fila y una línea de resumen antes de las tablas. */
.industria-medianas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-12) var(--space-24); margin-bottom: var(--space-16); }
.industria-medianas > div { display: grid; gap: 4px; }
.industria-medianas .th-meta { flex-basis: 100%; margin: 0; }
.industria-resumen { margin: 0 0 var(--space-16); color: var(--arpada-muted); font-size: 14px; }
/* Breves de un ticker o una industria (2026-11-05): buscador en la cabecera, días como subtítulos y el bloque
   «En los breves» de la ficha. */
.breves-buscar { flex: 0 1 320px; }
.breves-fecha { margin: var(--space-8) 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--arpada-muted); }
.breves-enlaces { display: inline-flex; flex-wrap: wrap; gap: var(--space-12); font-size: 13px; }
.breves-ficha-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; line-height: 1.45; }
.breves-ficha-lista .num { display: block; font-size: 11px; }
.franja-grupo, .th-meta-link { color: inherit; text-decoration: underline; text-decoration-color: var(--arpada-line2); text-underline-offset: 3px; }
@media (hover: hover) { .franja-grupo:hover, .th-meta-link:hover { color: var(--arpada-cyan-bright); text-decoration-color: currentColor; } }
.grupo-sector > .grupo-ver { display: inline-block; margin: 0 var(--space-16) var(--space-12); }
.tabla-industrias > summary { list-style: none; cursor: pointer; }
.tabla-industrias > summary::-webkit-details-marker { display: none; }
.tabla-industrias > summary h3 { display: inline; margin: 0; font-size: 14px; font-weight: 600; }
.tabla-industrias > summary::after { content: " ▾"; color: var(--arpada-muted); }
.tabla-industrias[open] > summary { margin-bottom: var(--space-12); }
.tabla-industrias[open] > summary::after { content: " ▴"; }

/* Breves (2026-11-04): una noticia corta por hecho, en /dashboard/breves/,
   con días anterior y siguiente y filtro por etiqueta. */
.breves-lista { margin: 0; padding: 0; list-style: none; }
.breve-item { display: flex; align-items: center; gap: var(--space-12); min-height: 46px; padding: var(--space-8) 0; border-bottom: 1px solid var(--arpada-line); }
.breve-item:last-child { border-bottom: 0; }
.breve-etiqueta { flex-shrink: 0; min-width: 92px; justify-content: center; }
.breve-texto { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--arpada-text); }
.breve-grande { margin-left: var(--space-4); font-size: 11px; padding: 2px 6px; vertical-align: 1px; }
.breve-ir { flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--arpada-cyan-bright); white-space: nowrap; }
.breves-dias { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.breves-dias h2 { margin: 0; font-size: 16px; font-weight: 600; text-align: center; }
.breves-dias [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
@media (max-width: 480px) { .breve-item { flex-wrap: wrap; } .breve-etiqueta { min-width: 0; } }

/* Franja de mercado (2026-11-04): la última sesión en una línea, encima del calendario. Lo importante de la
   home son los resultados: el detalle de sectores, industrias y breves está en sus páginas. */
.franja-mercado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-16); padding: 12px var(--space-16); margin-bottom: var(--space-16); font-size: 13px; color: var(--arpada-muted); }
.franja-mercado strong { color: var(--arpada-text); font-weight: 600; }
.franja-mercado .num { font-size: 12px; }
.franja-fecha { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--arpada-text); }
.franja-enlaces { display: inline-flex; gap: var(--space-12); margin-left: auto; }
.franja-enlaces a { color: var(--arpada-cyan-bright); font-size: 12px; }
@media (max-width: 640px) { .franja-enlaces { margin-left: 0; width: 100%; } }

/* ── Formularios densos (editores del backoffice) ─────────────── *
   `.form-denso` es OPT-IN: baja el formulario a 14 px y 36 px de alto. El formulario normal (`.field` > `.input`) sigue a 16 px y 44 px (iOS hace zoom por
   debajo de 16 px). En pantallas táctiles (`pointer: coarse`) el denso vuelve a 16 px y 44 px. Guía con ejemplos: docs/diseno/formularios.html. */
.form-denso { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--arpada-text); }
.form-denso .form-cols { gap: 12px; }
.form-denso .field { gap: 4px; }
.eyebrow-label, .form-denso .field > label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--arpada-dim); }
.eyebrow-label { display: block; }
.form-denso .input, .form-denso .select { height: 36px; padding: 0 10px; font-size: 14px; }
textarea.input { height: auto; min-height: 72px; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.form-denso textarea.input { height: auto; min-height: 0; padding: 8px 10px; } /* sin esto gana `.form-denso .input` y la textarea mide 36 px */
.input.mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; }
.form-denso .field .help { font-size: 11px; }
.field.warn .input, .field.warn .select { border-color: var(--arpada-amber); }
.field.warn .help { color: var(--arpada-amber); }
.contador { align-self: flex-end; font-family: var(--font-mono); font-size: 11px; color: var(--arpada-dim); }
.contador.aviso { color: var(--arpada-amber); }
.contador.error { color: var(--arpada-red); }

/* Casilla y botón de opción: `<label class="check"><input type="checkbox"> Texto</label>` y `<label class="radio"><input type="radio"> Texto</label>`. */
.check, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--arpada-text); }
.check input, .radio input { appearance: none; flex: none; position: relative; width: 18px; height: 18px; margin: 0; cursor: pointer; background: var(--arpada-navy); border: 1px solid var(--arpada-line2); }
.check input { border-radius: var(--radius-4); }
.radio input { border-radius: 50%; }
.check input:checked, .radio input:checked { background: var(--arpada-cyan); border-color: var(--arpada-cyan); }
.check input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--arpada-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.radio input:checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--arpada-ink); }
.check input:focus-visible, .radio input:focus-visible { outline: 2px solid var(--arpada-cyan); outline-offset: 2px; }
.check input:disabled, .radio input:disabled { opacity: 0.45; cursor: not-allowed; }

/* Pestañas (subrayado): idiomas de un artículo, vistas de un editor. Enlaces o botones con `aria-current="page"` / `aria-selected="true"` en la activa. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--arpada-line); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { flex: none; margin-bottom: -1px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--arpada-muted); font: 500 13px var(--font-sans); white-space: nowrap; cursor: pointer; text-decoration: none; }
.tabs a:hover, .tabs button:hover { color: var(--arpada-text); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--arpada-text); border-bottom-color: var(--arpada-cyan); }
.tabs a:focus-visible, .tabs button:focus-visible { outline: 2px solid var(--arpada-cyan); outline-offset: -2px; }

/* Segmentado pequeño, botones pequeños y barra de herramientas. */
.segmented.sm button, .segmented.sm a { min-height: 26px; padding: 0 10px; font-size: 12px; }
.btn-mini, .btn-compact.btn-mini { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--radius-8); }
.toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.toolbar::-webkit-scrollbar { display: none; }
.toolbar > * { flex: none; }
.toolbar-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--arpada-line2); }

@media (pointer: coarse) {
  .form-denso .input, .form-denso .select { height: var(--touch-min); font-size: 16px; }
  .form-denso textarea.input, .form-denso .input.mono { height: auto; font-size: 16px; }
  .btn-mini, .btn-compact.btn-mini { height: var(--touch-min); }
  .segmented.sm button, .segmented.sm a { min-height: 36px; }
  .tabs a, .tabs button { padding: 12px; }
}