/* ============================================================================
   SENTINEL CYBERARK — sistema de diseño
   Portado 1:1 desde el mockup entregado (paleta IBM Plex, tema oscuro/claro).
   Estética minimalista; radios deliberadamente sobrios ("no tan redondeados").
   ============================================================================ */

:root {
  /* Superficies (tema oscuro por defecto) */
  --bg: #121116;
  --panel: #161519;
  --card: #1a191f;
  --inset: #0f0e12;
  --bd: rgba(255, 255, 255, 0.09);
  --hair: rgba(255, 255, 255, 0.055);

  /* Texto */
  --tx: #edecf2;
  --tb: #e7e6ec;
  --t1: #dcdbe3;
  --t2: #cdccd4;
  --t3: #b9b8c2;
  --t4: #9a99a6;
  --t5: #6a6973;
  --t6: #56555f;

  /* Acento e identidad (independiente del tema) */
  --acc: #8a84c3;
  --acc-deep: #3c3489;
  --acc-ink: #1b1830;
  --acc-soft: rgba(138, 132, 195, 0.13);

  /* Estados / criticidad */
  --crit: #e5484d;
  --high: #f0883e;
  --med: #e2b545;
  --ok: #46a758;
  --crit-soft: rgba(229, 72, 77, 0.08);
  --crit-bd: rgba(229, 72, 77, 0.35);

  /* Radios sobrios */
  --r-card: 8px;
  --r-ctl: 6px;
  --r-pill: 6px;
  --r-xs: 4px;

  /* Tipografías */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* El navegador dibuja los desplegables nativos de los <select> con los colores del
     sistema. Declarar el esquema los hace salir oscuros en vez de blancos. */
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #edecf2;
  --panel: #ffffff;
  --card: #ffffff;
  --inset: #f2f1f7;
  --bd: rgba(26, 23, 40, 0.12);
  --hair: rgba(26, 23, 40, 0.07);

  --tx: #201d29;
  --tb: #2c2937;
  --t1: #36333f;
  --t2: #47444f;
  --t3: #56535e;
  --t4: #6e6b77;
  --t5: #8a8893;
  --t6: #a8a6b0;

  --acc-soft: rgba(60, 52, 137, 0.10);
  --crit-soft: rgba(229, 72, 77, 0.07);

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--tb);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }
input::placeholder, textarea::placeholder { color: var(--t6); }

.sc-mono { font-family: var(--mono); }

/* ----------------------------------------------------------------------------
   Estructura: barra lateral + área principal
   ---------------------------------------------------------------------------- */
.sc-app {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--tb);
}

.sc-sidebar {
  width: 236px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
}

.sc-brand {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px;
  border-bottom: 1px solid var(--bd);
  flex: none;
}
.sc-brand-logo {
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  background: var(--acc-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.sc-brand-logo > i {
  width: 9px;
  height: 9px;
  background: var(--acc);
  transform: rotate(45deg);
  display: block;
}
.sc-brand-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tx);
}
.sc-brand-text span { color: var(--acc); font-weight: 500; }

.sc-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 9px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.sc-nav-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx);
  padding: 2px 13px 8px;
  text-align: left;
  transition: color .12s;
}
.sc-nav-label:hover { color: var(--acc); }
.sc-nav-chevron {
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease;
  transform: rotate(0deg);
}
.sc-nav-label.colapsado .sc-nav-chevron { transform: rotate(-90deg); }
.sc-nav-group-items { display: flex; flex-direction: column; gap: 1px; }

.sc-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  font-size: 13px;
  color: var(--t4);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sc-nav-item:hover { color: var(--t2); background: var(--hair); }
.sc-nav-item.active {
  background: var(--acc-soft);
  border-left-color: var(--acc);
  color: var(--tx);
  font-weight: 500;
}
.sc-nav-item.disabled { color: var(--t6); cursor: default; pointer-events: none; }

/* Home vive fuera de los grupos pero se lee como uno: misma tipografía y tamaño que
   los títulos de grupo (Inventario, Seguridad…), sin marco ni fondo. */
.sc-nav-item.sc-nav-home {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx);
  padding: 2px 13px 8px;
  border-left: 0;
  border-radius: 0;
}
.sc-nav-item.sc-nav-home:hover { color: var(--acc); background: transparent; }
.sc-nav-item.sc-nav-home.active { color: var(--acc); background: transparent; }

.sc-sidebar-foot {
  padding: 13px 20px;
  border-top: 1px solid var(--bd);
  font-size: 11px;
  color: var(--t6);
  flex: none;
}

.sc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ----------------------------------------------------------------------------
   Barra superior
   ---------------------------------------------------------------------------- */
.sc-topbar {
  height: 56px;
  flex: none;
  border-bottom: 1px solid var(--bd);
  background: var(--panel);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}
.sc-search {
  width: 380px;
  max-width: 42vw;
  height: 34px;
  background: var(--inset);
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  padding: 0 13px;
  color: var(--tb);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.sc-search:focus { border-color: var(--acc); }
.sc-spacer { flex: 1; }

/* Buscador global del topbar */
.sc-search-wrap { position: relative; }
.sc-search-wrap .sc-search { width: 380px; max-width: 42vw; }
.sc-search-drop { min-width: 380px; max-height: 320px; z-index: 1300; }
.sc-search-opt { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.sc-search-mod {
  flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--acc); border: 1px solid var(--bd); border-radius: var(--r-pill);
  padding: 1px 7px; min-width: 78px; text-align: center;
}
.sc-search-tit { color: var(--t1); font-weight: 500; }
.sc-search-det { color: var(--t5); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.sc-pill-link { cursor: pointer; }
.sc-pill-link:hover { filter: brightness(1.12); }

/* Selector de organización: desplegable propio, no un <select> nativo —el navegador
   dibuja la lista nativa con los colores del sistema y se veía blanca en tema oscuro. */
.sc-empresa-wrap { position: relative; }
/* Deliberadamente más grande que el resto de los controles de la barra: es el
   interruptor que define sobre qué organización opera todo el sistema. */
.sc-empresa-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  min-width: 230px;
  padding: 0 15px;
  background: var(--inset);
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  color: var(--tb);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.sc-empresa-pick:hover { border-color: var(--t5); }
.sc-empresa-pick:focus-visible,
.sc-empresa-pick.abierto { border-color: var(--acc); }
.sc-empresa-ico { font-size: 13px; opacity: .75; }
/* Punto con el color de la organización activa, para identificarla de un vistazo */
.sc-empresa-punto {
  width: 13px; height: 13px; border-radius: 4px; flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.sc-empresa-nombre {
  flex: 1; text-align: left;
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-empresa-flecha { font-size: 12px; color: var(--t5); flex: none; }
.sc-empresa-drop {
  left: auto; right: 0; min-width: 100%; width: max-content; z-index: 1300; margin-top: 5px;
}
.sc-empresa-opt { white-space: nowrap; font-size: 14px; padding: 10px 13px; }
.sc-empresa-opt.activa { color: var(--tx); background: var(--acc-soft); }

.sc-alert-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--crit-bd);
  background: var(--crit-soft);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: #d6494e;
}
.sc-alert-pill.muted {
  border-color: var(--bd);
  background: transparent;
  color: var(--t5);
}

.sc-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--bd);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t3);
  font-size: 15px;
  font-family: inherit;
}
.sc-icon-btn:hover { color: var(--tx); border-color: var(--acc); }

.sc-vdiv { width: 1px; height: 24px; background: var(--bd); }

.sc-user { display: flex; align-items: center; gap: 10px; }
.sc-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-ctl);
  background: var(--acc-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #cfcbe8;
  flex: none;
}
.sc-user-meta { line-height: 1.25; }
.sc-user-name { font-size: 12.5px; color: var(--tb); }
.sc-user-mail { font-size: 11px; color: var(--t5); }
.sc-logout {
  background: transparent;
  border: 1px solid var(--bd);
  color: var(--t4);
  border-radius: var(--r-ctl);
  height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.sc-logout:hover { color: var(--crit); border-color: var(--crit-bd); }

/* ----------------------------------------------------------------------------
   Contenido y cabecera de página
   ---------------------------------------------------------------------------- */
.sc-content { flex: 1; overflow-y: auto; padding: 24px 28px; }

.sc-page-head { margin-bottom: 22px; }
.sc-page-title { font-size: 19px; font-weight: 600; color: var(--tx); margin: 0; }
.sc-page-sub { font-size: 13px; color: var(--t5); margin-top: 3px; }

/* ----------------------------------------------------------------------------
   Tarjetas, rejillas, controles
   ---------------------------------------------------------------------------- */
.sc-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: 18px;
}
.sc-card.pad20 { padding: 20px; }
.sc-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.sc-card-title { font-size: 14px; font-weight: 600; color: var(--tb); }
.sc-card-aside { font-size: 12px; color: var(--t5); }

.sc-grid { display: grid; gap: 16px; }
.sc-grid-5 { grid-template-columns: repeat(5, 1fr); }
.sc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sc-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .sc-grid-5, .sc-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .sc-grid-5, .sc-grid-4, .sc-grid-3, .sc-grid-2 { grid-template-columns: 1fr; } }

.sc-stat-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--t4);
}
.sc-stat-value {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 500;
  color: var(--tx);
  margin-top: 11px;
  line-height: 1;
}
.sc-stat-foot { font-size: 12px; color: var(--t5); margin-top: 10px; }

.sc-label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t5);
  margin-bottom: 7px;
  display: block;
}
.sc-input, .sc-select {
  width: 100%;
  height: 38px;
  background: var(--inset);
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  padding: 0 11px;
  color: var(--tx);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.sc-input:focus, .sc-select:focus { border-color: var(--acc); }
.sc-select { appearance: none; -webkit-appearance: none; cursor: pointer; }

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-ctl);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .12s;
}
.sc-btn-primary { background: var(--acc); color: var(--acc-ink); }
.sc-btn-primary:hover { filter: brightness(1.07); }
.sc-btn-ghost { background: transparent; border-color: var(--bd); color: var(--t2); }
.sc-btn-ghost:hover { border-color: var(--acc); color: var(--tx); }
.sc-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Indicadores de estado */
.sc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.sc-dot.crit { background: var(--crit); }
.sc-dot.high { background: var(--high); }
.sc-dot.med { background: var(--med); }
.sc-dot.ok { background: var(--ok); }
.sc-dot.off { background: var(--t5); }
.sc-dot.acc { background: var(--acc); }

.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  border: 1px solid var(--bd);
  color: var(--t3);
  background: var(--inset);
}

/* Tablas tipo rejilla */
.sc-table { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r-card); overflow: hidden; }
.sc-table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--bd);
}
.sc-thead, .sc-trow { display: grid; gap: 8px; align-items: center; }
.sc-thead {
  padding: 10px 16px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t6);
  border-bottom: 1px solid var(--bd);
}
.sc-trow {
  padding: 11px 16px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--hair);
}
.sc-trow:last-child { border-bottom: none; }
.sc-trow:hover { background: var(--hair); }

.sc-empty { padding: 40px; text-align: center; color: var(--t5); font-size: 13px; }

/* Filtros (chips de criticidad / casillas) */
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-ctl);
  font-size: 12.5px;
  border: 1px solid var(--bd);
  color: var(--t3);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.sc-chip.active { color: var(--tx); border-color: var(--acc); background: var(--acc-soft); }

/* ----------------------------------------------------------------------------
   Construcción / vacío de módulo
   ---------------------------------------------------------------------------- */
.sc-stub {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.sc-stub-badge {
  width: 46px; height: 46px;
  border-radius: var(--r-card);
  background: var(--acc-soft);
  border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  color: var(--acc); font-size: 20px;
}
.sc-stub-title { font-size: 15px; font-weight: 600; color: var(--t1); }
.sc-stub-text { font-size: 13px; color: var(--t5); max-width: 460px; line-height: 1.55; }
.sc-stub-tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t4);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

/* ----------------------------------------------------------------------------
   Pantalla de acceso (login)
   ---------------------------------------------------------------------------- */
.sc-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(60, 52, 137, 0.18), transparent 60%),
    var(--bg);
}
.sc-auth-card {
  width: 380px;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: 30px 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.sc-auth-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
}
.sc-auth-title { font-size: 16px; font-weight: 600; color: var(--tx); }
.sc-auth-sub { font-size: 12.5px; color: var(--t5); margin: 2px 0 22px; }
.sc-field { margin-bottom: 15px; }
.sc-auth-error {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--crit-bd);
  background: var(--crit-soft);
  border-radius: var(--r-ctl);
  font-size: 12.5px;
  color: #d6494e;
  margin-bottom: 16px;
}
.sc-auth-foot { margin-top: 18px; font-size: 11px; color: var(--t6); text-align: center; }

.sc-spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--bd);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: sc-spin .8s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------------
   UI de error de Blazor (reconexión / circuito)
   ---------------------------------------------------------------------------- */
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--crit-soft);
  border-top: 1px solid var(--crit-bd);
  color: #d6494e;
  font-size: 13px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}
#blazor-error-ui .reload { color: var(--acc); margin-left: 10px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 12px; }

/* ----------------------------------------------------------------------------
   CMDB · inventario (filtros + tabla + detalle)
   ---------------------------------------------------------------------------- */
.sc-cmdb { display: flex; gap: 16px; align-items: flex-start; }
@media (max-width: 1200px) { .sc-cmdb { flex-wrap: wrap; } }

.sc-filters { width: 208px; flex: none; }
.sc-filter-group { margin-bottom: 17px; }
.sc-filter-group:last-child { margin-bottom: 0; }
.sc-filter-title {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t6); margin-bottom: 9px;
}
.sc-filter-item {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0; font-size: 12.5px; color: var(--t3);
  cursor: pointer; background: none; border: none; width: 100%; text-align: left;
  font-family: inherit;
}
.sc-filter-item:hover { color: var(--t1); }
.sc-check {
  width: 15px; height: 15px; border-radius: var(--r-xs); flex: none;
  border: 1.5px solid var(--t6);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--acc-ink);
}
.sc-filter-item.on .sc-check { border-color: var(--acc); background: var(--acc); }
.sc-filter-item.on { color: var(--tx); }

.sc-cmdb-table { flex: 1; min-width: 0; }
.sc-detail { width: 300px; flex: none; }
.sc-detail-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 12px; }
.sc-detail-kv .k { color: var(--t5); }
.sc-detail-kv .v { color: var(--t2); text-align: right; }
.sc-detail-sec {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t6); margin: 18px 0 9px; border-top: 1px solid var(--bd); padding-top: 16px;
}

/* ----------------------------------------------------------------------------
   Modal de formulario
   ---------------------------------------------------------------------------- */
.sc-modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 9, 15, 0.62);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sc-modal {
  width: 720px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--r-card); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.sc-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--bd);
}
.sc-modal-title { font-size: 16px; font-weight: 600; color: var(--tx); }
.sc-modal-sub { font-size: 12.5px; color: var(--t5); margin-top: 3px; }
.sc-modal-body { padding: 20px 24px; }
.sc-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--bd);
}
.sc-x {
  width: 30px; height: 30px; border-radius: var(--r-ctl);
  border: 1px solid var(--bd); background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--t4); font-size: 15px;
}
.sc-x:hover { color: var(--tx); }

.sc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.sc-field-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .sc-form-grid { grid-template-columns: 1fr; } }
.sc-textarea {
  width: 100%; min-height: 80px; resize: vertical;
  background: var(--inset); border: 1px solid var(--bd); border-radius: var(--r-ctl);
  padding: 10px 11px; color: var(--tx); font-size: 13px; font-family: inherit; outline: none;
}
.sc-textarea:focus { border-color: var(--acc); }
.sc-form-error {
  border: 1px solid var(--crit-bd); background: var(--crit-soft);
  border-radius: var(--r-ctl); padding: 10px 12px; margin-bottom: 16px;
  font-size: 12.5px; color: #d6494e;
}
.sc-form-error ul { margin: 6px 0 0; padding-left: 18px; }

/* ----------------------------------------------------------------------------
   Barra de filtros y acciones de grilla (módulos rediseñados)
   ---------------------------------------------------------------------------- */
.sc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.sc-toolbar .sc-tool { display: flex; flex-direction: column; gap: 6px; }
.sc-toolbar .sc-tool .sc-label { margin-bottom: 0; }
.sc-toolbar .sc-tool .sc-select,
.sc-toolbar .sc-tool .sc-input { height: 36px; }
.sc-toolbar .sc-tool-search { flex: 1 1 240px; min-width: 200px; }

.sc-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sc-iconbtn {
  width: 30px; height: 30px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: inherit;
}
.sc-iconbtn:hover { border-color: var(--acc); color: var(--tx); }
.sc-iconbtn.crit:hover { border-color: var(--crit-bd); color: var(--crit); }
a.sc-iconbtn { text-decoration: none; }

/* Chips seleccionables (p. ej. asignación de perfiles) */
.sc-chip.on { border-color: var(--acc); color: var(--tx); background: var(--acc-soft); }

/* Tablero de actividades de proyecto (estilo Jira) */
.sc-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .sc-board { grid-template-columns: 1fr; } }
.sc-board-col {
  background: var(--inset);
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  padding: 8px;
  min-height: 60px;
}
.sc-board-col-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t5);
  margin-bottom: 8px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--hair);
}
.sc-board-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  padding: 8px 9px;
  margin-bottom: 7px;
}
.sc-board-card:last-child { margin-bottom: 0; }
.sc-board-card-actions { display: flex; gap: 5px; margin-top: 7px; }
.sc-board-card-actions .sc-iconbtn { width: 26px; height: 26px; font-size: 12px; }

/* Control segmentado (Lista / Gantt) */
.sc-seg { display: inline-flex; border: 1px solid var(--bd); border-radius: var(--r-ctl); overflow: hidden; }
.sc-seg-btn {
  border: 0; background: transparent; color: var(--t4);
  font-size: 12.5px; padding: 7px 14px; cursor: pointer;
}
.sc-seg-btn + .sc-seg-btn { border-left: 1px solid var(--bd); }
.sc-seg-btn:hover { color: var(--tx); }
.sc-seg-btn.on { background: var(--acc-soft); color: var(--tx); }

/* Pestañas dentro del modal de proyecto */
.sc-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--bd); }
.sc-tab {
  border: 0; background: transparent; color: var(--t4); cursor: pointer;
  font-size: 13px; padding: 12px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sc-tab:hover { color: var(--tx); }
.sc-tab.on { color: var(--tx); border-bottom-color: var(--acc); }
.sc-tab-badge {
  display: inline-block; min-width: 18px; text-align: center; font-size: 10.5px;
  background: var(--inset); color: var(--t4); border-radius: var(--r-pill); padding: 1px 6px; margin-left: 4px;
}

/* Contador por tipo de recurso en la lista de contratos/proyectos.
   Se pincha para abrir el popup en esa misma pestaña. */
.sc-contador-rec {
  min-width: 30px; padding: 2px 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--bd); border-radius: var(--r-pill);
  color: var(--t3); font-size: 12px; font-weight: 600; font-family: inherit;
  transition: background 0.12s ease, transform 0.12s ease;
}
.sc-contador-rec:hover { background: var(--inset); transform: translateY(-1px); }
.sc-contador-rec.cero { color: var(--t5); font-weight: 400; border-color: transparent; }
.sc-contador-rec.cero:hover { border-color: var(--bd); }

/* Mantención dentro de una celda del calendario. Se pincha para registrar su ejecución. */
.sc-cal-chip {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--inset); border: 0; border-left: 3px solid var(--t5);
  border-radius: 3px; padding: 3px 5px; font-family: inherit;
  font-size: 10.5px; line-height: 1.3; color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.sc-cal-chip:hover { background: var(--hair); color: var(--tx); }

/* Chip de tipo de tarea (issue type estilo Jira) */
.sc-tipo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; font-size: 10px; flex: none;
  background: var(--inset); color: var(--t3);
}
.sc-tipo-chip.t-tarea { background: rgba(60, 120, 216, 0.16); color: #4f90e6; }
.sc-tipo-chip.t-bug { background: rgba(224, 64, 64, 0.16); color: var(--crit); }
.sc-tipo-chip.t-mejora { background: rgba(58, 168, 100, 0.16); color: var(--ok); }
.sc-tipo-chip.t-historia { background: rgba(138, 132, 195, 0.18); color: var(--acc); }

/* Estados del tablero al arrastrar */
.sc-board-col.drag-over { outline: 2px dashed var(--acc); outline-offset: -2px; }
.sc-board-card.vencida { border-color: var(--crit-bd, var(--crit)); }

.crit-text { color: var(--crit); }
.crit-text:hover { border-color: var(--crit); color: var(--crit); }

/* ----------------------------------------------------------------------------
   Carta Gantt (portafolio y tareas)
   ---------------------------------------------------------------------------- */
.sc-gantt { padding: 14px 18px 18px; overflow-x: auto; }
.sc-gantt-axis { display: grid; align-items: end; margin-bottom: 6px; }
.sc-gantt-axis-track { position: relative; height: 16px; }
.sc-gantt-tick {
  position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--t5);
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.sc-gantt-row {
  display: grid; align-items: center; gap: 0; padding: 4px 0; border-top: 1px solid var(--bd);
}
.sc-gantt-row:hover { background: var(--acc-soft); }
.sc-gantt-label { padding-right: 12px; font-size: 12px; min-width: 0; }
.sc-gantt-track {
  position: relative; height: 24px; background: var(--inset);
  border-radius: var(--r-ctl); overflow: hidden;
}
.sc-gantt-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bd); opacity: 0.6; }
.sc-gantt-bar {
  position: absolute; top: 4px; height: 16px; border-radius: 5px; min-width: 6px;
  display: flex; align-items: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.sc-gantt-bar.alerta { box-shadow: inset 0 0 0 1px var(--crit); }
.sc-gantt-bar-txt {
  font-size: 9.5px; color: #fff; padding: 0 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; opacity: 0.9;
}

/* ----------------------------------------------------------------------------
   Selector múltiple con autocomplete (ActivoPicker)
   ---------------------------------------------------------------------------- */
.sc-ro { padding: 7px 0; font-size: 13px; color: var(--t2); min-height: 20px; }

/* Encabezado de sección colapsable (barra clickeable con chevron que rota) */
.sc-collapse-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 1px solid var(--bd); background: var(--inset); border-radius: var(--r-ctl);
  padding: 10px 14px; cursor: pointer; font-family: inherit; font-size: 13px;
  font-weight: 600; color: var(--t2); text-align: left; transition: background .12s, color .12s;
}
.sc-collapse-head:hover { background: var(--hair); color: var(--tx); }
.sc-collapse-chevron {
  font-size: 20px; line-height: 1; color: var(--t4);
  transition: transform .18s ease, color .12s; transform: rotate(-90deg);
}
.sc-collapse-chevron.on { transform: rotate(0deg); color: var(--acc); }

.sc-picker { position: relative; }
.sc-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.sc-picker-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--acc-soft); color: var(--tx); border: 1px solid var(--bd);
  border-radius: var(--r-pill); padding: 3px 6px 3px 10px; font-size: 12px;
}
.sc-picker-x {
  border: 0; background: transparent; color: var(--t4); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 2px;
}
.sc-picker-x:hover { color: var(--crit); }
.sc-picker-drop {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px;
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--r-ctl);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); max-height: 240px; overflow-y: auto; padding: 4px;
}
.sc-picker-opt {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--t2); font-size: 12.5px; padding: 7px 10px; border-radius: var(--r-ctl); cursor: pointer;
}
.sc-picker-opt:hover { background: var(--acc-soft); color: var(--tx); }
.sc-picker-empty { font-size: 12px; color: var(--t5); padding: 8px 10px; }

/* Línea de tiempo de incidente */
.sc-timeline { border-left: 2px solid var(--bd); margin: 6px 0 0 6px; padding-left: 16px; }
.sc-timeline-item { position: relative; padding: 0 0 16px; }
.sc-timeline-item::before {
  content: ""; position: absolute; left: -23px; top: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--acc); border: 2px solid var(--card);
}
.sc-timeline-item.sys::before { background: var(--t5); }
.sc-timeline-meta { font-size: 10.5px; color: var(--t5); margin-bottom: 2px; }
.sc-timeline-text { font-size: 12.5px; color: var(--t2); line-height: 1.5; white-space: pre-wrap; }

/* ----------------------------------------------------------------------------
   Portal de autoservicio de tickets
   ---------------------------------------------------------------------------- */
.sc-portal-titulo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tx);
}

/* Bloque de datos que el portal completa solo (los saca de la ficha de la persona):
   se muestran para dar confianza de lo que se va a registrar, no para editarlos. */
.sc-portal-auto {
  margin-top: 16px;
  padding: 13px 15px;
  background: var(--inset);
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
}
.sc-portal-auto-tit {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--t5);
  margin-bottom: 10px;
}
.sc-portal-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 20px;
}
.sc-portal-auto-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-portal-auto-grid span { font-size: 11px; color: var(--t5); }
.sc-portal-auto-grid b {
  font-size: 13px; font-weight: 500; color: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Nota bajo un campo: confirma lo que el formulario dedujo (correo y área de la
   persona vinculada, por ejemplo) sin competir con la etiqueta. */
.sc-hint {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--t5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Adjuntos: lista de archivos elegidos antes de enviar y lista de descargas. */
.sc-adjuntos { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sc-adjunto-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--inset);
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
}
.sc-adjunto-nom {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-adjunto-peso { flex: none; font-size: 11px; color: var(--t5); font-family: var(--mono); }

.sc-adjuntos-panel {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px 14px;
  border-bottom: 1px solid var(--hair);
  background: var(--inset);
}
.sc-adjunto-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  font-size: 12.5px; color: var(--acc); text-decoration: none;
  border: 1px solid var(--bd); border-radius: var(--r-pill);
}
.sc-adjunto-link:hover { background: var(--acc-soft); }

/* ----------------------------------------------------------------------------
   Ejemplo de la plantilla dentro del modal de carga masiva. Va como lista
   numerada y no como tabla: las plantillas llegan a 15 columnas y una tabla
   obligaría a desplazarse en horizontal dentro del modal.
   ---------------------------------------------------------------------------- */
.sc-plantilla {
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  background: var(--inset);
  margin-bottom: 12px;
  overflow: hidden;
}
.sc-plantilla-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--t4);
  padding: 10px 13px;
  text-align: left;
}
.sc-plantilla-tit:hover { color: var(--acc); }
.sc-plantilla-chevron { font-size: 12px; transition: transform .15s ease; }
.sc-plantilla-chevron.cerrado { transform: rotate(-90deg); }

.sc-plantilla-cuerpo {
  max-height: 260px;
  overflow-y: auto;
  border-top: 1px solid var(--bd);
  padding: 4px 0;
}
.sc-plantilla-fila {
  display: grid;
  grid-template-columns: 26px minmax(120px, 1fr) minmax(120px, 1.2fr);
  align-items: baseline;
  gap: 10px;
  padding: 5px 13px;
}
.sc-plantilla-fila:nth-child(odd) { background: var(--hair); }
.sc-plantilla-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--t6);
  text-align: right;
}
.sc-plantilla-col { font-size: 12px; color: var(--t2); }
.sc-plantilla-val {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--acc);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Barras proporcionales del reporte de inventario. */
.sc-barra { margin-bottom: 10px; }
.sc-barra-fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.sc-barra-nom {
  font-size: 12.5px; color: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-barra-num { font-family: var(--mono); font-size: 12.5px; color: var(--t1); font-weight: 600; }
.sc-barra-pct { font-family: var(--mono); font-size: 11px; color: var(--t5); min-width: 34px; text-align: right; }
.sc-barra-pista { height: 6px; background: var(--inset); border-radius: 3px; overflow: hidden; }
.sc-barra-relleno { height: 100%; background: var(--acc); border-radius: 3px; min-width: 2px; }

/* Líneas del formulario de ajuste de inventario. */
.sc-ajuste-linea {
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--inset);
}
.sc-ajuste-cabecera { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.sc-ajuste-info {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: baseline;
  margin-top: 9px; font-size: 11.5px; color: var(--t5);
}
.sc-ajuste-info b { color: var(--t2); font-weight: 600; }
.sc-ajuste-series {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair);
}

/* ----------------------------------------------------------------------------
   Interruptores. Los <input type="checkbox"> del sistema se dibujan como toggle:
   se hace por CSS y no con un componente para que valga en todos —los que hay y
   los que vengan— sin tocar el marcado ni los enlaces de datos.
   ---------------------------------------------------------------------------- */
:root {
  --sw-off: #3a3846;        /* pista apagada */
  --sw-knob: #ffffff;       /* perilla */
  --sw-knob-ico: #4a4956;   /* glifo dentro de la perilla */
}
[data-theme="light"] {
  --sw-off: #c4c2ce;
  --sw-knob: #ffffff;
  --sw-knob-ico: #8a8893;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 42px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--sw-off);
  cursor: pointer;
  vertical-align: middle;
  transition: background .18s ease;
}

/* Perilla: se desplaza y cambia de glifo según el estado. */
input[type="checkbox"]::after {
  content: "✕";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sw-knob);
  color: var(--sw-knob-ico);
  font-size: 9px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: left .18s ease, color .18s ease;
}

input[type="checkbox"]:checked { background: var(--acc); }
input[type="checkbox"]:checked::after { content: "✓"; left: 21px; color: var(--acc); }

input[type="checkbox"]:hover:not(:disabled) { filter: brightness(1.1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Etiqueta al lado del interruptor: alineada al centro y clicable. */
label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }

/* Captura masiva de números de serie en el ajuste: se pegan desde una planilla. */
.sc-series-texto {
  width: 100%;
  min-height: 96px;
  max-height: 220px;
  height: auto;
  padding: 9px 11px;
  line-height: 1.5;
  resize: vertical;
}
.sc-series-chip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--bd);
}
.sc-series-chip.ok { color: var(--ok); border-color: var(--ok); }
.sc-series-chip.med { color: var(--med); border-color: var(--med); }
.sc-series-chip.crit { color: var(--crit); border-color: var(--crit); }

.sc-series-aviso { font-size: 11px; color: var(--t5); margin-top: 6px; }
.sc-series-aviso.crit { color: var(--crit); }

.sc-series-lista {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 8px; padding: 8px;
  max-height: 130px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-ctl);
}
.sc-series-item {
  font-family: var(--mono); font-size: 11px; color: var(--t3);
  padding: 2px 8px; border-radius: var(--r-xs); background: var(--card);
}
.sc-series-item.dup { color: var(--crit); border: 1px solid var(--crit); }
.sc-series-item.mas { color: var(--t5); background: transparent; font-style: italic; }

/* Botón de acción destructiva: se distingue del primario porque borrar no se deshace. */
.sc-btn-peligro { background: var(--crit); color: #fff; }
.sc-btn-peligro:hover:not(:disabled) { filter: brightness(1.1); }
.sc-iconbtn.peligro:hover { color: var(--crit); }

/* Ficha-contador que se puede presionar para desplegar su detalle. */
.sc-chip-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--t3);
  font-family: var(--mono); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.sc-chip-btn:hover { border-color: var(--acc); color: var(--acc); }
.sc-chip-btn.activo { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.sc-chip-flecha { font-size: 10px; transition: transform .15s ease; }
.sc-chip-flecha.cerrado { transform: rotate(-90deg); }

/* ============================================================================
   Resumen ejecutivo — la vista que se proyecta en la reunión semanal.
   Cada módulo es un bloque: cómo estamos hoy (métricas), qué se movió en el
   período (movimientos) y qué hay que levantar en la mesa (atención).
   ============================================================================ */
.sc-re-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sc-re-periodo { display: inline-flex; border: 1px solid var(--bd); border-radius: var(--r-ctl); overflow: hidden; }
.sc-re-periodo button {
  background: transparent; border: 0; border-right: 1px solid var(--hair);
  color: var(--t4); font-family: var(--sans); font-size: 12.5px;
  padding: 6px 12px; cursor: pointer;
}
.sc-re-periodo button:last-child { border-right: 0; }
.sc-re-periodo button:hover { color: var(--tx); background: var(--hair); }
.sc-re-periodo button.activo { background: var(--acc-soft); color: var(--acc); font-weight: 500; }

.sc-re-bloque { margin-top: 16px; }
.sc-re-bloque-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--bd); margin-bottom: 12px;
}
.sc-re-modulo { font-size: 15px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.sc-re-ir { font-size: 12px; color: var(--acc); text-decoration: none; white-space: nowrap; }
.sc-re-ir:hover { text-decoration: underline; }
.sc-re-titular { font-size: 13px; color: var(--t3); line-height: 1.5; margin-bottom: 14px; }

.sc-re-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.sc-re-metrica { border: 1px solid var(--bd); border-radius: var(--r-ctl); padding: 9px 11px; background: var(--inset); }
.sc-re-m-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t5); }
.sc-re-m-valor { font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--tx); }
.sc-re-m-nota { font-size: 11px; color: var(--t5); }

.sc-re-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t5); margin: 16px 0 8px; }

.sc-re-movs { display: flex; flex-wrap: wrap; gap: 7px; }
.sc-re-mov {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--bd); border-radius: var(--r-pill);
  padding: 4px 10px; font-size: 12px; color: var(--t3);
}
.sc-re-mov b { font-size: 13px; color: var(--tx); font-weight: 600; }
.sc-re-mov.cero { opacity: 0.42; }

.sc-re-atencion { display: flex; flex-direction: column; gap: 7px; }
.sc-re-item {
  display: flex; gap: 9px; align-items: flex-start;
  border: 1px solid var(--bd); border-radius: var(--r-ctl); padding: 8px 11px;
}
.sc-re-item .sc-dot { margin-top: 5px; flex: none; }
.sc-re-item-tit { font-size: 12.5px; color: var(--tx); line-height: 1.4; }
.sc-re-item-det { font-size: 11.5px; color: var(--t5); line-height: 1.45; }
.sc-re-limpio { font-size: 12.5px; color: var(--ok); display: flex; align-items: center; gap: 8px; }

/* En papel: sin navegación ni botones, y los bloques no se parten a la mitad. */
@media print {
  .sc-sidebar, .sc-topbar, .sc-re-acciones, .sc-re-ir { display: none !important; }
  .sc-app, .sc-main, .sc-content { display: block !important; margin: 0 !important; padding: 0 !important; }
  .sc-re-bloque, .sc-card { break-inside: avoid; page-break-inside: avoid; border-color: #ccc !important; }
  body { background: #fff !important; }
}