/* ============================================================
   ComAlerta — component styles.
   Design tokens (colors, fonts, spacing) live in tokens.css,
   which MUST be loaded before this file. The rules below consume
   the tokens and carry no color/font literals of their own.
   ============================================================ */

/* Base & Typography
   ------------------------------------------------------------ */
body {
  font-family: var(--font-family-base);
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
}

/* 4. Bootstrap Overrides
   ------------------------------------------------------------ */

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: #8f3514;
  --bs-btn-active-border-color: #8f3514;
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-text-inverse);
}

.btn-success {
  --bs-btn-bg: var(--color-success);
  --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-bg: #3d7a4e;
  --bs-btn-hover-border-color: #3d7a4e;
}

.btn-info {
  --bs-btn-bg: var(--color-info);
  --bs-btn-border-color: var(--color-info);
  --bs-btn-color: var(--color-text-inverse);
  --bs-btn-hover-bg: #9a6570;
  --bs-btn-hover-border-color: #9a6570;
  --bs-btn-hover-color: var(--color-text-inverse);
}

.btn-outline-danger {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-text-inverse);
}

/* Sync button */
.btn-sync {
  color: var(--brand-warm-brown);
  border-color: var(--brand-warm-brown);
  background: transparent;
  font-weight: 600;
}

.btn-sync:hover {
  color: var(--color-text-inverse);
  background-color: var(--brand-warm-brown);
  border-color: var(--brand-warm-brown);
}

.btn-sync:disabled {
  color: var(--color-text-inverse);
  background-color: var(--brand-warm-brown);
  border-color: var(--brand-warm-brown);
  opacity: 0.75;
}

/* Sync status text */
.sync-status--running { color: var(--brand-warm-brown); font-weight: 500; }
.sync-status--completed { color: var(--color-success); font-weight: 600; }
.sync-status--error { color: var(--brand-terracotta); font-weight: 600; }
.sync-status--warning { color: var(--color-warning); font-weight: 600; }

/* Text colors */
.text-primary { color: var(--color-primary) !important; }
.text-danger { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }

/* Badges */
.badge.bg-success { background-color: var(--color-success) !important; }
.badge.bg-danger { background-color: var(--color-primary) !important; }
.badge.bg-warning { background-color: var(--color-warning) !important; }
.badge.bg-info { background-color: var(--color-info) !important; }
.badge.bg-secondary { background-color: var(--brand-gray) !important; }

/* Form controls */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem rgba(187, 69, 29, 0.25);
}

/* Links */
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

/* Alerts */
.alert-info {
  --bs-alert-bg: var(--color-info-bg);
  --bs-alert-border-color: var(--color-info);
  --bs-alert-color: var(--brand-charcoal);
}

.alert-success {
  --bs-alert-bg: var(--color-success-bg);
  --bs-alert-border-color: var(--color-success);
  --bs-alert-color: var(--brand-charcoal);
}

.alert-danger {
  --bs-alert-bg: var(--color-danger-bg);
  --bs-alert-border-color: var(--color-danger);
  --bs-alert-color: var(--brand-charcoal);
}

.alert-warning {
  --bs-alert-bg: var(--color-warning-bg);
  --bs-alert-border-color: var(--color-warning);
  --bs-alert-color: var(--brand-charcoal);
}

/* Tables */
.table { --bs-table-color: var(--color-text-primary); }

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-striped-bg: var(--color-bg-muted);
}

/* List groups */
.list-group-item {
  border-color: var(--color-border);
}

/* Cards */
.card {
  border-color: var(--color-border);
}

/* 5. Layout: Sidebar
   ------------------------------------------------------------ */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transform: translateX(calc(-1 * var(--sidebar-width)));
  transition: transform var(--transition-speed) ease-in-out;
}

.sidebar-header {
  flex: 0 0 auto;
  padding: 0.9rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-header .logo {
  max-width: 84px;
}

/* Nav list fills the space between the header and the pinned user-info
   footer and scrolls independently — a long menu never collides with it. */
.sidebar > .nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar > .nav::-webkit-scrollbar {
  width: 6px;
}
.sidebar > .nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.sidebar-country {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sidebar-text);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.sidebar-country__flag {
  width: 22px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}
.sidebar-country__name {
  font-weight: 600;
}

.sidebar .nav-link {
  color: var(--sidebar-text);
  padding: 0.55rem 1.25rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  border-right: 3px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sidebar .nav-link i {
  margin-right: 0.75rem;
  width: 20px;
  text-align: center;
  opacity: 0.8;
}

.sidebar .nav-link:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
  border-right-color: var(--brand-gray);
}

.sidebar .nav-link.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-right-color: var(--sidebar-active-text);
}

.sidebar .nav-link.active i {
  opacity: 1;
}

/* Section heading inside the sidebar nav — non-clickable label that
   visually groups a block of indented nav-items below it. Replaces the
   Bootstrap dropdown pattern with something flat and keyboard-friendly. */
.sidebar .nav-section-heading {
  padding: 0.6rem 1.25rem 0.3rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-gray, #b2b2b2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.sidebar .nav-section-heading i {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Indented sub-items that belong to a section heading. */
.sidebar .nav-subitem .nav-link {
  padding-left: 2.6rem;
  font-size: 0.92rem;
}
.sidebar .nav-subitem .nav-link i {
  width: 18px;
  font-size: 0.95rem;
}

/* User info section at sidebar bottom */
.user-info {
  flex: 0 0 auto;
  width: 100%;
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
}

.user-info h6 { color: var(--sidebar-text); }
.user-info small { color: var(--sidebar-text-muted) !important; }
.user-info .bi-person-circle { color: var(--sidebar-text-muted); }

.btn-sidebar-logout {
  color: var(--brand-gray);
  border-color: var(--sidebar-border);
  background: transparent;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
  transition: all 0.2s ease;
}

.btn-sidebar-logout:hover {
  color: var(--brand-white);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

/* --- Sidebar open state --- */
body.sidebar-open .sidebar {
  transform: translateX(0);
}

body.sidebar-open .main-content {
  margin-left: calc(var(--sidebar-width) + var(--toggle-bar-width));
}

/* 6. Layout: Toggle Bar
   ------------------------------------------------------------ */
.sidebar-toggle {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--toggle-bar-width);
  height: 100%;
  background-color: var(--toggle-bar-bg);
  border: none;
  border-right: 1px solid var(--sidebar-border);
  cursor: pointer;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--toggle-bar-text);
  transition: left var(--transition-speed) ease-in-out,
    background-color 0.2s ease;
}

.sidebar-toggle:hover {
  background-color: var(--toggle-bar-hover);
}

body.sidebar-open .sidebar-toggle {
  left: var(--sidebar-width);
}

/* Icon switching */
.sidebar-toggle .icon-open { display: block; }
.sidebar-toggle .icon-close { display: none; }
body.sidebar-open .sidebar-toggle .icon-open { display: none; }
body.sidebar-open .sidebar-toggle .icon-close { display: block; }

/* 7. Layout: Main Content
   ------------------------------------------------------------ */
.main-content {
  margin-left: var(--toggle-bar-width);
  padding: 2rem;
  transition: margin-left var(--transition-speed) ease-in-out;
}

/* 8. Page: Login
   ------------------------------------------------------------ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--color-bg-page);
  position: relative;
  overflow: hidden;
}

.login-page::before {
  content: '';
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 400px;
  height: 400px;
  background: url('../brand/decorative/deco-ondas.png') no-repeat center;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 2rem rgba(33, 37, 37, 0.12);
  background: var(--color-bg-surface);
  position: relative;
  z-index: 1;
}

.login-card .logo {
  max-width: 200px;
  margin-bottom: 1.5rem;
}

.login-card .card-title {
  color: var(--color-text-primary);
  font-weight: 700;
}

.login-card .card-body-text {
  color: var(--color-text-secondary);
}

/* 9. Page: Dashboard / Home (KPI boxes, charts)
   ------------------------------------------------------------ */
.dashboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
  width: 100%;
  margin-top: 2rem;
}

.value-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
  margin: 1rem 0 2rem;
}

.value-box {
  position: relative;
  min-height: 120px;
  border-radius: 8px;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  background: var(--brand-charcoal);
}

.value-box--total { background: var(--brand-charcoal); }
.value-box--triage { background: var(--brand-terracotta); }
.value-box--verification { background: var(--brand-dusty-rose); }
.value-box--assessment { background: var(--brand-warm-brown); }

.value-box__content { z-index: 1; }

.value-box__title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.95;
}

.value-box__value {
  margin-top: 0.25rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Percentage badge under the KPI count. Each card shows
   {count}\n{pct} where pct is the share of TOTAL DE SEÑALES. */
.value-box__pct {
  margin-top: 0.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* Chart card header: title left, "Desglosar por …" selector right. */
.chart-box__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.chart-box__head h4 { margin: 0; }
.chart-box__breakdown {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.chart-box__breakdown select {
  font-size: 0.8rem;
  padding: 0.2rem 0.45rem;
}

.value-box__icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 60px;
  color: rgba(255, 255, 255, 0.2);
  z-index: 0;
  pointer-events: none;
}

/* Chart layouts */
.plots-1col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

.plots-1col .chart-box,
.plots-2col .chart-box {
  max-width: none;
  width: 100%;
}

.plotly-chart {
  width: 100%;
  height: 420px;
}

.plots-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}

/* 10. Page: Export
   ------------------------------------------------------------ */
.export-history-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

/* 11. Page: Logs
   ------------------------------------------------------------ */
.log-viewer {
  background: var(--color-bg-muted);
  padding: 1rem;
  border: 1px solid var(--color-border);
  height: 400px;
  width: 100%;
  overflow: auto;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.85rem;
  border-radius: 0.5rem;
  color: var(--color-text-primary);
}

/* 12. AG-Grid Overrides
   ------------------------------------------------------------ */
.ag-theme-alpine {
  --ag-font-family: var(--font-family-base);
  --ag-font-size: 14px;
  --ag-alpine-active-color: var(--brand-terracotta);
  --ag-range-selection-border-color: var(--brand-terracotta);
  --ag-checkbox-checked-color: var(--brand-terracotta);
  --ag-input-focus-border-color: var(--brand-terracotta);
  --ag-border-color: var(--color-border);
  --ag-row-border-color: var(--color-border-light);
  --ag-pagination-active-page-background-color: var(--brand-terracotta);
  --ag-pagination-active-page-border-color: var(--brand-terracotta);
}

.ag-theme-alpine .ag-header {
  background-color: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
}

.ag-theme-alpine .ag-header-cell:hover {
  background-color: var(--brand-blush);
}

.ag-theme-alpine .ag-row-hover {
  background-color: var(--brand-blush);
}

.ag-theme-alpine .ag-row-selected {
  background-color: var(--color-primary-bg) !important;
}

.ag-theme-alpine .ag-floating-filter-input input:focus {
  border-color: var(--brand-terracotta);
  box-shadow: 0 0 0 1px var(--brand-terracotta);
}

.ag-theme-alpine .ag-paging-button:hover {
  color: var(--brand-terracotta);
}

/* Notifications grid height */
.notifications-grid {
  height: calc(100vh - 260px);
  min-height: 400px;
  width: 100%;
}

/* JSON Viewer */
.json-viewer {
  font-family: var(--font-family-base);
}

.json-viewer h6 {
  color: var(--color-primary);
  font-weight: 600;
}

.json-viewer .border-start {
  border-color: var(--color-border) !important;
}

.json-viewer pre {
  font-size: 12px;
  line-height: 1.4;
}

/* Submission viewer ("Datos originales del envío") — formatted tab.
   Uses the dossier typography so the JSON dump reads like an
   epidemiological brief instead of a raw form export. */
.json-viewer-search input {
  font-family: var(--font-family-base);
  font-size: 0.85rem;
  border: 1px solid var(--ledger-border);
  background: var(--paper-warm);
}
.json-viewer__section {
  margin: 0 0 1.5rem;
  padding: 0;
}
.json-viewer__heading {
  margin: 0 0 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--ledger-border);
  font-family: var(--font-family-serif);
  font-weight: 500;
  font-size: 1.05rem;
  font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0;
  color: var(--brand-charcoal);
}
.json-viewer__grid {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr;
  gap: 0.4rem 1rem;
  font-family: var(--font-family-base);
  font-size: 0.85rem;
}
.json-viewer__grid--nested {
  margin-top: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: var(--paper-aged);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  grid-template-columns: minmax(160px, max-content) 1fr;
}
.json-viewer__row {
  display: contents;
}
.json-viewer__row > dt {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  align-self: start;
}
.json-viewer__row > dd {
  margin: 0;
  color: var(--brand-charcoal);
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.json-viewer__row--list > dd {
  font-style: italic;
  color: var(--color-text-secondary);
}
.json-viewer__row--group > dd {
  font-style: normal;
}
.json-viewer__row > dd code {
  font-family: var(--font-family-mono);
  font-size: 0.78em;
  background: var(--paper-aged);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  color: var(--brand-charcoal);
}

.modal-xl {
  max-width: 90vw;
}

/* When the submission viewer opens from inside the Editar Notificación
   slide-panel, both modals are visible at once. Bootstrap's auto-stack
   doesn't always give the inner modal a higher z-index than the
   expediente shell + its backdrop, so it gets visually buried. Force
   the submission viewer + its backdrop above any open .expediente. */
#submissionModal {
  z-index: 1080;
}
.modal-backdrop.show + .modal-backdrop.show {
  z-index: 1075;
}

/* 13. Notifications page — editorial header, toolbar, AG-Grid skin
   ------------------------------------------------------------ */

/* Header with eyebrow + serif title + metadata strip — same vocabulary
   the Expediente modals use, so opening a row's dossier feels like a
   continuation of the page header rather than a context switch. */
.notifications-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.25rem 0 1.4rem;
}
.notifications-page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-terracotta);
}
.notifications-page-header__eyebrow::before {
  content: '';
  width: 26px;
  height: 1.5px;
  background: var(--brand-terracotta);
}
.notifications-page-header__eyebrow span {
  color: var(--brand-warm-brown);
  font-weight: 500;
}
.notifications-page-header__title {
  margin: 0;
  font-family: var(--font-family-serif);
  font-weight: 500;
  font-size: 1.85rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--brand-charcoal);
  font-variation-settings: "opsz" 32, "SOFT" 50, "WONK" 0;
}
.notifications-page-header__title em {
  font-style: italic;
  font-variation-settings: "opsz" 32, "SOFT" 100, "WONK" 1;
  color: var(--brand-terracotta);
}
.notifications-page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.2rem;
  font-family: var(--font-family-base);
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}
.notifications-page-header__meta-sep {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--ledger-border-strong);
}
.notifications-page-header__meta strong {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--brand-charcoal);
}

/* Toolbar — stage filter chips share the Expediente per-workflow accents
   so the page header, the chips, and the modal that opens from a row
   all use the same visual language. */
.notifications-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0 1.1rem;
  border-top: 1px solid var(--ledger-border);
  border-bottom: 1px solid var(--ledger-border);
  margin-bottom: 1rem;
  padding-top: 0.9rem;
}

.notifications-toolbar .btn-group {
  gap: 0.4rem;
  flex-wrap: wrap;
}
.notifications-toolbar .btn-group[aria-label="Acciones principales"] .btn {
  border-radius: 4px;
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
}

/* Stage filter chip — an outlined "tag" with stage accent + counter.
   The count is injected by JS into the existing button text; we let
   it render as plain text and pull the digits forward with mono. */
.notifications-toolbar .btn-group[aria-label="Filtros"] .btn {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border-width: 1px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--brand-charcoal);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.notifications-toolbar .btn-group[aria-label="Filtros"] .btn i {
  font-size: 0.85rem;
}

#filterTriagePending {
  --bs-btn-color: var(--brand-charcoal);
  --bs-btn-bg: rgba(255, 255, 255, 0.45);
  --bs-btn-border-color: var(--brand-dusty-rose);
  --bs-btn-hover-bg: var(--brand-dusty-rose);
  --bs-btn-hover-border-color: var(--brand-dusty-rose);
  --bs-btn-hover-color: var(--brand-white);
  --bs-btn-active-bg: var(--brand-dusty-rose);
  --bs-btn-active-border-color: var(--brand-dusty-rose);
}
#filterVerificationPending {
  --bs-btn-color: var(--brand-charcoal);
  --bs-btn-bg: rgba(255, 255, 255, 0.45);
  --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-bg: var(--color-success);
  --bs-btn-hover-border-color: var(--color-success);
  --bs-btn-hover-color: var(--brand-white);
}
#filterEvaluationPending {
  --bs-btn-color: var(--brand-charcoal);
  --bs-btn-bg: rgba(255, 255, 255, 0.45);
  --bs-btn-border-color: #b08a3a;
  --bs-btn-hover-bg: #b08a3a;
  --bs-btn-hover-border-color: #b08a3a;
  --bs-btn-hover-color: var(--brand-white);
}
#filterFinalizadas {
  --bs-btn-color: var(--color-text-muted);
  --bs-btn-bg: rgba(255, 255, 255, 0.45);
  --bs-btn-border-color: var(--ledger-border);
  --bs-btn-hover-bg: var(--brand-charcoal);
  --bs-btn-hover-border-color: var(--brand-charcoal);
  --bs-btn-hover-color: var(--brand-white);
}
/* When a chip is the active filter, paint it with its hover colours
   so the operator sees at a glance which slice of the data they're
   looking at. The "active" baseline view has no chip lit — that's
   the implicit default. */
.notifications-toolbar .btn-group[aria-label="Filtros"] .filter-chip--active {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}
#clearFilters {
  --bs-btn-color: var(--color-text-muted);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--ledger-border);
  --bs-btn-hover-bg: var(--paper-aged);
  --bs-btn-hover-border-color: var(--ledger-border-strong);
  --bs-btn-hover-color: var(--brand-charcoal);
  padding: 0.45rem 0.6rem;
}

.toolbar-separator {
  width: 1px;
  height: 22px;
  background-color: var(--ledger-border);
  margin: 0 0.3rem;
}

#exportCsv {
  --bs-btn-color: var(--brand-warm-brown);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--brand-warm-brown);
  --bs-btn-hover-bg: var(--brand-warm-brown);
  --bs-btn-hover-border-color: var(--brand-warm-brown);
  --bs-btn-hover-color: var(--brand-white);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Status cells inside the grid — restyle Bootstrap badges into the
   same dossier pill the modal status uses (small dot + caps label).
   Scoped to .notifications-grid so other badges (sidebar, dashboard)
   are untouched. */
.notifications-grid .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-family-base);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  background: rgba(255, 255, 255, 0.7);
  color: var(--brand-white) !important;
  border: 1px solid var(--ledger-border);
  border-radius: 999px;
}
/* Light-background variants keep dark text so they stay readable. */
.notifications-grid .badge.bg-secondary,
.notifications-grid .badge.bg-light {
  color: var(--brand-charcoal) !important;
}
.notifications-grid .badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.notifications-grid .badge.bg-secondary { background: rgba(255, 255, 255, 0.6) !important; }
.notifications-grid .badge.bg-secondary::before { background: var(--brand-gray); }
.notifications-grid .badge.bg-success::before   { background: var(--color-success); }
.notifications-grid .badge.bg-warning::before   { background: var(--color-warning); }
.notifications-grid .badge.bg-danger::before    { background: var(--brand-terracotta); }
.notifications-grid .badge.bg-info::before      { background: var(--brand-dusty-rose); }
.notifications-grid .badge.bg-light::before     { background: var(--ledger-border); }

/* AG-Grid theme — repaint the Alpine variables onto our paper palette
   so the grid stops looking like the demo and starts looking like
   the rest of the app. Targets only .notifications-grid; leaves the
   catalogs grid theme alone for now. */
.notifications-grid.ag-theme-alpine {
  --ag-background-color: var(--paper-warm);
  --ag-foreground-color: var(--brand-charcoal);
  --ag-header-background-color: var(--paper-aged);
  --ag-header-foreground-color: var(--brand-charcoal);
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.55);
  --ag-row-hover-color: rgba(187, 69, 29, 0.06);
  --ag-selected-row-background-color: rgba(187, 69, 29, 0.1);
  --ag-border-color: var(--ledger-border);
  --ag-secondary-border-color: var(--ledger-border);
  --ag-row-border-color: var(--ledger-border);
  --ag-input-focus-border-color: var(--brand-terracotta);
  --ag-input-focus-box-shadow: 0 0 0 3px rgba(187, 69, 29, 0.14);
  --ag-checkbox-checked-color: var(--brand-terracotta);
  --ag-range-selection-border-color: var(--brand-terracotta);
  --ag-font-family: var(--font-family-base);
  --ag-font-size: 13px;
  --ag-row-height: 44px;
  --ag-header-height: 44px;
  --ag-header-column-separator-display: block;
  --ag-header-column-separator-color: var(--ledger-border);
}
.notifications-grid.ag-theme-alpine .ag-header-cell-text {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-charcoal);
}
.notifications-grid.ag-theme-alpine .ag-cell {
  display: flex;
  align-items: center;
}
/* Action-button row — bigger row height + labeled stage buttons so
   operators can scan their workflow at a glance instead of squinting
   at five identical 24-px icons. Each stage gets its own accent color
   keyed to the matching modal (triage = rose, verif = green,
   eval = burnt-gold, notif edit = terracotta), a "done" modifier when
   the row has already cleared that stage, and a row separator
   before the destructive Eliminar action so it can't be mistaken for
   a workflow step. */
.notifications-grid.ag-theme-alpine {
  --ag-row-height: 56px;
}
/* Acciones column v2: stage tracker + single primary CTA + kebab.
   The workflow is strictly linear (Notif → Triaje → Verif → Eval) so
   the row only ever has one "active" stage. We surface that as the CTA,
   show 4 dots for at-a-glance progress, and tuck history + reopen +
   delete into a single dropdown to keep the column quiet. */
/* AG-Grid wraps the cellRenderer output in an unclassed inline-level
   <span> which sizes to content. That made .row-actions-v2's
   width:100% resolve against the span's intrinsic width — so the row
   shrunk to fit the longest CTA, and rows with shorter labels ended
   up narrower than rows with longer ones. Stretch the wrapping span
   to the full cell so width:100% inside has something to anchor to. */
.notifications-grid.ag-theme-alpine .ag-cell[col-id="actions"] > span {
  display: flex;
  width: 100%;
  height: 100%;
}
.notifications-grid.ag-theme-alpine .ag-cell .row-actions-v2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 100%;
  width: 100%;
}
.notifications-grid.ag-theme-alpine .ag-cell .stage-tracker {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  padding-right: 0.15rem;
  flex: 0 0 auto;
}
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--ledger-border);
  position: relative;
  flex: 0 0 auto;
}
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--done.stage-dot--notif  { background: var(--brand-charcoal);   border-color: var(--brand-charcoal); }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--done.stage-dot--triage { background: var(--brand-dusty-rose); border-color: var(--brand-dusty-rose); }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--done.stage-dot--verif  { background: var(--color-success);    border-color: var(--color-success); }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--done.stage-dot--eval   { background: #b08a3a;                 border-color: #b08a3a; }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--current {
  border-width: 2px;
}
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--current.stage-dot--triage { border-color: var(--brand-dusty-rose); box-shadow: 0 0 0 3px rgba(199, 138, 138, 0.2); }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--current.stage-dot--verif  { border-color: var(--color-success);    box-shadow: 0 0 0 3px rgba(60, 138, 91, 0.2); }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--current.stage-dot--eval   { border-color: #b08a3a;                 box-shadow: 0 0 0 3px rgba(176, 138, 58, 0.2); }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--pending  { border-color: rgba(33, 37, 37, 0.22); }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--skipped  { border-color: rgba(33, 37, 37, 0.18); border-style: dashed; }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--rejected { background: var(--brand-terracotta); border-color: var(--brand-terracotta); }
.notifications-grid.ag-theme-alpine .ag-cell .stage-dot--rejected::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 44%, var(--brand-white) 44%, var(--brand-white) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--brand-white) 44%, var(--brand-white) 56%, transparent 56%);
}
/* Primary CTA — single, focused. The verb tracks the active stage
   ("Triajear" / "Verificar" / "Evaluar"). When the chain is closed we
   replace it with a neutral "Ver" affordance over the most recent
   meaningful stage so the operator still has one click to context. */
.notifications-grid.ag-theme-alpine .ag-cell .row-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.28rem 0.55rem;
  font-family: var(--font-family-base);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 2.5;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
  /* flex-basis:0 + grow:1 makes every CTA take the same width
     regardless of content length — without this, "Verificar" sized
     itself wider than "Triajear" because the auto basis defaults to
     intrinsic content width. */
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notifications-grid.ag-theme-alpine .ag-cell .row-cta i { font-size: 0.95rem; }
.notifications-grid.ag-theme-alpine .ag-cell .row-cta__chev { margin-left: 0.12rem; opacity: 0.7; font-size: 1rem; }
.notifications-grid.ag-theme-alpine .ag-cell .row-cta--triage { background: var(--brand-dusty-rose); color: var(--brand-white); }
.notifications-grid.ag-theme-alpine .ag-cell .row-cta--verif  { background: var(--color-success);    color: var(--brand-white); }
.notifications-grid.ag-theme-alpine .ag-cell .row-cta--eval   { background: #b08a3a;                 color: var(--brand-white); }
.notifications-grid.ag-theme-alpine .ag-cell .row-cta--closed {
  background: rgba(255, 255, 255, 0.85);
  color: var(--brand-charcoal);
  border-color: var(--ledger-border);
}
.notifications-grid.ag-theme-alpine .ag-cell .row-cta--idle {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--ledger-border);
  border-style: dashed;
  cursor: default;
}
.notifications-grid.ag-theme-alpine .ag-cell .row-cta:not(.row-cta--idle):hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(33, 37, 37, 0.12);
}
.notifications-grid.ag-theme-alpine .ag-cell .row-cta:not(.row-cta--idle):active {
  transform: translateY(0);
  box-shadow: none;
}
/* Kebab — the "more actions" hideout. Holds Ver- entries for past
   stages, Reabrir- entries for editor-level rollback, and Eliminar. */
.notifications-grid.ag-theme-alpine .ag-cell .row-kebab {
  flex: 0 0 auto;
}
.notifications-grid.ag-theme-alpine .ag-cell .row-kebab__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--brand-charcoal);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.notifications-grid.ag-theme-alpine .ag-cell .row-kebab__btn:hover,
.notifications-grid.ag-theme-alpine .ag-cell .row-kebab__btn[aria-expanded="true"] {
  background: rgba(33, 37, 37, 0.06);
  border-color: var(--ledger-border);
}
/* AG-Grid clips cells AND rows AND its viewport with overflow:hidden,
   which would crop the dropdown. We lift each container in the chain
   to overflow:visible only on the row that owns the open menu (using
   :has() for surgical targeting) so the rest of the grid's clipping
   behaviour stays intact. */
.notifications-grid.ag-theme-alpine .ag-cell[col-id="actions"] { overflow: visible !important; }
.notifications-grid.ag-theme-alpine .ag-row:has(.row-kebab__btn[aria-expanded="true"]) {
  z-index: 50;
  overflow: visible !important;
}
.notifications-grid.ag-theme-alpine .ag-pinned-right-cols-container:has(.row-kebab__btn[aria-expanded="true"]),
.notifications-grid.ag-theme-alpine .ag-center-cols-clipper:has(.row-kebab__btn[aria-expanded="true"]),
.notifications-grid.ag-theme-alpine .ag-center-cols-viewport:has(.row-kebab__btn[aria-expanded="true"]),
.notifications-grid.ag-theme-alpine .ag-body-viewport:has(.row-kebab__btn[aria-expanded="true"]),
.notifications-grid.ag-theme-alpine .ag-root:has(.row-kebab__btn[aria-expanded="true"]),
.notifications-grid.ag-theme-alpine .ag-root-wrapper:has(.row-kebab__btn[aria-expanded="true"]),
.notifications-grid.ag-theme-alpine .ag-root-wrapper-body:has(.row-kebab__btn[aria-expanded="true"]) {
  overflow: visible !important;
}
.row-kebab .dropdown-menu {
  font-family: var(--font-family-base);
  font-size: 0.82rem;
  border: 1px solid var(--ledger-border);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(33, 37, 37, 0.16);
  padding: 0.25rem 0;
  min-width: 12rem;
  max-height: min(70vh, 460px);
  overflow-y: auto;
}
.row-kebab .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.32rem 0.75rem;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--brand-charcoal);
  line-height: 1.3;
}
.row-kebab .dropdown-item i { width: 14px; text-align: center; opacity: 0.75; }
.row-kebab .dropdown-item:hover { background: rgba(33, 37, 37, 0.05); }
.row-kebab .dropdown-item.text-danger { color: var(--brand-terracotta); }
.row-kebab .dropdown-item.text-danger:hover { background: rgba(214, 90, 49, 0.08); }
.row-kebab .dropdown-divider { margin: 0.22rem 0; border-top-color: var(--ledger-border); }
.row-kebab .dropdown-header {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.3rem 0.75rem 0.15rem;
  margin-bottom: 0;
}
/* View-mode banner shown above the form when a modal is opened from
   "Ver X" — operators see at a glance that the panel is read-only. */
.view-mode-banner {
  font-style: italic;
  border-left: 3px solid var(--brand-charcoal);
}

/* 14. Modals — generic Bootstrap usage (risk config, submission viewer)
   ------------------------------------------------------------ */
.modal-header {
  background-color: var(--color-bg-muted);
  border-bottom-color: var(--color-border);
}

.modal-footer {
  border-top-color: var(--color-border);
}

/* Color-coded modal headers for workflow differentiation (legacy/non-expediente) */
.modal-header--notification { border-left: 4px solid var(--brand-terracotta); }
.modal-header--triage       { border-left: 4px solid var(--brand-dusty-rose); }
.modal-header--verification { border-left: 4px solid var(--color-success); }
.modal-header--submission   { border-left: 4px solid var(--brand-warm-brown); }
.modal-header--evaluation   { border-left: 4px solid var(--color-warning, #f0ad4e); }


/* 14b. Expediente — case-file slide panel for the four workflow modals.
   ------------------------------------------------------------
   Applied via `<div class="modal fade expediente">`. Bootstrap's Modal
   JS API is unchanged; this only reshapes the visual shell + form
   markup inside .modal-body. The four workflow modals share the
   shell; each has its own accent (terracotta/rose/warm-brown/clay)
   that paints the eyebrow, the rules, and the focused-input borders.
*/

/* Backdrop — slightly warm so it reads as paper-light, not phone-app dark. */
.expediente.modal { --expediente-accent: var(--brand-terracotta); }
.expediente.modal-backdrop,
.modal-backdrop.expediente-backdrop {
  background-color: rgba(33, 37, 37, 0.55);
}

/* Slide-from-right dialog. Override Bootstrap's centered fade. */
.expediente .modal-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  max-width: 720px;
  height: 100vh;
  pointer-events: none;
  transform: translateX(40px);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.expediente.modal.show .modal-dialog { transform: translateX(0); }
.expediente .modal-dialog.modal-md  { max-width: 560px; }
.expediente .modal-dialog.modal-lg  { max-width: 720px; }
.expediente .modal-dialog.modal-xl  { max-width: 920px; }

.expediente .modal-content {
  pointer-events: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper-warm);
  border: none;
  border-left: 1px solid var(--paper-edge);
  border-radius: 0;
  box-shadow: -28px 0 60px -30px rgba(33, 37, 37, 0.35);
  /* Faint paper grain — SVG noise inlined to avoid a network request. */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(187, 69, 29, 0.04), transparent 35%),
    radial-gradient(circle at 86% 78%, rgba(165, 122, 88, 0.05), transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.2  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-blend-mode: multiply, multiply, normal;
}

/* Header — eyebrow / title / metadata / close.
   Replace Bootstrap's default styled header completely. */
.expediente .modal-header {
  display: block;
  position: relative;
  flex: 0 0 auto;
  padding: 1.75rem 2rem 1.25rem;
  background: transparent;
  border-bottom: none;
  border-radius: 0;
}
.expediente .modal-header::after {
  /* Hairline aged-paper rule under the title — lightly broken with a dot. */
  content: '';
  display: block;
  margin-top: 1.1rem;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--ink-rule) 0,
    var(--ink-rule) calc(100% - 110px),
    transparent calc(100% - 109px)
  );
}
.expediente .modal-header > .btn-close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  padding: 0.45rem;
  width: 2.2rem;
  height: 2.2rem;
  background-color: transparent;
  background-size: 1rem;
  border: 1px solid var(--ledger-border);
  border-radius: 999px;
  opacity: 0.65;
  transition: all 0.18s ease;
}
.expediente .modal-header > .btn-close:hover {
  opacity: 1;
  border-color: var(--expediente-accent);
  box-shadow: 0 0 0 4px rgba(187, 69, 29, 0.08);
}

.exp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expediente-accent);
}
.exp-eyebrow::before {
  content: '';
  width: 26px;
  height: 1.5px;
  background: var(--expediente-accent);
}
.exp-eyebrow__sep {
  color: var(--brand-warm-brown);
  font-weight: 500;
  letter-spacing: 0.18em;
}

.exp-title {
  margin: 0;
  font-family: var(--font-family-serif);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--brand-charcoal);
  /* Fraunces variable axes — soft + slightly wonky for character. */
  font-variation-settings: "opsz" 36, "SOFT" 50, "WONK" 0;
}
.exp-title em {
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
  color: var(--expediente-accent);
}

.exp-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1rem;
  font-family: var(--font-family-base);
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}
.exp-meta__id {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  background: var(--paper-aged);
  color: var(--brand-charcoal);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
}
.exp-meta__sep {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--ledger-border-strong);
}
.exp-meta__date {
  font-variant-numeric: tabular-nums;
}

/* Status pill — solid dot + label. Variants by current workflow stage. */
.exp-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem 0.28rem 0.55rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--ledger-border);
  border-radius: 999px;
  color: var(--brand-charcoal);
}
.exp-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--expediente-accent);
  box-shadow: 0 0 0 3px rgba(187, 69, 29, 0.12);
}
.exp-status--pending::before { background: var(--brand-warm-brown); box-shadow: 0 0 0 3px rgba(165, 122, 88, 0.16); }
.exp-status--review::before  { background: var(--color-warning);    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18); }
.exp-status--ok::before      { background: var(--color-success);    box-shadow: 0 0 0 3px rgba(74, 140, 92, 0.18); }
.exp-status--alert::before   { background: var(--brand-terracotta); box-shadow: 0 0 0 3px rgba(187, 69, 29, 0.18); }

/* Body — scrollable, generous padding, sectioned by Roman numeral. */
.expediente .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.6rem 2rem 2rem;
  scroll-behavior: smooth;
}
.expediente .modal-body::-webkit-scrollbar { width: 8px; }
.expediente .modal-body::-webkit-scrollbar-thumb {
  background: var(--ledger-border);
  border-radius: 4px;
}

.exp-section {
  position: relative;
  padding: 0 0 1.6rem;
  margin: 0 0 1.6rem;
  border-bottom: 1px dashed var(--ledger-border);
}
.exp-section:last-child { border-bottom: none; padding-bottom: 0.4rem; margin-bottom: 0; }

.exp-section__heading {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0 0 1.05rem;
  font-family: var(--font-family-serif);
  font-weight: 500;
  font-size: 1.12rem;
  color: var(--brand-charcoal);
  font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0;
}
.exp-section__numeral {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--expediente-accent);
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--ledger-border);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  flex: 0 0 auto;
}
.exp-section__hint {
  margin-left: auto;
  font-family: var(--font-family-base);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* Collapsible variant of .exp-section — used by Reportero in the
   notification modal. The <summary> behaves as the section heading;
   when closed, an inline name shows next to the title; when open the
   dl/dd contact block underneath is revealed. */
.exp-section--collapsible {
  cursor: pointer;
}
.exp-section--collapsible > summary {
  list-style: none;
  cursor: pointer;
  align-items: center;
  user-select: none;
}
.exp-section--collapsible > summary::-webkit-details-marker { display: none; }
.exp-section--collapsible > summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--font-family-mono);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: transform 0.18s ease;
}
.exp-section--collapsible[open] > summary::after { content: '–'; }
.exp-section--collapsible > *:not(summary) {
  cursor: default;
}
.exp-section__collapsed-name {
  margin-left: 0.6rem;
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  letter-spacing: 0;
  text-transform: none;
  /* Hidden when the <details> is open — the dl underneath has the data. */
}
.exp-section--collapsible[open] > summary > .exp-section__collapsed-name {
  display: none;
}

/* Field grid — 12-col flex, matching Bootstrap rhythm but with our rules. */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem 1.1rem;
}
.exp-grid > .exp-col-12 { grid-column: span 12; }
.exp-grid > .exp-col-8  { grid-column: span 8;  }
.exp-grid > .exp-col-6  { grid-column: span 6;  }
.exp-grid > .exp-col-4  { grid-column: span 4;  }
.exp-grid > .exp-col-3  { grid-column: span 3;  }

@media (max-width: 640px) {
  .exp-grid > [class*="exp-col-"] { grid-column: span 12; }
}

/* Field — label above input. Resets Bootstrap's blue focus + opinions. */
.exp-field { display: flex; flex-direction: column; gap: 0.3rem; }
.exp-field__label {
  font-family: var(--font-family-base);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.exp-field__label--required::after {
  content: '*';
  margin-left: 0.3em;
  color: var(--brand-terracotta);
  font-size: 1em;
  font-weight: 700;
}
/* .is-invalid is toggled by the modal's saveX() validation; we don't rely
   on :invalid so empty-on-open fields don't get a red border before the
   operator has even tried to save. */
.exp-field input.is-invalid,
.exp-field select.is-invalid,
.exp-field textarea.is-invalid {
  border-color: var(--brand-terracotta);
  box-shadow: 0 0 0 2px rgba(187, 69, 29, 0.12);
}
.exp-field__hint {
  font-family: var(--font-family-base);
  font-size: 0.74rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.expediente .form-control,
.expediente .form-select {
  font-family: var(--font-family-base);
  font-size: 0.92rem;
  color: var(--brand-charcoal);
  background-color: #ffffff;
  border: 1px solid var(--ledger-border);
  border-radius: 4px;
  padding: 0.55rem 0.75rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.expediente .form-control:focus,
.expediente .form-select:focus {
  border-color: var(--expediente-accent);
  box-shadow: 0 0 0 3px rgba(187, 69, 29, 0.14);
  outline: none;
}
.expediente textarea.form-control { line-height: 1.5; min-height: 5.2em; }

.expediente input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(33%) sepia(33%) saturate(2200%) hue-rotate(346deg) brightness(86%) contrast(85%);
  opacity: 0.7;
  cursor: pointer;
}

/* Footer — sticky, with last-edited line on the left and actions on the right. */
.expediente .modal-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 2rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), transparent),
              var(--paper-warm);
  border-top: 1px solid var(--ledger-border);
  border-radius: 0;
}
.exp-foot-note {
  font-family: var(--font-family-base);
  font-size: 0.74rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.exp-foot-note__time {
  font-family: var(--font-family-mono);
  font-style: normal;
  color: var(--color-text-secondary);
  margin-left: 0.35em;
}

.expediente .modal-footer .btn {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  padding: 0.55rem 1.2rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.expediente .modal-footer .btn-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--paper-aged);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--brand-charcoal);
}
.expediente .modal-footer .btn-primary {
  --bs-btn-bg: var(--expediente-accent);
  --bs-btn-border-color: var(--expediente-accent);
}

/* Per-modal accents — same shell, different ribbon color. */
.expediente.expediente--notification { --expediente-accent: var(--brand-terracotta); }
.expediente.expediente--triage       { --expediente-accent: var(--brand-dusty-rose); }
.expediente.expediente--verification { --expediente-accent: var(--color-success); }
.expediente.expediente--evaluation   { --expediente-accent: #b08a3a; /* burnt-gold for risk */ }

/* Antecedentes peek — collapsible "what did the previous phase capture?"
   block at the top of triage / verification / evaluation modals. */
.exp-antecedentes {
  margin: 0 0 1.4rem;
  padding: 0;
  background: var(--paper-aged);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  overflow: hidden;
}
.exp-antecedentes > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.95rem;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-charcoal);
  user-select: none;
}
.exp-antecedentes > summary::-webkit-details-marker { display: none; }
.exp-antecedentes > summary i { color: var(--expediente-accent); font-size: 0.95rem; }
.exp-antecedentes > summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--font-family-mono);
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  transition: transform 0.18s ease;
}
.exp-antecedentes[open] > summary {
  border-bottom: 1px solid var(--paper-edge);
}
.exp-antecedentes[open] > summary::after {
  content: '–';
}
.exp-antecedentes__grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  padding: 0.85rem 1rem 1rem;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.6);
}
.exp-antecedentes__grid dt {
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: start;
}
.exp-antecedentes__grid dd {
  margin: 0;
  color: var(--brand-charcoal);
  font-variant-numeric: tabular-nums;
}
.exp-antecedentes__grid .exp-antecedentes__long {
  font-style: italic;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
}
.exp-antecedentes__grid .exp-antecedentes__rule {
  grid-column: 1 / -1;
  padding-top: 0.5rem;
  margin-top: 0.3rem;
  border-top: 1px dashed var(--ledger-border);
  font-family: var(--font-family-serif);
  font-style: italic;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--expediente-accent);
}

/* Evaluation-specific summary card — total score + classification. */
.exp-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  padding: 1rem 1.1rem;
  margin: 0 0 1.4rem;
  background: var(--paper-aged);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  position: relative;
}
.exp-summary::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  pointer-events: none;
}
.exp-summary__cell { position: relative; }
.exp-summary__label {
  font-family: var(--font-family-base);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 0.3rem;
}
.exp-summary__score {
  font-family: var(--font-family-serif);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  font-variation-settings: "opsz" 60, "SOFT" 30;
  font-variant-numeric: tabular-nums;
  color: var(--brand-charcoal);
}
.exp-summary__class {
  display: inline-block;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  background: var(--brand-charcoal);
  color: var(--paper-warm);
  border-radius: 3px;
}

/* Workflow chip strip — shows the four-step pipeline at the top of the body. */
.exp-flow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.2rem 0 1.4rem;
  font-family: var(--font-family-base);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.exp-flow__step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.exp-flow__step--current {
  color: var(--expediente-accent);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
}
.exp-flow__arrow {
  font-family: var(--font-family-mono);
  color: var(--ledger-border-strong);
  font-size: 0.78rem;
}

/* Error pages (403 / 404 / 500) */
.error-page {
  max-width: 640px;
  margin: 2rem auto;
}
.error-page code {
  background: var(--color-surface-muted, #f4f6f7);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
  word-break: break-all;
}

/* Profile switcher inside the sidebar user-info block */
.profile-switcher-toggle {
  font-size: 0.8rem;
  line-height: 1.2;
}
.profile-switcher-toggle:hover,
.profile-switcher-toggle:focus {
  color: var(--brand-cream, #fffaf0) !important;
  text-decoration: underline !important;
}
.profile-switcher-menu {
  min-width: 220px;
}
.profile-switcher-menu .dropdown-item {
  text-align: left;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
}
.profile-switcher-menu .dropdown-item.active {
  background-color: var(--color-surface-muted, #f4f6f7) !important;
  color: inherit !important;
  font-weight: 600;
}

/* Risk matrix inside the evaluation modal */
.evaluation-matrix-domain {
  margin-bottom: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.evaluation-matrix-domain > header {
  background-color: var(--color-surface-muted, #f4f6f7);
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.evaluation-matrix-domain-subtotal {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
}
.evaluation-matrix-criterion {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px dashed var(--color-border);
  border-left: 3px solid transparent;
  transition: background-color 0.2s, border-left-color 0.2s;
}
.evaluation-matrix-criterion.is-missing {
  background-color: #fdf2f2;
  border-left-color: var(--color-danger, #e74c3c);
}
.evaluation-matrix-criterion.is-missing > header::before {
  content: "⚠ ";
  color: var(--color-danger, #e74c3c);
}
.evaluation-matrix-criterion:last-child {
  border-bottom: none;
}
.evaluation-matrix-criterion > header {
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.evaluation-matrix-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.4rem;
}
.evaluation-matrix-option {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.3;
}
.evaluation-matrix-option:has(input:checked) {
  border-color: var(--brand-terracotta);
  box-shadow: inset 0 0 0 1px var(--brand-terracotta);
}
.evaluation-matrix-option.is-readonly {
  cursor: default;
  opacity: 0.85;
}
.evaluation-matrix-option.is-readonly input {
  cursor: default;
}
.evaluation-matrix-option.is-readonly:not(:has(input:checked)) {
  opacity: 0.55;
}
.evaluation-matrix-option .score-pill {
  font-size: 0.75rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #eee;
  margin-left: auto;
}
.evaluation-matrix-option[data-color="verde"]   .score-pill { background: #d4edda; }
.evaluation-matrix-option[data-color="azul"]    .score-pill { background: #d0e3ff; }
.evaluation-matrix-option[data-color="naranja"] .score-pill { background: #ffe1c2; }
.evaluation-matrix-option[data-color="rojo"]    .score-pill { background: #f5c2c2; }

.evaluation-summary {
  text-align: right;
  font-size: 0.95rem;
}

/* 15. Responsive
   ------------------------------------------------------------ */
@media (max-width: 992px) {
  body.sidebar-open .main-content {
    margin-left: var(--toggle-bar-width);
  }
  .value-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .plots-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .value-row {
    grid-template-columns: 1fr;
  }
}

/* 16. Decorative footer strip (Zócalo Decorativo)
   ------------------------------------------------------------ */
.deco-zocalo {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* Footer wrapper inside layout main-content */
.deco-zocalo-footer {
  margin-top: auto;
  padding-top: 3rem;
}

/* Dashboard filter bar (period + department + situation + status).
   Two-row layout so the period chips have room on top and the
   detailed selects line up below; collapses to a vertical stack on
   narrow viewports. */
.dashboard-filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem 0.95rem;
  margin: 0.25rem 0 1.4rem;
  background: var(--paper-aged);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  font-family: var(--font-family-base);
  font-size: 0.78rem;
  color: var(--brand-charcoal);
}
.dashboard-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.dashboard-filters__label {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-terracotta);
  margin-right: 0.3rem;
}
.dashboard-filters__sep {
  color: var(--ledger-border-strong);
  margin: 0 0.2rem;
}
.dashboard-filters__inline-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
}
.dashboard-filters__field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 180px;
}
.dashboard-filters__field-label {
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.dashboard-filters__select {
  font-family: var(--font-family-base);
  font-size: 0.82rem;
  padding: 0.32rem 0.5rem;
  border: 1px solid var(--ledger-border);
  border-radius: 3px;
  background: var(--brand-white);
  color: var(--brand-charcoal);
}
.dashboard-filters__apply,
.dashboard-filters__reset {
  align-self: flex-end;
  padding: 0.4rem 0.95rem;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  border-radius: 4px;
  cursor: pointer;
}
.dashboard-filters__apply {
  background: var(--brand-charcoal);
  color: var(--brand-white);
  border: 1px solid var(--brand-charcoal);
}
.dashboard-filters__apply:hover {
  background: var(--brand-terracotta);
  border-color: var(--brand-terracotta);
}
.dashboard-filters__reset {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--ledger-border);
}
.dashboard-filters__reset:hover {
  border-color: var(--brand-terracotta);
  color: var(--brand-terracotta);
}

/* Insight blocks (latency cards, top departments, pending queue) */
.insight-block {
  margin: 1.6rem 0 1.4rem;
}
.insight-block__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-family-serif);
  font-weight: 500;
  font-size: 1.4rem;
  font-variation-settings: "opsz" 28, "SOFT" 30, "WONK" 0;
  color: var(--brand-charcoal);
}
.insight-block__lede {
  margin: 0 0 1rem;
  font-family: var(--font-family-base);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
  max-width: 70ch;
}

/* Latency cards row — three cards, one per pipeline transition. The
   primary number is the median, with p95 / avg / n in a smaller
   secondary line so the operator scans medians first. */
.latency-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
@media (max-width: 900px) {
  .latency-row { grid-template-columns: 1fr; }
}
.latency-card {
  position: relative;
  padding: 1rem 1.1rem;
  background: var(--paper-warm);
  border: 1px solid var(--paper-edge);
  border-left: 4px solid var(--brand-terracotta);
  border-radius: 4px;
  font-family: var(--font-family-base);
}
.latency-card--rose      { border-left-color: var(--brand-dusty-rose); }
.latency-card--gold      { border-left-color: #b08a3a; }
.latency-card--placeholder,
.latency-card--empty {
  border-left-color: var(--ledger-border);
  color: var(--color-text-muted);
  font-style: italic;
}
.latency-card__step {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.latency-card__primary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.4rem 0 0.3rem;
}
.latency-card__value {
  font-family: var(--font-family-serif);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brand-charcoal);
  font-variation-settings: "opsz" 60, "SOFT" 30;
}
.latency-card__unit {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.latency-card__secondary {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.latency-card__secondary strong { color: var(--brand-charcoal); font-weight: 600; }
.latency-card__split {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--ledger-border);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.latency-card__split strong { color: var(--brand-charcoal); font-weight: 600; }

/* Insight grid: top departments + pending queue side-by-side. */
.insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 1100px) {
  .insight-grid { grid-template-columns: 1fr; }
}
.insight-table-wrap {
  border: 1px solid var(--ledger-border);
  border-radius: 4px;
  background: var(--brand-white);
  overflow: hidden;
}
.insight-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family-base);
  font-size: 0.85rem;
  color: var(--brand-charcoal);
}
.insight-table thead th {
  background: var(--paper-aged);
  border-bottom: 1px solid var(--ledger-border);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 0.6rem 0.85rem;
  text-align: left;
}
.insight-table tbody td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px dashed var(--ledger-border);
  vertical-align: middle;
}
.insight-table tbody tr:last-child td { border-bottom: none; }
.insight-table tbody tr:hover td { background: rgba(187, 69, 29, 0.04); }
.insight-table__rank {
  width: 36px;
  font-family: var(--font-family-mono);
  color: var(--color-text-secondary);
}
.insight-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 90px;
}
.insight-table__share {
  width: 200px;
}
.insight-table__id a {
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  color: var(--brand-terracotta);
  text-decoration: none;
}
.insight-table__id a:hover { text-decoration: underline; }
.insight-table__age strong { color: var(--brand-charcoal); }
.insight-table__age.is-warning strong { color: #b08a3a; }
.insight-table__age.is-stale strong   { color: var(--brand-terracotta); }

/* Horizontal share bar inside top-departments. */
.share-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 18px;
  background: var(--paper-aged);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  overflow: hidden;
}
.share-bar::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--share, 0%);
  background: linear-gradient(to right, var(--brand-terracotta), #d4654a);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}
.share-bar__pct {
  position: relative;
  z-index: 1;
  margin-left: 0.5rem;
  font-family: var(--font-family-mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--brand-charcoal);
}

/* Stage pill (used in pending queue table). */
.stage-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-base);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ledger-border);
  color: var(--brand-charcoal);
}
.stage-pill--triage { border-color: var(--brand-dusty-rose); color: var(--brand-dusty-rose); }
.stage-pill--verif  { border-color: var(--color-success);   color: var(--color-success); }
.stage-pill--eval   { border-color: #b08a3a;                color: #b08a3a; }

/* State buckets table — six canonical workflow positions, with a
   small "Activa / Finalizada" tag in front of each bucket name so
   the two halves of the funnel stay visually distinct in a single
   table. The participation bar reuses .share-bar from the top-deps
   block; only the new bucket-tag styles live here. */
.state-buckets-block { margin-top: 1.6rem; }
.state-buckets-table tbody td { vertical-align: middle; }
.state-bucket-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-base);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  margin-right: 0.45rem;
  border: 1px solid var(--ledger-border);
  background: rgba(255, 255, 255, 0.7);
  color: var(--brand-charcoal);
}
.state-bucket-tag--active {
  border-color: var(--brand-dusty-rose);
  color: var(--brand-dusty-rose);
}
.state-bucket-tag--final {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
}
/* Visually fade finalizada rows just enough to give "active" rows
   priority for the eye, without making finalizadas hard to read. */
.state-bucket-row--finalized td { color: var(--color-text-secondary); }
.state-bucket-row--finalized .insight-table__num strong { color: var(--brand-charcoal); }
.state-bucket-where {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.state-buckets-footnote {
  margin-top: 0.55rem;
  font-style: italic;
}
.state-buckets-footnote code {
  font-size: 0.78rem;
  background: var(--paper-aged);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
}

/* Old class kept for backward-compat — same look, just under the new
   wrapper. The dashboard-range__preset chips and dashboard-range__input
   styles below still apply, just inside the new dashboard-filters
   container. */
.dashboard-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.95rem;
  margin: 0.25rem 0 1.4rem;
  background: var(--paper-aged);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  font-family: var(--font-family-base);
  font-size: 0.78rem;
  color: var(--brand-charcoal);
}
.dashboard-range__label {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-terracotta);
  margin-right: 0.3rem;
}
.dashboard-range__sep {
  color: var(--ledger-border-strong);
  margin: 0 0.2rem;
}
.dashboard-range__presets {
  display: inline-flex;
  gap: 0.3rem;
}
.dashboard-range__preset {
  padding: 0.3rem 0.7rem;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--ledger-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--brand-charcoal);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dashboard-range__preset:hover {
  border-color: var(--brand-terracotta);
  color: var(--brand-terracotta);
}
.dashboard-range__preset.is-active {
  background: var(--brand-terracotta);
  border-color: var(--brand-terracotta);
  color: var(--brand-white);
}
.dashboard-range label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
}
.dashboard-range__input {
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--ledger-border);
  border-radius: 3px;
  background: var(--brand-white);
  color: var(--brand-charcoal);
}
.dashboard-range__apply {
  padding: 0.32rem 0.85rem;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: var(--brand-charcoal);
  color: var(--brand-white);
  border: 1px solid var(--brand-charcoal);
  border-radius: 4px;
  cursor: pointer;
}
.dashboard-range__apply:hover {
  background: var(--brand-terracotta);
  border-color: var(--brand-terracotta);
}

/* Login page: pinned to bottom of viewport */
.deco-zocalo--login {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
  opacity: 0.4;
}


/* 16. Admin pages — risk matrix, access control, classifications.
   ------------------------------------------------------------
   Editorial header pattern shared by /risk_matrix, /admin/access-control,
   and /admin/risk-classifications so the configuration screens read as
   one family with the modals and the notifications grid. */

.admin-page {
  padding: 0.4rem 0 2rem;
}

.admin-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.4rem 0 1.6rem;
  position: relative;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ledger-border);
}
.admin-page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-terracotta);
}
.admin-page-header__eyebrow::before {
  content: '';
  width: 26px;
  height: 1.5px;
  background: var(--brand-terracotta);
}
.admin-page-header__eyebrow span {
  color: var(--brand-warm-brown);
  font-weight: 500;
}
.admin-page-header__title {
  margin: 0;
  font-family: var(--font-family-serif);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--brand-charcoal);
  font-variation-settings: "opsz" 36, "SOFT" 50, "WONK" 0;
}
.admin-page-header__title em {
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
  color: var(--brand-terracotta);
}
.admin-page-header__lede {
  margin: 0.2rem 0 0;
  max-width: 70ch;
  font-family: var(--font-family-base);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.admin-page-header__lede code {
  font-family: var(--font-family-mono);
  font-size: 0.78em;
  background: var(--paper-aged);
  color: var(--brand-charcoal);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--paper-edge);
}
.admin-page-header__actions {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Per-page accent tint on the eyebrow text, the eyebrow's leading rule,
   and the title's italic accent word. */
.admin-page--access .admin-page-header__eyebrow         { color: var(--brand-warm-brown); }
.admin-page--access .admin-page-header__eyebrow::before { background: var(--brand-warm-brown); }
.admin-page--access .admin-page-header__title em        { color: var(--brand-warm-brown); }

.admin-page--bands  .admin-page-header__eyebrow         { color: var(--brand-dusty-rose); }
.admin-page--bands  .admin-page-header__eyebrow::before { background: var(--brand-dusty-rose); }
.admin-page--bands  .admin-page-header__title em        { color: var(--brand-dusty-rose); }


/* Risk-matrix accordion — dossier rubric. The Bootstrap accordion shell
   stays so the data-bs-toggle JS keeps working; everything else is
   re-skinned with paper colors, ledger borders, and mono codes. */

.risk-rubric .accordion-item {
  background: var(--paper-warm);
  border: 1px solid var(--ledger-border);
  border-radius: 4px;
  margin-bottom: 0.7rem;
  overflow: hidden;
}
.risk-rubric .accordion-button {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: transparent;
  color: var(--brand-charcoal);
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: none;
  border-bottom: 1px solid transparent;
}
.risk-rubric .accordion-button:not(.collapsed) {
  background: var(--paper-aged);
  color: var(--brand-charcoal);
  border-bottom: 1px solid var(--ledger-border);
  box-shadow: inset 0 -1px 0 var(--ledger-border);
}
.risk-rubric .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(187, 69, 29, 0.14);
  border-color: var(--ledger-border);
}
.risk-rubric .accordion-button::after {
  filter: invert(33%) sepia(33%) saturate(2200%) hue-rotate(346deg) brightness(86%) contrast(85%);
}

.risk-rubric__code {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ledger-border);
  border-radius: 3px;
  color: var(--brand-charcoal);
}
.risk-rubric__domain-name {
  flex: 1 1 auto;
  font-family: var(--font-family-serif);
  font-weight: 500;
  font-size: 1.05rem;
  font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0;
}
.risk-rubric__count {
  font-family: var(--font-family-base);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--ledger-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
}

.risk-rubric__body {
  background: rgba(255, 255, 255, 0.55);
  padding: 1.1rem 1.2rem 1.4rem;
}
.risk-rubric__toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.risk-rubric__table {
  margin: 0;
  border: 1px solid var(--ledger-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--brand-white);
}
.risk-rubric__th {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--paper-aged);
  border-bottom: 1px solid var(--ledger-border) !important;
  padding: 0.65rem 0.8rem;
}
.risk-rubric__th--code  { width: 110px; }
.risk-rubric__th--actions { width: 220px; text-align: right; }

.risk-rubric__row td {
  padding: 0.7rem 0.8rem;
  border-color: var(--ledger-border);
  vertical-align: middle;
}
.risk-rubric__row:hover td {
  background: rgba(187, 69, 29, 0.04);
}

.risk-rubric__option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0.3rem 0.15rem 0;
  padding: 0.18rem 0.4rem 0.18rem 0.5rem;
  background: var(--paper-aged);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  font-family: var(--font-family-base);
  font-size: 0.78rem;
}
.risk-rubric__option-code {
  font-family: var(--font-family-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand-charcoal);
}
.risk-rubric__option-score {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  padding: 0 0.25rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
}
.risk-rubric__option-edit {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 0 0.15rem;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}
.risk-rubric__option-edit:hover {
  color: var(--brand-terracotta);
}