/* ════════════════════════════════════════════════════════════════════
 *  Solum Design Framework — Prelude v1
 *  Source: _ui_mockups/_framework.md §1, §2, §4.1
 *  Inyectado en TODAS las plantillas vía Flask context processor.
 *
 *  Reglas:
 *   1. No reasignar tokens existentes (--accent, --brass, etc.) que ya
 *      consume el monolito — agregarlos como `--solum-*` paralelos
 *      cuando haga falta para evitar romper estilos viejos.
 *   2. Las clases `solum-*` y `.mag-card` son las CANONICAS — toda
 *      pantalla nueva o refactor debe usarlas y NADA más.
 *   3. Cero `!important`. Cero estilos sobre tags genéricos (a, button)
 *      sin clase prefijo. La pantalla raw vieja sigue funcionando con
 *      su CSS inline; este file solo AGREGA vocabulario.
 *   4. Hard-radius 0, soft-radius 6px, full 999px — punto.
 *   5. Familias tipográficas vía variables existentes (--serif, --sans,
 *      --mono) que el monolito ya define. Si la plantilla no las trae,
 *      las definimos abajo como fallback.
 * ════════════════════════════════════════════════════════════════════ */

/* §1.1-§1.6 tokens — solo agregamos los que no existen ya en el monolito.
   El monolito v14 ya define --accent, --brass, --urgent, --info, --bg,
   --ink, --line, etc. Acá agregamos los faltantes + fallbacks defensivos. */
:root {
  /* Fallbacks (si la plantilla cargó este file sin tokens previos) */
  --accent:        var(--accent, #4a6b3e);
  --accent-deep:   var(--accent-deep, #3a5530);
  --accent-soft:   var(--accent-soft, #e2ead6);
  --brass:         var(--brass, #8b6f2e);
  --brass-soft:    var(--brass-soft, #f0e8d2);
  --urgent:        var(--urgent, #9e4e2e);
  --urgent-soft:   var(--urgent-soft, #f5e3d8);
  --info:          var(--info, #1d4ed8);
  --info-soft:     var(--info-soft, #dbeafe);
  --bg:            var(--bg, #f3f4f0);
  --bg-alt:        var(--bg-alt, #fbfbf8);
  --bg-card:       var(--bg-card, #ffffff);
  --bg-deep:       var(--bg-deep, #ecede7);
  --ink:           var(--ink, #232622);
  --ink-2:         var(--ink-2, #4b4f48);
  --ink-3:         var(--ink-3, #7a7e74);
  --line-strong:   var(--line-strong, #c8ccb8);
  --line:          var(--line, #dcdfd5);
  --line-soft:     var(--line-soft, #e9ebe2);
  --line-faint:    var(--line-faint, #f1f3eb);

  /* Tipografía — fallback si las @font-face no fueron cargadas */
  --serif:  var(--serif, 'Newsreader', 'Iowan Old Style', Georgia, serif);
  --sans:   var(--sans, 'Inter', system-ui, -apple-system, sans-serif);
  --mono:   var(--mono, 'JetBrains Mono', 'SF Mono', Menlo, monospace);

  /* §1.4 Radii — 3 valores oficiales */
  --solum-r-sharp: 0;
  --solum-r-soft:  6px;
  --solum-r-full:  999px;

  /* §1.5 Shadows — 3 niveles */
  --solum-shadow-subtle: 0 1px 2px rgba(35,38,34,.04);
  --solum-shadow-lift:   0 6px 16px rgba(35,38,34,.06);
  --solum-shadow-modal:  0 16px 48px rgba(35,38,34,.18);

  /* §1.6 Motion */
  --solum-ease:        cubic-bezier(.4,0,.2,1);
  --solum-ease-out:    cubic-bezier(.16,1,.3,1);
  --solum-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --solum-d-fast:      .12s;
  --solum-d-base:      .2s;
  --solum-d-medium:    .35s;
  --solum-d-slow:      .55s;
}

/* ════════════════════════════════════════════════════════════════════
 *  §1.6 Keyframes (canónicos — el monolito ya tiene algunos pero los
 *  redeclaramos acá para que las pantallas que cargan SOLO el prelude
 *  los tengan disponibles).
 * ════════════════════════════════════════════════════════════════════ */
@keyframes solumFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes solumFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes solumBadgePulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.15); opacity: .75; }
}
@keyframes solumPulseWarn {
  0%, 100% { box-shadow: 0 0 0 0   rgba(158,78,46,.30); }
  50%      { box-shadow: 0 0 0 8px rgba(158,78,46,0);   }
}
@keyframes solumSweep {
  0%        { transform: translateX(-100%); }
  50%, 100% { transform: translateX( 100%); }
}
@keyframes solumToastIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes solumModalIn {
  from { transform: scale(.95); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Utility */
.is-mono     { font-family: var(--mono); letter-spacing: .06em; }
.is-stagger > * { animation: solumFadeUp .5s var(--solum-ease-spring) both; }
.is-stagger > *:nth-child(1) { animation-delay:   0ms; }
.is-stagger > *:nth-child(2) { animation-delay:  60ms; }
.is-stagger > *:nth-child(3) { animation-delay: 120ms; }
.is-stagger > *:nth-child(4) { animation-delay: 180ms; }
.is-stagger > *:nth-child(5) { animation-delay: 240ms; }
.is-stagger > *:nth-child(6) { animation-delay: 300ms; }
.is-stagger > *:nth-child(7) { animation-delay: 360ms; }
.is-stagger > *:nth-child(8) { animation-delay: 420ms; }
.is-stagger > *:nth-child(9) { animation-delay: 480ms; }
.is-stagger > *:nth-child(n+10) { animation-delay: 540ms; }


/* ════════════════════════════════════════════════════════════════════
 *  §2.1 mag-card — la unidad de información canónica
 *  (Se mantienen las clases viejas .mag-card del monolito; agregamos
 *  los modifiers --success/--brass/--urgent/--info/--split/--ghost.)
 * ════════════════════════════════════════════════════════════════════ */
.mag-card--success { border-left-color: var(--accent)        !important; }
.mag-card--brass   { border-left-color: var(--brass)         !important; }
.mag-card--urgent  { border-left-color: var(--urgent)        !important; }
.mag-card--info    { border-left-color: var(--info)          !important; }
.mag-card--split   { border-left-color: var(--ink-3)         !important; }
.mag-card--ghost   {
  border-left:   3px dashed var(--line-strong) !important;
  background:    var(--bg-alt)                 !important;
}

/* Hover lift universal cuando la mag-card sea interactiva */
.mag-card[role="button"],
.mag-card.is-interactive,
a.mag-card,
button.mag-card {
  cursor: pointer;
  transition:
    transform        .25s var(--solum-ease),
    box-shadow       .25s var(--solum-ease),
    border-left-color .2s var(--solum-ease),
    border-left-width .15s var(--solum-ease);
}
.mag-card[role="button"]:hover,
.mag-card.is-interactive:hover,
a.mag-card:hover,
button.mag-card:hover {
  transform:   translateY(-2px);
  box-shadow:  var(--solum-shadow-lift);
  border-left-width: 5px;
}


/* ════════════════════════════════════════════════════════════════════
 *  §2.2 solum-modal — único patrón modal de Solum
 *  Reemplaza los 49 modales ad-hoc. JS API en solum-prelude.js.
 * ════════════════════════════════════════════════════════════════════ */
.solum-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
  font-family: var(--sans);
}
.solum-modal[data-open] {
  display: flex;
  animation: solumFadeIn var(--solum-d-base) var(--solum-ease) both;
}
.solum-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(35,38,34,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.solum-modal__panel {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--solum-r-soft);
  box-shadow: var(--solum-shadow-modal);
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  width: 560px; max-width: calc(100vw - 32px);
  animation: solumModalIn var(--solum-d-medium) var(--solum-ease-spring) both;
}
.solum-modal[data-size="sm"]   .solum-modal__panel { width: 380px; }
.solum-modal[data-size="lg"]   .solum-modal__panel { width: 820px; }
.solum-modal[data-size="xl"]   .solum-modal__panel { width: 1080px; }
.solum-modal[data-size="full"] .solum-modal__panel { width: calc(100vw - 64px); height: calc(100vh - 64px); }

.solum-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.solum-modal__eyebrow {
  display: block;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 4px;
}
.solum-modal__title {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  margin: 0;
  letter-spacing: -.005em; line-height: 1.2;
}
.solum-modal__title em {
  font-style: italic; color: var(--accent); font-weight: 500;
}
.solum-modal__close {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-3); font-size: 20px; line-height: 1;
  border-radius: var(--solum-r-soft); cursor: pointer;
  transition: background var(--solum-d-fast) var(--solum-ease),
              color var(--solum-d-fast) var(--solum-ease);
  flex-shrink: 0;
}
.solum-modal__close:hover {
  background: var(--bg-alt);
  color: var(--urgent);
}
.solum-modal__body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.solum-modal__foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-alt);
  border-radius: 0 0 var(--solum-r-soft) var(--solum-r-soft);
}


/* ════════════════════════════════════════════════════════════════════
 *  §2.3 solum-input
 * ════════════════════════════════════════════════════════════════════ */
.solum-field {
  display: flex; flex-direction: column; gap: 5px;
}
.solum-field__label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.solum-field__help {
  font-family: var(--serif); font-style: italic; font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.solum-input,
.solum-textarea,
.solum-select {
  width: 100%;
  font-family: var(--sans); font-size: 13.5px;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--solum-r-soft);
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--solum-d-base) var(--solum-ease),
              box-shadow var(--solum-d-base) var(--solum-ease);
}
.solum-input:focus,
.solum-textarea:focus,
.solum-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.solum-input::placeholder,
.solum-textarea::placeholder {
  color: var(--ink-3); font-family: var(--serif); font-style: italic;
}
.solum-input--mono { font-family: var(--mono); letter-spacing: .04em; }
.solum-input--lg   { padding: 12px 16px; font-size: 14.5px; }
.solum-input--inline {
  border-color: transparent; background: transparent; padding: 4px 6px;
}
.solum-input--inline:hover { border-color: var(--line); background: var(--bg-card); }
.solum-input[aria-invalid="true"] {
  border-color: var(--urgent);
  box-shadow: 0 0 0 3px var(--urgent-soft);
}
.solum-input:disabled,
.solum-textarea:disabled {
  background: var(--bg-deep); color: var(--ink-3); cursor: not-allowed;
}


/* ════════════════════════════════════════════════════════════════════
 *  §2.4 solum-btn
 * ════════════════════════════════════════════════════════════════════ */
.solum-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--ink-2);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--solum-r-soft);
  text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer;
  transition:
    transform   var(--solum-d-base) var(--solum-ease-spring),
    border-color var(--solum-d-base) var(--solum-ease),
    background  var(--solum-d-base) var(--solum-ease),
    color       var(--solum-d-base) var(--solum-ease);
  text-decoration: none;
}
.solum-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.solum-btn:active:not(:disabled) { transform: translateY(0); }
.solum-btn:disabled { opacity: .5; cursor: not-allowed; }

.solum-btn--primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.solum-btn--primary:hover:not(:disabled) {
  background: var(--accent-deep); border-color: var(--accent-deep); color: #fff;
}
.solum-btn--secondary { /* alias of default */ }
.solum-btn--ghost {
  background: transparent; border-color: transparent; color: var(--ink-2);
}
.solum-btn--ghost:hover:not(:disabled) {
  background: var(--bg-alt); border-color: var(--line); color: var(--ink);
}
.solum-btn--danger {
  border-color: var(--urgent); color: var(--urgent);
}
.solum-btn--danger:hover:not(:disabled) {
  background: var(--urgent); border-color: var(--urgent); color: #fff;
}
.solum-btn--link {
  background: transparent; border-color: transparent; color: var(--accent);
  padding: 4px 0;
}
.solum-btn--link:hover:not(:disabled) {
  color: var(--accent-deep); transform: translateX(2px);
}


/* ════════════════════════════════════════════════════════════════════
 *  §2.5 solum-pill
 * ════════════════════════════════════════════════════════════════════ */
.solum-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border-radius: var(--solum-r-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.solum-pill--success { background: var(--accent-soft); color: var(--accent-deep); }
.solum-pill--brass   { background: var(--brass-soft);  color: var(--brass);       }
.solum-pill--urgent  { background: var(--urgent-soft); color: var(--urgent);      }
.solum-pill--info    { background: var(--info-soft);   color: var(--info);        }
.solum-pill--ghost   { background: var(--bg-deep);     color: var(--ink-3);       }
.solum-pill--solid.solum-pill--success { background: var(--accent);  color: #fff; }
.solum-pill--solid.solum-pill--brass   { background: var(--brass);   color: #fff; }
.solum-pill--solid.solum-pill--urgent  { background: var(--urgent);  color: #fff; }
.solum-pill--solid.solum-pill--info    { background: var(--info);    color: #fff; }


/* ════════════════════════════════════════════════════════════════════
 *  §2.6 solum-row
 * ════════════════════════════════════════════════════════════════════ */
.solum-rows {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--solum-r-soft);
  overflow: hidden;
  box-shadow: var(--solum-shadow-subtle);
}
.solum-row {
  display: grid; gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition:
    padding-left var(--solum-d-base) var(--solum-ease-spring),
    background   var(--solum-d-base) var(--solum-ease),
    box-shadow   var(--solum-d-base) var(--solum-ease);
}
.solum-row:last-child { border-bottom: none; }
.solum-row:hover {
  padding-left: 22px;
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--accent);
}
.solum-row.is-urgent:hover { box-shadow: inset 3px 0 0 var(--urgent); }
.solum-row.is-brass:hover  { box-shadow: inset 3px 0 0 var(--brass);  }
.solum-row.is-info:hover   { box-shadow: inset 3px 0 0 var(--info);   }
.solum-row__primary   { font-size: 13.5px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solum-row__secondary { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.solum-row__meta      { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-align: right; }
.solum-row__trail     { display: flex; gap: 6px; align-items: center; justify-self: end; }


/* ════════════════════════════════════════════════════════════════════
 *  §2.7 solum-section header
 * ════════════════════════════════════════════════════════════════════ */
.solum-section {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.solum-section::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  width: 36px; height: 2px;
  background: var(--accent);
  transition: width var(--solum-d-medium) var(--solum-ease-spring);
}
.solum-section:hover::after { width: 80px; }
.solum-section--urgent::after { background: var(--urgent); }
.solum-section--brass::after  { background: var(--brass);  }
.solum-section--info::after   { background: var(--info);   }
.solum-section__eyebrow {
  display: block;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: 4px;
}
.solum-section__title {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  margin: 0;
  letter-spacing: -.008em;
}
.solum-section__title em { font-style: italic; color: var(--accent); font-weight: 500; }
.solum-section__count {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}


/* ════════════════════════════════════════════════════════════════════
 *  §2.8 solum-empty
 * ════════════════════════════════════════════════════════════════════ */
.solum-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px;
  text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--ink-3);
  gap: 12px;
}
.solum-empty__icon { font-size: 42px; opacity: .35; font-style: normal; }
.solum-empty__msg  { margin: 0; }


/* ════════════════════════════════════════════════════════════════════
 *  §2.9 solum-toast (estilos; JS API en solum-prelude.js)
 * ════════════════════════════════════════════════════════════════════ */
.solum-toast-stack {
  position: fixed;
  top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 10000;
  pointer-events: none;
}
.solum-toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--solum-r-soft);
  box-shadow: var(--solum-shadow-lift);
  font-family: var(--sans); font-size: 13px;
  min-width: 240px; max-width: 380px;
  pointer-events: auto; cursor: pointer;
  animation: solumToastIn var(--solum-d-base) var(--solum-ease-out) both;
}
.solum-toast--success { border-left-color: var(--accent); }
.solum-toast--brass   { border-left-color: var(--brass);  }
.solum-toast--urgent  { border-left-color: var(--urgent); }
.solum-toast--info    { border-left-color: var(--info);   }
.solum-toast__icon { font-size: 16px; line-height: 1; }
.solum-toast__msg  { flex: 1; }


/* ════════════════════════════════════════════════════════════════════
 *  §2.10 solum-view-toggle
 * ════════════════════════════════════════════════════════════════════ */
.solum-view-toggle {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--solum-r-soft);
  padding: 3px; gap: 2px;
  box-shadow: var(--solum-shadow-subtle);
}
.solum-view-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: 4px;
  text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer;
  transition: color var(--solum-d-base) var(--solum-ease),
              background var(--solum-d-medium) var(--solum-ease);
}
.solum-view-toggle button:hover { color: var(--ink); }
.solum-view-toggle button.is-active {
  color: var(--ink);
  background: var(--bg-deep);
}


/* ════════════════════════════════════════════════════════════════════
 *  §2.11 solum-tabs — el único tab strip (2026-05-30)
 *  Reemplaza los 3 mecanismos de tabs. JS solum.tabs ya existe; esto
 *  es el CSS canónico. Underline accent que se desliza (firma v42).
 * ════════════════════════════════════════════════════════════════════ */
.solum-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.solum-tab {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
  background: none; border: none;
  padding: 11px 13px 13px;
  cursor: pointer; position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--solum-d-base) var(--solum-ease);
}
.solum-tab:hover { color: var(--ink-2); }
.solum-tab.is-active { color: var(--ink); }
.solum-tab.is-active::after {
  content: ''; position: absolute;
  left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--accent);
}
.solum-tab__count {
  font-family: var(--mono); font-size: 8.5px;
  background: var(--bg-deep); color: var(--ink-3);
  border-radius: var(--solum-r-full); padding: 1px 6px;
}


/* ════════════════════════════════════════════════════════════════════
 *  §2.12 solum-check — casillas (checkbox / radio / switch) (2026-05-30)
 *  El prelude tenía solum-input pero no checkbox/radio/toggle propios.
 *  El <input> real queda oculto; .solum-check__box es el visual.
 * ════════════════════════════════════════════════════════════════════ */
.solum-check {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; font-family: var(--sans); font-size: 13.5px;
  color: var(--ink-2); user-select: none;
}
.solum-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.solum-check__box {
  width: 17px; height: 17px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--solum-r-soft);
  background: var(--bg-card);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--solum-d-fast) var(--solum-ease),
              border-color var(--solum-d-fast) var(--solum-ease);
}
.solum-check--radio .solum-check__box { border-radius: var(--solum-r-full); }
.solum-check__box::after {
  content: ''; opacity: 0;
  transition: opacity var(--solum-d-fast) var(--solum-ease);
}
.solum-check input:checked ~ .solum-check__box {
  background: var(--accent); border-color: var(--accent);
}
/* checkmark for checkbox */
.solum-check:not(.solum-check--radio) input:checked ~ .solum-check__box::after {
  opacity: 1; width: 5px; height: 9px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* dot for radio */
.solum-check--radio input:checked ~ .solum-check__box::after {
  opacity: 1; width: 7px; height: 7px; border-radius: var(--solum-r-full);
  background: #fff;
}
.solum-check input:focus-visible ~ .solum-check__box {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.solum-check input:disabled ~ .solum-check__box {
  background: var(--bg-deep); border-color: var(--line); cursor: not-allowed;
}
/* switch variant */
.solum-check--switch .solum-check__box {
  width: 34px; height: 19px; border-radius: var(--solum-r-full);
  background: var(--bg-deep); border-color: var(--bg-deep);
  position: relative; justify-content: flex-start;
}
.solum-check--switch .solum-check__box::after {
  content: ''; opacity: 1;
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: var(--solum-r-full);
  background: #fff; box-shadow: var(--solum-shadow-subtle);
  border: none; transform: none;
  transition: left var(--solum-d-base) var(--solum-ease-spring);
}
.solum-check--switch input:checked ~ .solum-check__box { background: var(--accent); border-color: var(--accent); }
.solum-check--switch input:checked ~ .solum-check__box::after { left: 17px; }


/* ════════════════════════════════════════════════════════════════════
 *  §2.13 solum-segment — segmented control (2026-05-30)
 *  Primo del view-toggle pero para contenido (no para layout).
 * ════════════════════════════════════════════════════════════════════ */
.solum-segment {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--solum-r-soft);
  padding: 3px; gap: 2px;
}
.solum-segment button {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
  background: none; border: none; border-radius: 4px;
  padding: 7px 12px; cursor: pointer;
  transition: color var(--solum-d-base) var(--solum-ease),
              background var(--solum-d-base) var(--solum-ease);
}
.solum-segment button:hover { color: var(--ink-2); }
.solum-segment button.is-active {
  background: var(--bg-deep); color: var(--ink);
}


/* ════════════════════════════════════════════════════════════════════
 *  §1.7 Dark theme — GLOBAL (2026-06-03)
 *  Toggled via [data-theme=dark] en <html> (localStorage 'solum-theme').
 *  Paleta tomada del dark de /clients (commit 423db40) + tokens extra
 *  que usa el prelude/perfil (--bg-card, --accent-deep, --line-faint).
 *  [data-theme=dark] gana en especificidad sobre los :root de cada
 *  plantilla, así que las pantallas que usan los tokens se invierten.
 * ════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{
  --bg:#1b1d1a; --bg-alt:#232622; --bg-deep:#161816; --bg-paper:#232622; --bg-card:#232622;
  --ink:#f3f4f0; --ink-2:#c1c4b3; --ink-3:#898c81;
  --line:#3a3c38; --line-soft:#2f312d; --line-faint:#2a2c28; --line-strong:#f3f4f0;
  --accent:#9bb88a; --accent-soft:#1f2a18; --accent-deep:#b8d0a8;
  --brass:#d4b46a; --brass-soft:#332a14; --forest:#9bb88a;
  --urgent:#d48a6c; --urgent-soft:#3a221b;
  --accent-tint:#1f2a18;
}
html[data-theme="dark"] .bg-elig-q.answered-yes{background:#33201a}
html[data-theme="dark"] .bg-elig-q.answered-no{background:#1f2a18}
html[data-theme="dark"] .bg-elig-q.answered-unsure{background:#2e2614}
html[data-theme="dark"] body{color-scheme:dark}
/* Dark fixes para componentes con blancos hardcodeados (modales del monolito) */
html[data-theme="dark"] .modal{background:var(--bg-paper);border-color:var(--line)}
html[data-theme="dark"] .m-inp:focus,
html[data-theme="dark"] .m-ta:focus{background:var(--bg-alt)}
html[data-theme="dark"] .card{background:var(--bg-paper)}