/* ══════════════════════════════════════════════════════════════
   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-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); }
.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; }

/* Tira de días: se desliza en móvil y pasa a rejilla de 5 en escritorio. */
@media (min-width: 769px) {
  .day-strip.responsive { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .day-strip.responsive .day-btn { width: auto; height: 60px; }
}

/* Filtros: un solo <dialog class="sheet sheet-aside">. En móvil es la hoja
   inferior (showModal). Desde 769 px se pinta siempre, en flujo normal, como
   tarjeta de la columna lateral, sin asa, cabecera ni pie. Un dialog cerrado
   lo oculta el navegador con su CSS; el del autor gana. */
.filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.filter-grid .span-2 { grid-column: 1 / -1; }
.filter-grid.single { grid-template-columns: minmax(0, 1fr); }
.filter-grid .select { text-overflow: ellipsis; }
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.filter-bar .filter-hint { font-size: 12px; line-height: 1.4; color: var(--arpada-muted); }
@media (min-width: 769px) {
  dialog.sheet.sheet-aside, dialog.sheet.sheet-aside:not([open]) {
    display: flex; position: static; inset: auto; width: auto; max-height: none; margin: 0;
    border: 1px solid var(--arpada-line); border-radius: var(--radius-16);
    background: linear-gradient(180deg, var(--arpada-card-top) 0%, var(--arpada-card-bottom) 100%);
    box-shadow: none;
  }
  dialog.sheet.sheet-aside::before { display: none; }
  dialog.sheet.sheet-aside .sheet-head, dialog.sheet.sheet-aside .sheet-foot { display: none; }
  dialog.sheet.sheet-aside .sheet-body { overflow: visible; }
}

/* 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; }
  .table-cards.table-arpada td.dt-empty { grid-column: 1 / -1; text-align: center; color: var(--arpada-muted); }
  /* 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; }
}

/* 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; }
}

/* Aside estrecho de la lista (calendario y filtros): por debajo de 1360 px se apila encima de la
   tabla, que así gana todo el ancho; desde 1360 px es una columna de 300 px y caben las 8 columnas. */
.layout-aside.narrow { flex: 1 1 100%; max-width: none; }
@media (min-width: 1360px) {
  .layout-aside.narrow { flex: 0 0 300px; max-width: 300px; }
  /* En 300 px el segmentado de momento de publicación no cabe en una fila: rejilla de 2×2. */
  .layout-aside.narrow .segmented.block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radius-16); }
}

/* 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); }
.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; }