/* ============================================================
   Mediometro — Dark Slate (user.css de Cassiopeia, sitio)
   Paleta institucional de monitoreo para sesiones prolongadas.
   Decisión 2026-08-29: acento Indigo pleno; layout fluido 98%
   obligatorio en vistas de datos (CAL-265). Cargado nativamente
   por el asset template.user de Cassiopeia cuando este archivo
   existe: media/templates/site/cassiopeia/css/user.css
   ============================================================ */

/* ---- Atkinson Hyperlegible self-hosted (Fase 2, sin CDN) ---- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/media/com_mediometro/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/media/com_mediometro/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Dark Slate base ---- */
  --mm-bg: #0f172a;            /* fondo principal (slate 900) */
  --mm-surface: #1e293b;       /* superficies / módulos (slate 800) */
  --mm-surface-2: #24334d;     /* superficie elevada */
  --mm-border: #334155;        /* bordes y divisores (slate 700) */
  --mm-text: #e2e8f0;          /* texto principal (slate 200) */
  --mm-muted: #94a3b8;         /* texto secundario (slate 400) */
  --mm-accent: #6366f1;        /* acento interactivo (indigo) */
  --mm-accent-hover: #818cf8;
  --mm-danger: #e11d48;        /* crítico / negativo (rose) */
  --mm-success: #10b981;       /* positivo / estable (emerald) */
  --mm-warning: #f59e0b;       /* advertencia / observación (amber) */

  --mm-font: "Atkinson Hyperlegible", "Segoe UI", "Inter",
             -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* ---- Bootstrap 5.3 (reasignación) ---- */
  --bs-body-bg: var(--mm-bg);
  --bs-body-color: var(--mm-text);
  --bs-body-font-family: var(--mm-font);
  --bs-border-color: var(--mm-border);
  --bs-secondary-color: var(--mm-muted);
  --bs-secondary-rgb: 148, 163, 184;   /* .text-muted usa este rgb: gris-900 de Cassiopeia -> slate-400 */
  --bs-secondary-bg: var(--mm-surface);
  --bs-tertiary-bg: #16213a;
  --bs-emphasis-color: #f1f5f9;
  --bs-link-color: #818cf8;
  --bs-link-color-rgb: 129, 140, 248;
  --bs-link-hover-color: #a5b4fc;
  --bs-link-hover-color-rgb: 129, 140, 248;
  --bs-primary: var(--mm-accent);
  --bs-primary-rgb: 99, 102, 241;
  --bs-danger: var(--mm-danger);
  --bs-danger-rgb: 225, 29, 72;
  --bs-success: var(--mm-success);
  --bs-success-rgb: 16, 185, 129;
  --bs-warning: var(--mm-warning);
  --bs-warning-rgb: 245, 158, 11;
  /* estados de Cassiopeia (--danger/--info oscuros por defecto) */
  --primary: var(--mm-accent);
  --primary-rgb: 99, 102, 241;
  --danger: var(--mm-danger);
  --danger-rgb: 225, 29, 72;
  --success: var(--mm-success);
  --success-rgb: 16, 185, 129;
  --warning: var(--mm-warning);
  --warning-rgb: 245, 158, 11;
  --info: #38bdf8;
  --info-rgb: 56, 189, 248;

  /* Componentes Bootstrap */
  --bs-card-bg: var(--mm-surface);
  --bs-card-border-color: var(--mm-border);
  --bs-modal-bg: var(--mm-surface);
  --bs-table-bg: transparent;
  --bs-table-color: var(--mm-text);
  --bs-table-striped-bg: #1a2540;
  --bs-table-hover-bg: #223051;
  --bs-table-border-color: var(--mm-border);
  --bs-heading-color: var(--mm-text);

  /* ---- Cassiopeia propias ---- */
  --body-font-family: var(--mm-font);
  --body-color: var(--mm-text);

  --body-bg: var(--mm-bg);
  --body-color: var(--mm-text);
  --border-color: var(--mm-border);
  --link-color: var(--mm-accent);
  --link-hover-color: var(--mm-accent-hover);

  color-scheme: dark;
}

html {
  scrollbar-color: var(--mm-border) var(--mm-bg);
}

body {
  background-color: var(--mm-bg);
  color: var(--mm-text);
}

/* ---- Layout fluido obligatorio: 98% horizontal (CAL-265) ----
   Wrappers REALES de Cassiopeia 6 (verificado en DOM):
   body.site > .site-grid > .grid-child.container-component / .container-nav */
body.site .grid-child,
body.site .grid-child.container-component,
body.site .grid-child.container-nav,
body .grid-child.container,
body .grid-child.container-fluid,
body main .container,
body main .container-fluid {
  width: 100%;
  max-width: none !important;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Cassiopeia define el grid central con columnas fijas en rem (~1750px) y
   grid-gap 2em: techo real del contenido. Columna main = 98vw, sin gaps. */
body.site .site-grid {
  width: 100%;
  grid-gap: 0;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [main-start] minmax(0, 98vw)
    [main-end] minmax(0, 1fr)
    [full-end];
}

/* ---- Elementos estructurales ---- */
h1, h2, h3, h4, h5, h6 {
  color: var(--mm-text);
  font-family: var(--mm-font);
  font-weight: 600;              /* jerarquía por peso, no por color */
}

a {
  color: var(--mm-accent);
}
a:hover {
  color: var(--mm-accent-hover);
}

pre, code, kbd, samp {
  background-color: var(--mm-surface-2);
  color: var(--mm-text);
  border-radius: 4px;
}

hr {
  border-top-color: var(--mm-border);
  opacity: 1;
}

/* Metadatos de articulos (blog/listas de com_content): siempre legibles.
   El template define rgba(34,38,42,.75) literal: se vence con !important. */
.article-info,
.article-info dd,
.article-info dt,
.article-info .mx-1,
.text-muted {
  color: var(--mm-muted, #94a3b8) !important;
}
.article-info a {
  color: var(--mm-accent, #6366f1) !important;
}

/* Tablas de datos densos */
.table {
  --bs-table-bg: transparent;
}
.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--mm-text);
  border-color: var(--mm-border);
}
.table thead th {
  color: var(--mm-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

/* Formularios */
.form-control, .form-select {
  background-color: var(--mm-surface);
  border-color: var(--mm-border);
  color: var(--mm-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--mm-surface);
  border-color: var(--mm-accent);
  color: var(--mm-text);
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}
.form-control::placeholder {
  color: var(--mm-muted);
  opacity: 1;
}

/* Botones */
.btn-outline-secondary {
  color: var(--mm-muted);
  border-color: var(--mm-border);
}
.btn-outline-secondary:hover {
  background-color: var(--mm-surface);
  color: var(--mm-text);
}

/* Alertas con estados desaturados */
.alert-danger {
  background-color: rgba(225, 29, 72, 0.12);
  border-color: var(--mm-danger);
  color: #fda4af;
}
.alert-success {
  background-color: rgba(16, 185, 129, 0.12);
  border-color: var(--mm-success);
  color: #6ee7b7;
}
.alert-warning {
  background-color: rgba(245, 158, 11, 0.12);
  border-color: var(--mm-warning);
  color: #fcd34d;
}
.alert-info {
  background-color: rgba(99, 102, 241, 0.12);
  border-color: var(--mm-accent);
  color: #a5b4fc;
}

/* ---- Patrones de legibilidad global (barrido WCAG 2026-08-29) ---- */
a { color: #818cf8; }
a:hover { color: #a5b4fc; }
.btn-link { color: #818cf8 !important; }
.btn-outline-info {
  color: #7dd3fc !important;
  border-color: #38bdf8 !important;
}
.btn-outline-info:hover { background: rgba(56, 189, 248, 0.12); }
strong, b { color: inherit; }
label { color: var(--mm-text, #e2e8f0); }
.input-group-text {
  background-color: var(--mm-surface-2, #24334d) !important;
  border-color: var(--mm-border, #334155) !important;
  color: var(--mm-text, #e2e8f0) !important;
}
/* textos oscuros heredados en widgets mm-* */
.mm-replica-timeline-date,
.mm-ecografia-share-name,
.mm-ecografia-share-value {
  color: var(--mm-text, #e2e8f0) !important;
}
.mm-replica-period-btn,
.mm-golpeteo-period-btn {
  color: var(--mm-muted, #94a3b8) !important;
  border-color: var(--mm-border, #334155) !important;
}
.mm-replica-period-btn.active,
.mm-golpeteo-period-btn.active { color: var(--mm-text, #e2e8f0) !important; }
/* com_fuentes stats: strongs azules sobre dark */
body.com_fuentes strong { color: var(--mm-text, #e2e8f0) !important; }
body.com_fuentes .text-primary { color: #93c5fd !important; }

/* ecografia: titulos y descripciones de seccion */
.mm-ecografia-section-title { color: var(--mm-text, #e2e8f0) !important; }
.mm-ecografia-section-desc,
.mm-ecografia-chart-legend { color: var(--mm-muted, #94a3b8) !important; }

/* form-text y widgets de paneles/tirada/RCI */
.form-text { color: var(--mm-muted, #94a3b8) !important; }
.mm-rci-label, .mm-rci-source-row { color: var(--mm-muted, #94a3b8) !important; }
.mm-rci-value, .mm-rci-case-title { color: var(--mm-text, #e2e8f0) !important; }
.mm-rci-level { color: #a5b4fc !important; }
.tirada-sidebar-title, .tirada-medium-dominant, .tirada-step-label { color: var(--mm-muted, #94a3b8) !important; }
.tirada-etapa-mini { color: #ffffff !important; }

/* selects de componentes sin clase (placeholder legible sobre dark) */
select {
  background-color: var(--mm-surface, #1e293b) !important;
  color: var(--mm-text, #e2e8f0) !important;
  border-color: var(--mm-border, #334155) !important;
}
select option {
  background-color: var(--mm-surface, #1e293b);
  color: var(--mm-text, #e2e8f0);
}

/* com_manipulacionmediatica: notice y senales de casos con fondos claros */
.mm-campaigns__notice {
  background-color: rgba(99, 102, 241, 0.10) !important;
  border-color: var(--mm-accent, #6366f1) !important;
  color: var(--mm-text, #e2e8f0) !important;
}
.mm-rci-case__signal,
.mm-campaigns__notice .mm-rci-case__signal {
  background-color: var(--mm-surface-2, #24334d) !important;
  color: var(--mm-text, #e2e8f0) !important;
}
.mm-badge--observation {
  color: #a5b4fc !important;
  background-color: rgba(99, 102, 241, 0.15) !important;
}

/* com_fuentes: la app de fuentes conserva su tema LIGHT (design system propio).
   Excluirla de los overrides dark globales y restaurar sus alertas/filtros. */
.fuentes-app .alert-info,
.fuentes-app .mm-explainer.alert-info {
  background-color: #d1ecf1 !important;
  border-color: #0d6efd !important;
  color: #0c5460 !important;
}
.fuentes-app .mm-explainer .btn-outline-info,
.fuentes-app .mm-explainer .btn-link {
  color: #0d6efd !important;
  border-color: #0d6efd;
}
.fuentes-app label,
.fuentes-app .form-text,
.fuentes-app .text-muted { color: #495057 !important; }
.fuentes-app select,
.fuentes-app .form-control,
.fuentes-app input[type="text"],
.fuentes-app input[type="search"] {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

/* Focus visible obligatorio */
*:focus-visible {
  outline: 2px solid var(--mm-accent);
  outline-offset: 2px;
}

/* ---- Widgets: cobertura de componentes y utilities de Bootstrap ----
   Sin esto, cards/widgets con clases default quedan blancas en dark. */
.bg-white, .bg-light, .text-bg-light {
  background-color: var(--mm-surface) !important;
  color: var(--mm-text) !important;
}
.text-dark { color: var(--mm-text) !important; }
.text-body { color: var(--mm-text) !important; }

.list-group-item {
  background-color: var(--mm-surface);
  border-color: var(--mm-border);
  color: var(--mm-text);
}
.list-group-item:hover { background-color: var(--mm-surface-2); }

.dropdown-menu {
  background-color: var(--mm-surface);
  border-color: var(--mm-border);
}
.dropdown-item { color: var(--mm-text); }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--mm-surface-2);
  color: var(--mm-text);
}

.nav-tabs { border-bottom-color: var(--mm-border); }
.nav-tabs .nav-link { color: var(--mm-muted); }
.nav-tabs .nav-link:hover { color: var(--mm-text); }
.nav-tabs .nav-link.active {
  background-color: var(--mm-surface);
  color: var(--mm-text);
  border-color: var(--mm-border) var(--mm-border) var(--mm-surface);
}
.nav-pills .nav-link.active { background-color: var(--mm-accent); }
.nav-link { color: var(--mm-accent); }
.nav-link:hover { color: var(--mm-accent-hover); }

.accordion-item {
  background-color: var(--mm-surface);
  border-color: var(--mm-border);
  color: var(--mm-text);
}
.accordion-button {
  background-color: var(--mm-surface);
  color: var(--mm-text);
}
.accordion-button:not(.collapsed) {
  background-color: var(--mm-surface-2);
  color: var(--mm-text);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--mm-border);
}
.accordion-body { background-color: var(--mm-surface); }

.modal-content { background-color: var(--mm-surface); border-color: var(--mm-border); }
.modal-header, .modal-footer { border-color: var(--mm-border); }
.offcanvas { background-color: var(--mm-surface); }

.pagination .page-link {
  background-color: var(--mm-surface);
  border-color: var(--mm-border);
  color: var(--mm-text);
}
.pagination .page-item.active .page-link {
  background-color: var(--mm-accent);
  border-color: var(--mm-accent);
  color: #ffffff;
}
.pagination .page-item.disabled .page-link {
  background-color: var(--mm-bg);
  color: var(--mm-muted);
}

.breadcrumb-item a { color: var(--mm-accent); }
.breadcrumb-item.active { color: var(--mm-muted); }

.badge.text-bg-light, .badge.bg-light {
  background-color: var(--mm-surface-2) !important;
  color: var(--mm-text) !important;
}
.badge.text-bg-secondary { background-color: var(--mm-border) !important; color: var(--mm-text) !important; }

.progress { background-color: var(--mm-surface-2); }
.toast { background-color: var(--mm-surface); color: var(--mm-text); border-color: var(--mm-border); }

.btn-light {
  background-color: var(--mm-surface-2);
  border-color: var(--mm-border);
  color: var(--mm-text);
}
.btn-light:hover { background-color: var(--mm-border); color: var(--mm-text); }
.btn-outline-dark { color: var(--mm-text); border-color: var(--mm-border); }
.btn-outline-dark:hover { background-color: var(--mm-surface-2); color: var(--mm-text); }

/* Widgets de Joomla core en front (modulos, tags populares, etc.) */
.module-card, .card-header, .card-footer {
  background-color: var(--mm-surface);
  border-color: var(--mm-border);
  color: var(--mm-text);
}

/* ---- Overrides por componente (generados: fondos/textos/bordes claros -> tokens) ----
   Ganan por especificidad (prefijo body), no por orden de carga. */

/* ---- fiscalia (9 overrides) ---- */
body .fiscalia-nav { background: var(--mm-surface); }
body .fiscalia-nav-item:hover { background: var(--mm-surface-2); color: var(--mm-text); }
body .com-fiscalia-frontend .fiscalia-header h1 { color: var(--mm-text); }
body .com-fiscalia-frontend .fiscalia-widget .card-header { background: var(--mm-surface); }
body .fiscalia-disarm-guide { background: var(--mm-surface); }
body .fiscalia-disarm-guide-list li strong { color: var(--mm-text); }
body .fiscalia-disarm-table tbody tr:hover { background: var(--mm-surface); }
body .fiscalia-distortion-label { color: var(--mm-text); }
body .fiscalia-ttp-code { background: var(--mm-surface-2); }

/* ---- ecografia (1 overrides) ---- */
body .mm-ecografia-section { background: var(--mm-surface); }

/* ---- golpeteo (15 overrides) ---- */
body .mm-golpeteo-table th { background: var(--mm-surface); }
body .mm-golpeteo-table tr:hover { background: var(--mm-surface); }
body .mm-golpeteo-borgia-card { background: var(--mm-surface); }
body .mm-golpeteo-headline { background: var(--mm-surface); }
body .mm-golpeteo-period-btn:hover { background: var(--mm-surface-2); }
body .mm-golpeteo-period-btn.active { background: var(--mm-surface-2); }
body .mm-golpeteo-scope-btn { background: var(--mm-surface); }
body .mm-golpeteo-scope-btn:hover { background: var(--mm-surface-2); }
body .mm-golpeteo-scope-btn.active { background: var(--mm-surface-2); }
body .mm-golpeteo-sai-dot-gov { background: var(--mm-surface-2); }
body .mm-golpeteo-timeline-signal { background: var(--mm-surface); }
body .mm-golpeteo-timeline-gov { background: var(--mm-surface-2); }
body .mm-golpeteo-forensic-timerange { background: var(--mm-surface); }
body .mm-golpeteo-export-btn { background: var(--mm-surface-2); }
body .mm-golpeteo-vpattern-video { background: var(--mm-surface); }

/* ---- campo (7 overrides) ---- */
body .mm-campo-heatmap tbody tr:nth-child(even) { background: var(--mm-surface); }
body .mm-campo-cluster-card { background: var(--mm-surface); }
body .mm-campo-cluster-title { color: var(--mm-text); }
body .mm-campo-cluster-bar-fill { background: var(--mm-surface-2); }
body .mm-campo-headline { background: var(--mm-surface); }
body .mm-campo-field-card { background: var(--mm-surface); }
body .mm-campo-decayed-item { background: var(--mm-surface); }

/* ---- radio (6 overrides) ---- */
body .mm-radio-item { background: var(--mm-surface); }
body .mm-radio-item-title a { color: var(--mm-text); }
body .mm-radio-program-card { background: var(--mm-surface); }
body .mm-radio-table th { background: var(--mm-surface); }
body .mm-radio-table tr:hover { background: var(--mm-surface); }
body .mm-radio-filter-group select { background: var(--mm-surface); }

/* ---- replica (14 overrides) ---- */
body .mm-replica-timeline-card { background: var(--mm-surface); }
body .mm-replica-transcript-btn { background: var(--mm-surface-2); }
body .mm-replica-case-card { background: var(--mm-surface); }
body .mm-replica-claim-text { color: var(--mm-text); }
body .mm-replica-rebuttal-text { color: var(--mm-text); }
body .mm-replica-transcript-text { background: var(--mm-surface); }
body .mm-replica-recent-media-card { background: var(--mm-surface); }
body .mm-replica-accusation-media { color: var(--mm-text); }
body .mm-replica-filter-group select { background: var(--mm-surface); }
body .mm-replica-period-btn { background: var(--mm-surface-2); }
body .mm-replica-period-btn.active { background: var(--mm-surface-2); }
body .mm-replica-filter-btn { background: var(--mm-surface-2); }
body .mm-replica-qa-card { background: var(--mm-surface); }
body .mm-replica-qa-identity-source { background: var(--mm-surface); }

/* ---- manual (2 overrides) ---- */
body .mm-manual { background: var(--mm-surface); color: var(--mm-text); }
body .mm-manual-header h1 { color: var(--mm-text); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Tooltips de Bootstrap: cassiopeia 6.1 no trae su CSS — Dark Slate global
   (2026-10-05, auditoria tooltip analizador-eventos; cobija todos los
   Explainer::tooltip del ecosistema). */
.tooltip {
    --bs-tooltip-bg: #0f172a;
    --bs-tooltip-color: #e2e8f0;
    position: absolute;
    background: var(--bs-tooltip-bg);
    color: var(--bs-tooltip-color);
    border: 1px solid #334155;
    border-radius: 10px;
    opacity: 1;
    z-index: 1080;
    pointer-events: none;
}
.tooltip .tooltip-inner {
    max-width: 340px;
    padding: .55rem .8rem;
    color: #e2e8f0;
    text-align: left;
    background: transparent;
    font-size: .84rem;
    line-height: 1.45;
}
.tooltip .tooltip-arrow { display: none; }