/* También carga los tokens en las plantillas anteriores a la Tarea 2. */

/* ===========================================================================
   Broquela — "archivo técnico". Componentes con los tokens de tokens.css.
   Nada de colores sueltos ni degradados (lo comprueba test_tokens.py).
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--petrol); }
a:hover { color: var(--petrol-600); }
.text-muted { color: var(--muted) !important; }
.sc-mono, code, kbd {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink);
  background: var(--paper); padding: 1px var(--sp-1); border-radius: var(--r-control);
}

/* Foco visible en todo lo interactivo */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc-sidebar :focus-visible { outline-color: var(--surface); }

/* Salto al contenido (primer elemento de la página) */
.sc-skip {
  position: absolute; left: var(--sp-2); top: 0; transform: translateY(-150%); z-index: 2000;
  background: var(--surface); color: var(--ink); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
}
.sc-skip:focus { top: var(--sp-2); transform: none; }

/* ---------------- Estructura ---------------- */
.sc-main { min-height: 100vh; min-width: 0; }
@media (min-width: 992px) { .sc-main { margin-left: var(--sidebar-w); } }

.sc-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--petrol); color: var(--side-text);
  display: flex; flex-direction: column; z-index: 1045;
  transform: translateX(-100%); visibility: hidden; overflow-y: auto;
}
@media (min-width: 992px) { .sc-sidebar { transform: none; visibility: visible; } }
body.sc-sidebar-open .sc-sidebar { transform: none; visibility: visible; }

.sc-brand {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 var(--sp-4) var(--sp-3); color: var(--side-text);
  text-decoration: none;
}
.sc-brand__logo { display: block; width: 100%; height: auto; }
.sc-brand:hover { color: var(--side-text); }
.sc-brand:focus-visible { outline-offset: calc(-1 * var(--sp-1)); }
.sc-brand__sub { padding-left: var(--sp-3); font-size: var(--fs-xs); font-weight: 400; color: var(--side-muted); }

.sc-modulos {
  display: flex; gap: var(--sp-1); margin: 0 var(--sp-3) var(--sp-2);
  padding: var(--sp-1); border: 1px solid var(--side-active);
  border-radius: var(--r-control);
}
.sc-modulos__link {
  flex: 1; min-width: 0; padding: var(--sp-2); border-radius: var(--r-control);
  color: var(--side-text); font-size: var(--fs-sm); text-align: center;
  text-decoration: none; overflow-wrap: anywhere;
}
.sc-modulos__link:hover, .sc-modulos__link.active {
  background: var(--side-active); color: var(--side-text);
}
.sc-modulos__link.active { font-weight: 600; }

.sc-nav { padding: 0 var(--sp-2) var(--sp-4); flex: 1; }
.sc-nav__section {
  font-size: var(--fs-xs); color: var(--side-muted); font-weight: 600;
  padding: var(--sp-4) var(--sp-3) var(--sp-1);
}
.sc-nav__link {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-control);
  color: var(--side-text); text-decoration: none; font-size: var(--fs-table);
}
.sc-nav__link .bi { font-size: 1rem; width: 1.2rem; text-align: center; opacity: .85; }
.sc-nav__link:hover { background: var(--side-active); color: var(--side-text); }
.sc-nav__link.active { background: var(--side-active); font-weight: 600; }
.sc-nav__link.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px; background: var(--side-text);
}

.sc-sidebar__foot {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--side-active);
}
.sc-sidebar__user { font-size: var(--fs-sm); line-height: 1.3; min-width: 0; }
.sc-sidebar__user strong { display: block; color: var(--side-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sidebar__user span { color: var(--side-muted); font-size: var(--fs-xs); }

.sc-topbar {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h); padding: 0 var(--sp-4);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.sc-topbar__spacer { flex: 1; }
.sc-burger {
  border: 0; background: transparent; color: var(--ink);
  font-size: 1.4rem; padding: var(--sp-1); line-height: 1;
}

/* Selector de cliente y botones de la barra */
.sc-cliente-btn, .sc-buscar-btn, .sc-iconbtn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-3); max-width: 100%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r-control); font-size: var(--fs-sm);
}
.sc-cliente-btn:hover, .sc-buscar-btn:hover, .sc-iconbtn:hover { border-color: var(--line-strong); }
.sc-cliente-btn__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.sc-buscar-btn { color: var(--muted); min-width: 200px; }
.sc-buscar-btn kbd { margin-left: auto; font-size: var(--fs-xs); }
@media (max-width: 767px) {
  .sc-buscar-btn { min-width: 0; }
  .sc-buscar-btn__texto, .sc-buscar-btn kbd { display: none; }
  .sc-cliente-btn__nombre { max-width: 12ch; }
}
.sc-iconbtn { position: relative; width: 36px; padding: 0; justify-content: center; font-size: 1.05rem; }
.sc-iconbtn__dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--surface);
}
.sc-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600;
  background: var(--petrol-50); color: var(--petrol); text-decoration: none; border: 0;
}
.sc-sidebar .sc-avatar { background: var(--side-active); color: var(--side-text); }

/* Contexto: franja del cliente activo y banda de solo consulta */
.sc-contexto, .sc-consulta {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4); font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line); min-width: 0;
}
.sc-contexto { background: var(--petrol-50); color: var(--petrol); border-left: 4px solid var(--petrol); }
.sc-contexto { white-space: nowrap; }
.sc-contexto .bi { flex: 0 0 auto; }
.sc-contexto strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-consulta { background: var(--neutral-bg); color: var(--neutral); }
.sc-modulo-aviso {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line);
  background: var(--neutral-bg); color: var(--neutral); font-size: var(--fs-sm);
}
.sc-modulo-aviso .bi { flex: 0 0 auto; }

/* Cabecera de página: migas + título + acciones */
.sc-pagehead { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.sc-pagehead__titulo { min-width: 0; flex: 1 1 320px; }
.sc-pagehead h1 { font-size: var(--fs-xl); font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.sc-pagehead__sub { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.sc-migas { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; padding: 0; margin: 0 0 var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }
.sc-migas li { min-width: 0; max-width: min(32ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-migas li + li::before { content: "/"; margin-right: var(--sp-1); color: var(--line-strong); }
.sc-migas a { color: var(--muted); text-decoration: none; }
.sc-migas a:hover { color: var(--petrol); text-decoration: underline; }

.sc-content { padding: var(--sp-5) var(--sp-4) var(--sp-6); max-width: 1440px; }

/* ---------------- Paneles ---------------- */
.sc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); min-width: 0; }
.sc-card__head {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
}
.sc-card__head h2 { font-size: var(--fs-table); font-weight: 600; margin: 0; color: var(--ink); }
.sc-card__head h2 .bi { color: var(--muted); }
.sc-card__body { padding: var(--sp-4); }
.sc-card--estrecha { max-width: 880px; }
.sc-tag {
  font-size: var(--fs-xs); color: var(--neutral); background: var(--neutral-bg);
  padding: 2px var(--sp-2); border-radius: var(--r-control); margin-left: auto; white-space: nowrap;
}

/* Cifras (KPI) y sus iconos: sin colores decorativos */
.sc-kpi { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); }
.sc-kpi__num { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-kpi__label { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.sc-chip, .sc-app-ico {
  width: 36px; height: 36px; border-radius: var(--r-control); flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1rem; font-weight: 600;
  background: var(--paper); color: var(--muted);
}
.sc-chip--indigo, .sc-chip--cyan, .sc-chip--green { background: var(--paper); color: var(--muted); }
.sc-chip--red { background: var(--danger-bg); color: var(--danger); }
.sc-chip--amber { background: var(--warn-bg); color: var(--warn); }

/* Estados: siempre con texto */
.sc-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: 999px;
  background: var(--neutral-bg); color: var(--neutral);
}
.sc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sc-pill--green { background: var(--ok-bg); color: var(--ok); }
.sc-pill--amber { background: var(--warn-bg); color: var(--warn); }
.sc-pill--red { background: var(--danger-bg); color: var(--danger); }
.sc-pill--breach { background: var(--breach-bg); color: var(--breach); }
.sc-pill--neutral { background: var(--neutral-bg); color: var(--neutral); }

/* Estados vacíos */
.sc-empty { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--muted); }
.sc-empty__icon {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--sp-3);
  display: grid; place-items: center; font-size: 1.3rem;
  background: var(--petrol-50); color: var(--petrol);
}

/* ---------------- Tablas ---------------- */
.sc-tabla-scroll { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-table { margin: 0; font-size: var(--fs-table); font-variant-numeric: tabular-nums; }
.sc-tabla-scroll > .sc-table { width: max-content; min-width: 100%; }
.sc-table > :not(caption) > * > * { background: transparent; color: var(--ink); box-shadow: none; }
.sc-table thead th {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap;
  text-transform: none; letter-spacing: normal;
  background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--sp-2) var(--sp-4);
}
.sc-table tbody td {
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line);
  height: 44px; vertical-align: middle; white-space: nowrap;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.sc-table tbody td:first-child {
  min-width: 12rem; max-width: 28ch; white-space: normal;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table tbody tr:hover td { background: var(--petrol-50); }
.sc-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-1); }
.sc-sort:hover { color: var(--petrol); }
.sc-sort__idle { color: var(--muted); font-size: .8em; }
.sc-row-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.sc-row-link:hover { color: var(--petrol); text-decoration: underline; }
.sc-acciones { white-space: nowrap; text-align: right; }

/* Filtros y chips de filtro */
.sc-filterbtn {
  height: 36px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-control); padding: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.sc-filterbtn:hover { border-color: var(--line-strong); }
.sc-chip-filter {
  font-size: var(--fs-sm); font-weight: 600; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-control);
  background: var(--neutral-bg); color: var(--neutral); text-decoration: none; white-space: nowrap;
}
.sc-chip-filter.is-green { background: var(--ok-bg); color: var(--ok); }
.sc-chip-filter.is-amber { background: var(--warn-bg); color: var(--warn); }
.sc-chip-filter.is-red { background: var(--danger-bg); color: var(--danger); }
.sc-chip-filter:hover { text-decoration: underline; text-underline-offset: 3px; }
.sc-chip-filter.active { background: var(--petrol); color: var(--surface); text-decoration: underline; text-underline-offset: 3px; }

/* Buscador de listas (visible también en móvil) */
.sc-search { position: relative; width: min(260px, 100%); }
.sc-search .bi { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--muted); }
.sc-search input {
  width: 100%; height: 36px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-control); padding: 0 var(--sp-3) 0 34px; font-size: var(--fs-sm); color: var(--ink);
}
.sc-search input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
.sc-lista-filtros { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex-wrap: wrap; min-width: 0; }
.sc-lista-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); }

/* ---------------- Controles ---------------- */
.btn { border-radius: var(--r-control); font-size: var(--fs-sm); font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--petrol); --bs-btn-border-color: var(--petrol); --bs-btn-color: var(--surface);
  --bs-btn-hover-bg: var(--petrol-600); --bs-btn-hover-border-color: var(--petrol-600);
  --bs-btn-active-bg: var(--petrol-600); --bs-btn-active-border-color: var(--petrol-600);
  --bs-btn-disabled-bg: var(--petrol); --bs-btn-disabled-border-color: var(--petrol);
}
.btn-light {
  --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line); --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: var(--paper); --bs-btn-hover-border-color: var(--line-strong);
  --bs-btn-active-bg: var(--paper);
}
.btn-danger {
  --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger);
}
.btn:focus-visible { box-shadow: none; outline: 2px solid var(--focus); outline-offset: 2px; }

.form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-1); }
.form-control, .form-select {
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  padding: 6px var(--sp-3); font-size: var(--fs-base); color: var(--ink); background-color: var(--surface);
}
.form-control:focus, .form-select:focus { border-color: var(--focus); box-shadow: none; outline: 2px solid var(--focus); outline-offset: 2px; }
.form-text { color: var(--muted); font-size: var(--fs-sm); }
.invalid-feedback { color: var(--danger); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control::file-selector-button {
  border: 0; background: var(--petrol-50); color: var(--petrol);
  border-radius: var(--r-control); padding: var(--sp-1) var(--sp-3); margin-right: var(--sp-3); font-weight: 600;
}

/* Barra de acciones fija de los formularios */
.sc-form-acciones {
  position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
  background: var(--surface); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
}

/* Menús y diálogos (únicos con sombra) */
.dropdown-menu {
  border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-overlay);
  padding: var(--sp-1); font-size: var(--fs-sm); max-width: min(360px, calc(100vw - 2 * var(--sp-4)));
}
.dropdown-item { border-radius: var(--r-control); padding: 6px var(--sp-3); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--petrol-50); color: var(--ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--petrol); color: var(--surface); }
.dropdown-toggle.no-arrow::after { display: none; }
.alert { border-radius: var(--r-panel); font-size: var(--fs-sm); }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bg); }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bg); }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }
.alert-info { background: var(--petrol-50); color: var(--petrol); border-color: var(--petrol-50); }

/* Tom Select (solo en selects largos) */
.ts-control { border: 1px solid var(--line-strong) !important; border-radius: var(--r-control) !important; box-shadow: none !important; min-height: 38px; }
.ts-wrapper.focus .ts-control { border-color: var(--focus) !important; box-shadow: none !important; outline: 2px solid var(--focus); outline-offset: 2px; }
.ts-dropdown { border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-overlay); }
.ts-dropdown .option.active { background: var(--petrol-50); color: var(--ink); }

/* Barra de progreso (asientos) */
.sc-progress { height: 6px; background: var(--neutral-bg); border-radius: 999px; overflow: hidden; max-width: 220px; margin-top: var(--sp-1); }
.sc-progress__bar { height: 100%; background: var(--petrol); }
.sc-progress-meter { appearance: none; display: block; width: min(220px, 100%); height: 6px; margin-top: var(--sp-1); border: 0; border-radius: 999px; background: var(--neutral-bg); }
.sc-progress-meter::-webkit-progress-bar { background: var(--neutral-bg); border-radius: 999px; }
.sc-progress-meter::-webkit-progress-value { background: var(--petrol); border-radius: 999px; }
.sc-progress-meter::-moz-progress-bar { background: var(--petrol); border-radius: 999px; }
.sc-progress-meter--ancho { width: 100%; }
.sc-card--hero { overflow: hidden; }
.sc-avatar--grande { width: 48px; height: 48px; }

/* Cabecera de ficha (antes "hero" con degradado): compacta y clara */
.sc-hero { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4); color: var(--ink); background: var(--surface); }
.sc-hero__avatar {
  width: 48px; height: 48px; border-radius: var(--r-panel); flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 600;
  background: var(--petrol-50); color: var(--petrol);
}
.sc-hero__name { margin: 0; font-weight: 600; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.sc-hero__meta { color: var(--muted); font-size: var(--fs-sm); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.sc-hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: 999px;
  background: var(--neutral-bg); color: var(--neutral);
}
.sc-stat { text-align: center; padding: 0 var(--sp-3); }
.sc-stat__num { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-stat__lbl { font-size: var(--fs-xs); color: var(--muted); }

/* Campana */
.sc-bell-item { display: block; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.sc-bell-item:last-child { border-bottom: 0; }
.sc-bell-item:hover { background: var(--paper); }

/* Actividad */
.sc-actividad-dia + .sc-actividad-dia { margin-top: var(--sp-5); }
.sc-actividad-dia h2 { font-size: var(--fs-md); color: var(--petrol); margin: 0 0 var(--sp-3); }
.sc-actividad-lista { list-style: none; margin: 0; padding: 0 0 0 var(--sp-3); }
.sc-actividad-evento {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--sp-3);
  border-left: 1px solid var(--line); padding: 0 0 var(--sp-4) var(--sp-4);
  position: relative; overflow-wrap: anywhere;
}
.sc-actividad-evento:last-child { padding-bottom: 0; }
.sc-actividad-evento::before {
  content: ""; position: absolute; left: -5px; top: var(--sp-2);
  width: 9px; height: 9px; border-radius: 50%; background: var(--petrol);
}
.sc-actividad-evento time, .sc-actividad-cliente, .sc-actividad-campos {
  color: var(--muted); font-size: var(--fs-sm);
}
.sc-actividad-campos { margin: var(--sp-1) 0 0; }

/* ---------------- Trazabilidad ---------------- */
.sc-autoria { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-1) 0 0; }
.sc-autoria__autor { color: var(--copper-ink); font-weight: 600; }
.sc-sello { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.sc-sello__pista { stroke: var(--line); }
.sc-sello--ok .sc-sello__arco { stroke: var(--ok); }
.sc-sello--warn .sc-sello__arco { stroke: var(--warn); }
.sc-sello--danger .sc-sello__arco { stroke: var(--danger); }
.sc-sello--breach .sc-sello__arco { stroke: var(--breach); }
.sc-sello--neutral .sc-sello__arco { stroke: var(--neutral); }
.sc-sello--firmado .sc-sello__arco { stroke: var(--copper); }
.sc-sello__texto { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .sc-sello__arco { transition: stroke-dashoffset .4s ease; } }

.sc-historial { list-style: none; margin: 0; padding: 0; }
.sc-historial__item { position: relative; padding: 0 0 var(--sp-4) var(--sp-5); border-left: 1px solid var(--line); margin-left: var(--sp-2); }
.sc-historial__item:last-child { border-left-color: transparent; }
.sc-historial__marca {
  position: absolute; left: -9px; top: 0; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted);
}
.sc-historial__cab { font-size: var(--fs-sm); color: var(--muted); }
.sc-historial__cambio { font-size: var(--fs-sm); margin: 2px 0 0; overflow-wrap: anywhere; }
.sc-historial__antes { color: var(--muted); text-decoration: line-through; }
details.sc-plegable > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-table); list-style: none; }
details.sc-plegable > summary::-webkit-details-marker { display: none; }
details.sc-plegable > summary::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--muted); }
details.sc-plegable[open] > summary::before { content: "▾"; }

/* ---------------- Búsqueda global ---------------- */
dialog.sc-buscador {
  width: min(640px, calc(100vw - 2 * var(--sp-4))); max-height: 70vh; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-overlay);
  margin-top: 12vh; background: var(--surface); color: var(--ink);
}
dialog.sc-buscador::backdrop { background: var(--backdrop-dialog); }
.sc-buscador__entrada:focus-visible { outline-offset: -3px; }
.sc-buscador__entrada { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: var(--sp-4); font-size: var(--fs-md); background: var(--surface); color: var(--ink); }
.sc-buscador__resultados { overflow-y: auto; max-height: calc(70vh - 64px); padding: var(--sp-2); }
.sc-buscador__grupo { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: var(--sp-2) var(--sp-2) var(--sp-1); }
.sc-buscador__item { display: flex; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-control); color: var(--ink); text-decoration: none; }
.sc-buscador__item:hover, .sc-buscador__item:focus { background: var(--petrol-50); color: var(--ink); }
.sc-buscador__item > span { min-width: 0; overflow-wrap: anywhere; }
.sc-buscador__cliente { max-width: 40%; overflow: hidden; text-overflow: ellipsis; margin-left: auto; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }

/* ---------------- Login ---------------- */
.sc-login { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--paper); }
@media (min-width: 900px) { .sc-login { grid-template-columns: 5fr 7fr; } }
.sc-login__marca {
  display: none; background: var(--petrol); color: var(--side-text);
  padding: var(--sp-6); flex-direction: column; justify-content: space-between;
}
@media (min-width: 900px) { .sc-login__marca { display: flex; } }
.sc-login__marca img { width: 120px; height: auto; }
.sc-login__lema { font-size: var(--fs-xl); font-weight: 600; max-width: 18ch; line-height: 1.25; }
.sc-login__panel { display: grid; place-items: center; padding: var(--sp-5) var(--sp-4); }
.sc-login__form { width: 100%; max-width: 380px; }

/* Móvil: telón del menú lateral */
.sc-backdrop { position: fixed; inset: 0; background: var(--backdrop-sidebar); z-index: 1040; opacity: 0; visibility: hidden; }
body.sc-sidebar-open .sc-backdrop { opacity: 1; visibility: visible; }
@media (min-width: 992px) { .sc-backdrop { display: none; } }

/* Compatibilidad: clases existentes y contenido largo, sin cambiar las plantillas. */
.sc-topbar > .dropdown, .sc-topbar__title { min-width: 0; }
.sc-topbar__title h1 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.sc-topbar__title p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.sc-topbar__title h1, .sc-topbar__title p {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-topbar > .dropdown > .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-topbar__spacer { min-width: 0; }
.sc-cliente-btn { min-width: 0; }
.sc-burger, .sc-iconbtn, .sc-buscar-btn { flex-shrink: 0; }
.sc-nav__badge {
  margin-left: auto; padding: 0 var(--sp-2); border-radius: var(--r-control);
  background: var(--side-active); color: var(--side-text); font-size: var(--fs-xs);
}
.sc-nav__link.disabled { color: var(--side-muted); cursor: default; pointer-events: none; }
.sc-kpi__delta { font-size: var(--fs-xs); margin-top: var(--sp-2); font-weight: 600; }
.sc-kpi__delta.up { color: var(--ok); }
.sc-kpi__delta.down { color: var(--danger); }
.sc-kpi__delta.flat { color: var(--muted); }
.sc-hero > div, .sc-kpi > div, .sc-card__head > div { min-width: 0; max-width: 100%; }
.sc-card__body, .sc-hero__meta, .sc-autoria, .sc-historial__cab, .sc-bell-item {
  overflow-wrap: anywhere;
}
.sc-table { --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
.sc-table :focus-visible { outline-offset: -2px; }
.sc-pill { max-width: 100%; white-space: normal; }
.sc-pill::before { flex: 0 0 auto; }
.sc-chip-filter { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.sc-filterbtn { max-width: 100%; height: auto; min-height: 36px; text-align: left; overflow-wrap: anywhere; }
.sc-filterbtn::after { flex-shrink: 0; }
.dropdown-item-text { color: var(--muted); overflow-wrap: anywhere; }
.dropdown-menu.shadow { box-shadow: var(--shadow-overlay) !important; }
.ts-control, .ts-control input, .ts-dropdown { font-family: var(--font); font-size: var(--fs-base); background: var(--surface); color: var(--ink); }
.ts-dropdown .option { padding: var(--sp-2) var(--sp-3); overflow-wrap: anywhere; }
.ts-dropdown .option.selected { color: var(--petrol); font-weight: 600; }
.ts-dropdown .no-results, .form-control::placeholder, .sc-search input::placeholder,
.sc-buscador__entrada::placeholder { color: var(--muted); opacity: 1; }

/* Bootstrap: estados de controles con la misma paleta y foco sin sombra. */
.btn { transition: none; --bs-btn-box-shadow: none; --bs-btn-focus-box-shadow: none; }
.btn-primary, .btn-danger {
  --bs-btn-color: var(--surface); --bs-btn-hover-color: var(--surface);
  --bs-btn-active-color: var(--surface); --bs-btn-disabled-color: var(--surface);
}
.btn-light {
  --bs-btn-hover-color: var(--ink); --bs-btn-active-color: var(--ink);
  --bs-btn-active-border-color: var(--line-strong);
  --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-bg: var(--paper);
  --bs-btn-disabled-border-color: var(--line);
}
.btn-danger {
  --bs-btn-active-bg: var(--danger); --bs-btn-active-border-color: var(--danger);
  --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger);
}
.form-control, .form-select, .form-check-input { transition: none; }
.form-check-input { border-color: var(--line-strong); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--petrol); border-color: var(--petrol); }
.form-check-input:focus, .btn-close:focus,
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  box-shadow: none; outline: 2px solid var(--focus); outline-offset: 2px;
}
.text-primary { color: var(--petrol) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }
@media (max-width: 575px) {
  .sc-topbar { gap: var(--sp-2); padding-inline: var(--sp-3); }
  .sc-topbar__title { flex: 1 1 0; }
}

/* Estructura accesible: el menú móvil cerrado tampoco recibe foco. */
.sc-sidebar__cerrar {
  margin: 0 var(--sp-3) var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--side-muted); border-radius: var(--r-control);
  background: var(--petrol); color: var(--side-text); font-size: var(--fs-sm);
}
.sc-cliente-selector { min-width: 0; }
.sc-cliente-btn { width: 100%; }
.sc-cliente-btn > .bi, .sc-cliente-btn::after { flex: 0 0 auto; }
.sc-cliente-btn__nombre { min-width: 0; }
.sc-topbar > :not(.sc-cliente-selector):not(.sc-topbar__spacer) { flex-shrink: 0; }
.sc-topbar__spacer { min-width: 0; }
.sc-truncar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-pagehead h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-migas li { padding: var(--sp-1); }
.sc-buscador__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
}
.sc-buscador__cabecera h2 { margin: 0; font-size: var(--fs-md); }
.sc-login-provisional { min-height: 100vh; background: var(--petrol); }
.sc-login-provisional__card { width: 100%; max-width: 400px; }
@media (max-width: 991.98px) {
  .sc-sidebar { visibility: hidden; }
  body.sc-sidebar-open { overflow: hidden; }
  body.sc-sidebar-open .sc-sidebar { visibility: visible; }
}
@media (max-width: 575.98px) {
  .sc-topbar { gap: var(--sp-2); padding-inline: var(--sp-2); }
  .sc-cliente-selector { flex: 1 1 auto; }
  .sc-cliente-btn { padding-inline: var(--sp-2); }
  .sc-topbar__spacer { display: none; }
}

/* Pantallas de licencias */
.sc-atencion { list-style: none; padding: 0; margin: 0; }
.sc-atencion li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.sc-atencion li:last-child { border-bottom: 0; }
.sc-atencion li > div { min-width: 0; overflow-wrap: anywhere; }
.sc-atencion__meta { display: block; margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); }
.sc-resumen { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.sc-resumen > * { display: grid; gap: var(--sp-1); color: var(--ink); text-decoration: none; min-width: 100px; }
.sc-resumen strong, .sc-totales strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.sc-resumen span, .sc-totales span { color: var(--muted); font-size: var(--fs-sm); }
.sc-totales { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.sc-totales > div { display: grid; }
.sc-horizontes { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.sc-horizontes a, .sc-ficha-nav a { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-control); color: var(--petrol); text-decoration: none; }
.sc-horizontes a[aria-current="page"] { background: var(--petrol); color: var(--surface); border-color: var(--petrol); }
.sc-ficha-cab { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4); }
.sc-ficha-cab__datos { flex: 1 1 240px; min-width: 0; display: grid; justify-items: start; gap: var(--sp-2); }
.sc-ficha-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.sc-ficha-relaciones { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sc-ficha-relaciones a { color: var(--petrol); }
.sc-form-seccion { min-width: 0; border: 0; border-top: 1px solid var(--line); padding: var(--sp-4) 0; margin: 0; }
.sc-form-seccion:first-of-type { border-top: 0; padding-top: 0; }
.sc-form-seccion legend { float: none; width: auto; font-size: var(--fs-md); font-weight: 600; padding: 0; margin-bottom: var(--sp-3); }
.sc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 575px) { .sc-form-grid { grid-template-columns: 1fr; } }

/* RGPD: registros y cronología */
.sc-rgpd-conteos { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--sp-3); }
.sc-rgpd-conteos > div { display: grid; gap: var(--sp-1); }
.sc-rgpd-conteos strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.sc-rgpd-conteos span, .sc-rgpd-meta, .sc-rgpd-ayuda { color: var(--muted); font-size: var(--fs-sm); }
.sc-rgpd-lista { list-style: none; padding: 0; margin: 0; }
.sc-rgpd-lista > li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.sc-rgpd-lista > li:last-child { border-bottom: 0; }
.sc-rgpd-lista > li > span { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.sc-rgpd-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.sc-rgpd-estado { font-weight: 600; }
.sc-rgpd-pendiente { padding: var(--sp-3); margin: var(--sp-3) 0 0; color: var(--warn); background: var(--warn-bg); border-radius: var(--r-control); }
.sc-rgpd-evidencia { display: grid; gap: var(--sp-1); min-width: 0; }
.sc-rgpd-hash { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); }
.sc-rgpd-hash input { min-width: 0; width: min(38ch, 100%); font: var(--fs-sm) var(--mono); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); padding: var(--sp-1); }
.sc-rgpd-evidencia-form { display: flex; align-items: end; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3) 0; }
.sc-rgpd-evidencia-form label { min-width: 0; flex: 1 1 150px; }
.sc-rgpd-supresion { color: var(--danger); font-size: var(--fs-sm); }
.sc-rgpd-cronologia { list-style: none; padding: 0; margin: 0; }
.sc-rgpd-cronologia > li { border-left: 2px solid var(--line-strong); padding: 0 0 var(--sp-4) var(--sp-4); margin-left: var(--sp-2); overflow-wrap: anywhere; }
.sc-rgpd-cronologia > li:last-child { padding-bottom: 0; }
.sc-rgpd-cronologia p { margin: var(--sp-2) 0 0; }
@media (max-width: 767px) { .sc-rgpd-columnas { grid-template-columns: 1fr; } }
/* Ayuda contextual */
.sc-pagehead__ayuda { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.sc-form-campo { position: relative; min-width: 0; }
.sc-form-campo .form-label { padding-right: 44px; }
.sc-form-campo > .sc-ayuda { position: absolute; top: 0; right: 0; }
.sc-ayuda { display: inline-flex; position: relative; vertical-align: middle; }
.sc-ayuda__boton {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px;
  border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--petrol); font: inherit; cursor: pointer;
}
.sc-ayuda__boton:hover { background: var(--petrol-50); }
.sc-ayuda__boton:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc-ayuda__panel {
  position: absolute; z-index: 20; top: 100%; left: 0;
  width: min(320px, calc(100vw - 40px)); padding: var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay);
  font-size: var(--fs-sm); line-height: 1.5;
}
.sc-ayuda__panel[hidden] { display: none; }
.sc-ayuda__titulo, .sc-ayuda__texto, .sc-ayuda__relaciones { display: block; margin-bottom: var(--sp-2); }
.sc-ayuda__panel a { color: var(--petrol); }
.sc-ayuda__panel a:focus-visible { outline: 2px solid var(--focus); }
.sc-guia-diagrama { display: block; width: 100%; height: auto; max-width: 360px; }
.sc-guia-cadenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-4); margin-block: var(--sp-3); }
.sc-guia-cadena { margin: 0; }
.sc-guia-cadena figcaption { font-weight: 600; margin-bottom: var(--sp-2); }
.sc-guia-diagrama rect { fill: var(--petrol-50); stroke: var(--petrol); }
.sc-guia-diagrama line, .sc-guia-diagrama path { stroke: var(--petrol); fill: none; }
.sc-guia-diagrama text { fill: var(--ink); font: var(--fs-sm) var(--font); }