/* ============================================================================
   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);
}

/* ----------------------------------------------------------------------------
   Menú colapsable
   El botón de hamburguesa lo esconde y lo trae de vuelta. Se anima el ancho en
   vez de ocultarlo, así el contenido de la derecha crece sin dar un salto.
   ---------------------------------------------------------------------------- */
.sc-sidebar { transition: width .16s ease, opacity .12s ease; overflow: hidden; }
.sc-app.menu-oculto .sc-sidebar {
  width: 0;
  opacity: 0;
  border-right-color: transparent;
  pointer-events: none;
}

.sc-burger {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  background: var(--inset);
  cursor: pointer;
  padding: 0;
}
.sc-burger:hover { border-color: var(--acc); }
.sc-burger:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sc-burger span {
  display: block;
  width: 15px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--t3);
  transition: background .12s;
}
.sc-burger:hover span { background: var(--acc); }

/* Buscador de apartados dentro del menú */
.sc-nav-buscar { position: relative; padding: 11px 12px 0; flex: none; }
.sc-nav-buscar .sc-input { height: 30px; font-size: 12.5px; padding-right: 26px; }
.sc-nav-buscar-x {
  position: absolute;
  right: 18px;
  top: 17px;
  border: 0;
  background: transparent;
  color: var(--t5);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 2px;
}
.sc-nav-buscar-x:hover { color: var(--tx); }

/* Resultado de la búsqueda: el apartado y, atenuado, el grupo al que pertenece. */
.sc-nav-item.sc-nav-hallado { justify-content: space-between; gap: 8px; }
.sc-nav-grupo {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t6);
  white-space: nowrap;
}
.sc-nav-vacio { padding: 6px 13px; font-size: 12px; color: var(--t5); }

/* ----------------------------------------------------------------------------
   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); }

/* ---- Grillas anchas ----
   Con muchas columnas, repartir el ancho de la pantalla entre todas las aprieta hasta
   que el contenido se monta: un N° de serie largo con su distintivo al lado se mete en
   la columna siguiente. En vez de eso, la grilla no baja de un ancho mínimo y se
   desplaza en horizontal.

   El mínimo lo declara cada pantalla en --sc-grilla-min, sumando lo que necesita cada
   columna: acá no se puede calcular, porque depende de qué se muestra en cada una.

   El encabezado de la tarjeta y el paginador no se desplazan con la grilla —quedan
   fijos a la izquierda— porque no son parte de ella y verlos correrse se lee como que
   la página se rompió. */
.sc-table-ancha { overflow-x: auto; }

.sc-table-ancha > .sc-thead,
.sc-table-ancha > .sc-trow,
.sc-table-ancha > .sc-subtabla > .sc-subthead,
.sc-table-ancha > .sc-subtabla > .sc-subrow,
.sc-table-ancha > .sc-empty { min-width: var(--sc-grilla-min, auto); }

.sc-table-ancha > .sc-table-head,
.sc-table-ancha > .sc-pager { position: sticky; left: 0; }

/* La barra de desplazamiento discreta: en una tabla ancha aparece siempre, y la del
   sistema se come parte de la última fila. */
.sc-table-ancha::-webkit-scrollbar { height: 9px; }
.sc-table-ancha::-webkit-scrollbar-track { background: transparent; }
.sc-table-ancha::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 5px; }
.sc-table-ancha::-webkit-scrollbar-thumb:hover { background: var(--t6); }

/* Detalle desplegado dentro de una fila (por ejemplo, lo que tiene una persona) */
.sc-subtabla { background: var(--inset); border-bottom: 1px solid var(--hair); }
.sc-subthead, .sc-subrow { display: grid; gap: 8px; align-items: center; padding: 7px 16px 7px 46px; }
.sc-subthead {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t6);
}
.sc-subrow { font-size: 12.5px; cursor: pointer; border-top: 1px solid var(--hair); }
.sc-subrow:hover { background: var(--hair); }
/* Entrega ya devuelta: se lee como historial, no como algo que la persona tiene hoy. */
.sc-subrow.devuelta > div { color: var(--t5) !important; }
.sc-subrow.devuelta .sc-dot { opacity: .45; }

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

/* ============================================================================
   Tareas del ticket. La casilla ya se dibuja como interruptor (ver más abajo,
   "Interruptores"), así que acá solo va la fila, la sangría de las subtareas y
   la barra de avance.
   ============================================================================ */
.sc-tareas { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

/* Encabezado de una sección plegable dentro de la ficha del ticket. */
.sc-seccion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0 0 8px;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.sc-seccion:hover .sc-card-title { color: var(--acc); }
.sc-seccion:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
.sc-seccion-chev {
  font-size: 12px;
  line-height: 1;
  color: var(--t5);
  transition: transform .15s ease;
}
.sc-seccion.cerrada .sc-seccion-chev { transform: rotate(-90deg); }
.sc-seccion-resumen { margin-left: auto; font-size: 11.5px; color: var(--t5); white-space: nowrap; }
.sc-seccion-resumen.ok { color: var(--ok); }

.sc-tarea {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  border-radius: var(--r-ctl);
}
.sc-tarea:hover { background: var(--hair); }
.sc-tarea.sub { padding-left: 30px; }

.sc-tarea-txt { flex: 1; font-size: 12.5px; color: var(--t2); min-width: 0; }
.sc-tarea.lista .sc-tarea-txt { color: var(--t5); text-decoration: line-through; }

/* La tarea que tiene subtareas hace de titulo de su grupo: en negrita se ve donde
   empieza cada bloque sin tener que leer la sangria de las de abajo. Tachada cuando
   esta lista sigue en negrita, para no perder esa referencia a media lista. */
.sc-tarea.grupo .sc-tarea-txt { font-weight: 600; color: var(--t1); }
.sc-tarea.grupo.lista .sc-tarea-txt { color: var(--t4); }

.sc-tarea-quien { font-size: 11px; color: var(--t6); white-space: nowrap; }

/* Marca el comentario de la bitacora que salio del modulo. Se marca lo que se publica y
   no lo interno, que es la norma: marcarlo todo seria ruido en la lista. */
.sc-badge-visible {
  margin-left: 6px; padding: 0 6px; font-size: 10px; letter-spacing: .02em;
  border-color: var(--acc); color: var(--acc);
}

/* Préstamo entre organizaciones: el equipo está en una unidad de control de otra empresa.
   Mismo distintivo en las siete pantallas donde aparece —lo pinta MarcaPrestamo— porque
   es la misma cosa y con dos formas parecería que son dos. Lleva el relleno suave y no
   solo el borde: la fila se lee igual que las demás y el préstamo tiene que saltar sin
   que haya que ir columna por columna buscándolo. */
.sc-prestamo {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--acc);
  background: var(--acc-soft);
  color: var(--acc);
  font-size: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
  flex: none;
}

/* ----------------------------------------------------------------------------
   Etiquetas transversales
   ---------------------------------------------------------------------------- */
/* El distintivo. El color de fondo lo pone cada etiqueta y el del texto se calcula
   para que se lea; por eso van en el style y no aca. */
.sc-etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-etiqueta-x {
  border: 0; background: none; padding: 0; margin-right: -2px;
  font-size: 10px; cursor: pointer; opacity: .65;
}
.sc-etiqueta-x:hover { opacity: 1; }

.sc-etiquetas-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* El boton de poner etiqueta: discreto hasta que se necesita, para que la fila de
   etiquetas se lea como etiquetas y no como una barra de acciones. */
.sc-etiqueta-mas {
  border: 1px dashed var(--bd); background: none; color: var(--t5);
  border-radius: 999px; padding: 2px 10px; font-size: 11.5px; cursor: pointer;
  font-family: inherit;
}
.sc-etiqueta-mas:hover { border-color: var(--acc); color: var(--acc); border-style: solid; }
.sc-etiqueta-mas.on { border-style: solid; border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }

/* Lo que marca una etiqueta, en fichas que se leen solas: el nombre, el estado y los
   datos que distinguen a ese registro. Una grilla de dos columnas obligaba a entrar al
   modulo para saber de que se trataba cada fila. */
.sc-rel-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sc-rel-item {
  border: 1px solid var(--bd); border-radius: var(--r-ctl);
  padding: 10px 12px; background: var(--inset);
}
.sc-rel-cabecera { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-rel-titulo {
  color: var(--t1); font-size: 13px; font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El detalle a dos lineas: suele ser la descripcion de un ticket, que cortada a una no
   alcanza a decir de que se trata. */
.sc-rel-detalle {
  margin-top: 3px; font-size: 12px; color: var(--t4); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-rel-datos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; }
.sc-rel-dato { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; }
.sc-rel-dato .k { color: var(--t6); }
.sc-rel-dato .v { color: var(--t2); font-weight: 600; }

/* La lista de etiquetas disponibles, debajo del campo y dentro del flujo. */
.sc-etiquetas-lista {
  margin-top: 8px; padding: 10px;
  border: 1px solid var(--bd); border-radius: var(--r-ctl); background: var(--inset);
}
.sc-etiquetas-opciones { display: flex; flex-wrap: wrap; gap: 7px; }

/* Cada opcion es la etiqueta tal como se vera puesta: el color es la mitad de para que
   sirve una etiqueta, y una lista de texto plano lo esconderia. */
.sc-etiqueta-opt {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid transparent; background: none; padding: 2px; border-radius: 999px;
  cursor: pointer; font-family: inherit;
}
.sc-etiqueta-opt:hover { border-color: var(--acc); }
.sc-etiqueta-opt.on { border-color: var(--acc); background: var(--acc-soft); }
.sc-etiqueta-tilde { color: var(--acc); font-size: 11px; padding-right: 4px; }

/* ----------------------------------------------------------------------------
   Conversacion del portal: lo de soporte a la izquierda, lo propio a la derecha,
   que es como se lee cualquier conversacion.
   ---------------------------------------------------------------------------- */
.sc-charla { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.sc-charla-linea { display: flex; }
.sc-charla-linea.mio { justify-content: flex-end; }

.sc-charla-burbuja {
  max-width: 78%; padding: 8px 11px;
  border: 1px solid var(--bd); border-radius: 12px;
  background: var(--inset);
}
.sc-charla-linea.mio .sc-charla-burbuja { background: var(--acc-soft); border-color: var(--acc); }

/* pre-wrap: el comentario se escribe en varias lineas y hay que verlas como se escribieron. */
.sc-charla-txt { font-size: 13px; line-height: 1.5; color: var(--t1); white-space: pre-wrap; word-break: break-word; }
.sc-charla-pie { margin-top: 3px; font-size: 10.5px; color: var(--t5); }

.sc-charla-nueva { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.sc-charla-nueva .sc-textarea { flex: 1; min-width: 0; }
.sc-charla-nueva .sc-btn { flex: none; white-space: nowrap; }

/* El boton de notas. Con notas se ve siempre -si se escondiera hasta el hover no
   habria forma de saber que estan ahi-; sin notas se comporta como las demas acciones
   y aparece al pasar por encima. */
.sc-notas-btn { position: relative; overflow: visible; }
.sc-tarea .sc-notas-btn.con { opacity: 1; color: var(--acc); border-color: var(--acc); }
/* Con el panel abierto queda visible aunque la tarea no tenga notas: si se desvaneciera
   al salir el mouse, el panel quedaria abierto sin nada que indique de cual tarea es. */
.sc-tarea .sc-notas-btn.abierto {
  opacity: 1; background: var(--acc-soft); border-color: var(--acc); color: var(--tx);
}

/* El contador va de distintivo en la esquina, como el de un buzon: asi el boton mide
   lo mismo con una nota o con doce y la columna de acciones no se corre. El acento del
   sistema y no el rojo de un aviso: son notas de trabajo, no algo que este fallando. */
.sc-notas-n {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 99px;
  background: var(--acc); color: var(--acc-ink);
  border: 1.5px solid var(--card);
  font-size: 9.5px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* Las notas de una tarea, debajo de su fila. */
.sc-notas {
  display: flex; flex-direction: column; gap: 6px;
  margin: 2px 6px 8px 30px; padding: 8px 10px;
  border-left: 2px solid var(--bd); background: var(--inset);
  border-radius: var(--r-ctl);
}
.sc-notas.sub { margin-left: 54px; }
.sc-notas-vacio { font-size: 11.5px; color: var(--t5); }

.sc-nota { display: flex; flex-direction: column; gap: 1px; }
/* pre-wrap: la nota se escribe en varias lineas y hay que verlas como se escribieron. */
.sc-nota-txt { font-size: 12.5px; color: var(--t2); white-space: pre-wrap; word-break: break-word; }
.sc-nota-pie { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--t6); }
.sc-nota-pie .sc-iconbtn { width: 20px; height: 20px; opacity: 0; transition: opacity .12s; }
.sc-nota:hover .sc-iconbtn, .sc-nota .sc-iconbtn:focus-visible { opacity: 1; }

.sc-nota-nueva { display: flex; align-items: flex-end; gap: 6px; }
.sc-nota-nueva .sc-textarea { flex: 1; min-width: 0; }

/* El boton de agregar no se encoge ni parte su texto. Al lado de un campo que crece,
   un boton sin esto cede ancho hasta que «+ Agregar» se parte en dos lineas y el «+»
   queda solo arriba. */
.sc-tarea .sc-btn,
.sc-nota-nueva .sc-btn { flex: none; white-space: nowrap; }
/* Y el campo es el que cede: sin esto su ancho minimo lo fija el contenido y la fila
   se desborda en vez de encogerlo. */
.sc-tarea .sc-input { min-width: 0; }

/* Las acciones aparecen al pasar por encima: la lista se lee sin ruido. */
.sc-tarea .sc-iconbtn { opacity: 0; transition: opacity .12s; }
.sc-tarea:hover .sc-iconbtn,
.sc-tarea .sc-iconbtn:focus-visible { opacity: 1; }

.sc-avance {
  height: 6px;
  border-radius: 3px;
  background: var(--hair);
  overflow: hidden;
  margin-bottom: 10px;
}
.sc-avance-relleno { height: 100%; background: var(--acc); transition: width .18s ease; }
.sc-avance-relleno.completo { background: var(--ok); }

/* Contador del avance en la tarjeta del tablero Dev. */
.sc-avance-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t4);
  white-space: nowrap;
}
.sc-avance-chip.completo { color: var(--ok); }
.sc-avance-mini { width: 34px; height: 4px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.sc-avance-mini > i { display: block; height: 100%; background: var(--acc); }
.sc-avance-chip.completo .sc-avance-mini > i { background: var(--ok); }

/* 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;
}
/* 828px y no 720: la ficha del ticket es el formulario mas cargado del sistema y a
   720 el texto de cada tarea llegaba a tres lineas. Un 15% mas no cambia nada en los
   formularios cortos, que igual no llenan el ancho, pero a una lista larga le devuelve
   el aire. */
.sc-modal {
  width: 828px; 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);
}

/* Modal que lleva una grilla adentro. Una tabla en 720px reparte tan poco a cada
   columna que el contenido se monta —un N° de serie con su distintivo al lado no cabe
   en su celda—, asi que estos ocupan lo que da la pantalla hasta un tope comodo. Se
   aplica con la clase, no subiendo el ancho por defecto, porque un cuadro de confirmar
   o un formulario corto no tienen por que crecer. */
.sc-modal-ancho { width: min(1320px, 96vw); }

/* Modal cuyo contenido principal es un buscador con desplegable. El desplegable se
   dibuja dentro del modal y este recorta lo que se sale (overflow-y), asi que con el
   formulario vacio —que es justo cuando se usa el buscador— la lista quedaba cortada.
   Se reserva el alto que ocupa, y el modal deja de recortar cuando no hay nada que
   desplazar. El tope de 90vh sigue mandando: si el contenido crece, vuelve a scrollear. */
.sc-modal-picker .sc-modal-body { min-height: 320px; }
.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); }

/* minmax(0,1fr) y no 1fr: con «1fr» el minimo de cada columna es el ancho minimo de
   su contenido, asi que un texto que no parte -un consejo en una sola linea, un N° de
   serie largo, una URL- empuja su columna y le come el ancho a la otra. El campo de al
   lado queda de 100px con su etiqueta en tres lineas y el formulario parece roto, pero
   solo en las fichas donde ese texto aparece. */
.sc-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 18px; }
.sc-form-grid > * { min-width: 0; }
.sc-field-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .sc-form-grid { grid-template-columns: minmax(0, 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)
   ---------------------------------------------------------------------------- */
/* Barra de filtros de una pantalla. Es una grilla y no un flex: con flex cada control
   se ajusta a su propio contenido, así que al envolverse las columnas de la segunda
   fila no caían bajo las de la primera —«Subtipo» no quedaba bajo «Estado»—. Con
   columnas iguales todo se alinea, fila tras fila. */
.sc-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 12px 14px;
  align-items: end;
  margin-bottom: 16px;
}
.sc-toolbar .sc-tool { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-toolbar .sc-tool .sc-label { margin-bottom: 0; }
/* El ancho lo manda la columna, no el control: los min-width en línea que traen las
   pantallas desalinearían la grilla, y por eso se anulan desde acá. */
.sc-toolbar .sc-tool .sc-select,
.sc-toolbar .sc-tool .sc-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px;
}
/* La búsqueda toma su propia fila completa: es el campo que más texto recibe y el
   único que se lee mejor ancho. */
.sc-toolbar .sc-tool-search { grid-column: 1 / -1; }

.sc-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* Los botones de una fila no se encogen ni parten su texto: prefieren desbordar antes
   que quedar aplastados o envolverse en dos líneas. */
.sc-row-actions > * { flex: 0 0 auto; white-space: nowrap; }
.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; }

/* Un dato de la grilla que además se puede pinchar: se ve como el texto que lo rodea
   y solo al pasar por encima dice que lleva a algún lado. Un botón con borde dentro de
   una celda numérica pesa más que el número y rompe la lectura de la columna. */
.sc-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.sc-linkbtn:hover { text-decoration: underline; }

/* 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;
}

/* En un formulario el consejo se lee entero. Una sola linea con «…» sirve en una fila
   de tabla, donde hay que respetar el alto; aca esconde justo lo que hay que hacer
   -«Da de baja o devuelve las unidades primero»- y encima es lo que descuadraba la
   grilla, porque un texto que no parte mide lo que mide. */
.sc-form-grid .sc-hint,
.sc-modal-body > .sc-hint { white-space: normal; overflow: visible; text-overflow: clip; }

/* 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; }

/* Barra que se pincha para ver el detalle que hay detrás del número. */
button.sc-barra-click {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; font-family: var(--sans);
  padding: 3px 5px; margin: 0 -5px 7px; border-radius: var(--r-ctl);
  cursor: pointer; transition: background .12s ease;
}
button.sc-barra-click:hover { background: var(--hair); }
button.sc-barra-click:hover .sc-barra-nom { color: var(--acc); }
button.sc-barra-click:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

/* Enlace discreto «ver todos ⌕» en la cabecera de una tarjeta. */
.sc-verdetalle {
  margin-left: auto; border: 0; background: transparent;
  font-family: var(--sans); font-size: 11.5px; font-weight: 400;
  color: var(--acc); cursor: pointer; padding: 0;
}
.sc-verdetalle:hover { text-decoration: underline; }

/* N° de serie pinchable: abre el recorrido de esa unidad. Va subrayado de entrada
   porque dentro de una celda nada más delata que se puede pinchar. */
.sc-serie-link {
  border: 0; background: transparent; padding: 0;
  font-family: var(--mono); font-size: inherit; color: var(--acc);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--acc) 45%, transparent);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-serie-link:hover { text-decoration-color: var(--acc); }
.sc-serie-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 2px; }

/* Barra de filtros dentro del popup de detalle. */
/* Barra de filtros del popup de detalle. Es una grilla, no un flex: con flex los
   controles se ajustan a su contenido y al envolverse las columnas no calzan entre
   filas. Con columnas iguales, «Estado» queda del mismo ancho que «Código» y todo
   se alinea solo, sea cual sea el número de filtros que ofrezca ese detalle. */
.sc-detalle-filtros {
  display: grid;
  /* Con tope de ancho: el cuadro crece con las columnas de la tabla, y sin el tope
     un detalle de pocos filtros los estiraría hasta dejarlos absurdamente anchos.
     Todos miden igual, que es lo que los mantiene alineados entre filas. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 260px));
  gap: 11px 14px;
  align-items: end;
  padding: 11px 18px; border-bottom: 1px solid var(--bd); background: var(--inset);
}
.sc-detalle-filtros .sc-tool { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-detalle-filtros .sc-tool .sc-label { margin-bottom: 0; }
.sc-detalle-filtros .sc-input,
.sc-detalle-filtros .sc-select { width: 100%; height: 36px; }

/* 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; }

/* Indicadores que se pueden pinchar para ver el detalle que hay detrás del número. */
/* Sirve tanto sobre .sc-re-metrica como sobre .sc-card: el botón hereda el aspecto
   de la tarjeta y solo agrega el comportamiento. */
button.sc-re-click {
  display: block; width: 100%;
  font-family: var(--sans); text-align: left; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
button.sc-re-click:hover { border-color: var(--acc); background: var(--hair); }
button.sc-re-click:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.sc-re-lupa { color: var(--t5); font-weight: 400; }
button.sc-re-click:hover .sc-re-lupa { color: var(--acc); }

/* 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; }
}

/* ============================================================================
   Tablas: encabezado ordenable y paginador.
   El encabezado ordenable es una celda más del .sc-thead, así que hereda su
   grilla; solo agrega el cursor, la flecha y el resaltado de la columna activa.
   ============================================================================ */
.sc-th-orden {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: color .12s;
}
.sc-th-orden:hover { color: var(--t2); }
.sc-th-orden:focus-visible { outline: 1px solid var(--acc); outline-offset: 2px; border-radius: var(--r-xs); }
.sc-th-orden.activa { color: var(--acc); }

.sc-th-flecha { font-size: 9px; line-height: 1; opacity: .35; flex: none; }
.sc-th-orden:hover .sc-th-flecha { opacity: .7; }
.sc-th-orden.activa .sc-th-flecha { opacity: 1; }

.sc-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 14px;
  border-top: 1px solid var(--bd);
  background: var(--panel);
}
.sc-pager-info { font-size: 12px; color: var(--t5); }
.sc-pager-info b { color: var(--t2); font-weight: 600; }

.sc-pager-ctrl { display: flex; align-items: center; gap: 6px; }
.sc-pager-lbl { font-size: 11.5px; color: var(--t5); margin-right: 2px; }
.sc-pager-select { height: 28px; padding: 0 26px 0 8px; font-size: 12px; min-width: 62px; }

.sc-pager-btn {
  height: 28px;
  min-width: 28px;
  padding: 0 7px;
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--t3);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.sc-pager-btn:hover:not(:disabled) { color: var(--tx); background: var(--hair); border-color: var(--t6); }
.sc-pager-btn:disabled { opacity: .35; cursor: default; }

.sc-pager-pag { font-size: 12px; color: var(--t3); padding: 0 6px; white-space: nowrap; }

@media print { .sc-pager { display: none !important; } }

/* ============================================================================
   Desglose de equipos por sede (inventario e inventario por persona).
   Una sola barra en vez de una tarjeta por sede: ocupa tres líneas y deja
   ver de un vistazo el reparto. Los tramos y la leyenda filtran la lista.
   ============================================================================ */
.sc-desglose {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: 11px 14px 12px;
  margin-bottom: 14px;
}
.sc-desglose-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sc-desglose-tit {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t5);
}
.sc-desglose-total { font-size: 11.5px; color: var(--t4); margin-left: auto; }
.sc-desglose-total b { color: var(--t1); font-size: 13px; }
.sc-desglose-todas {
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--t4);
  font-family: inherit;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.sc-desglose-todas:hover { color: var(--tx); border-color: var(--acc); }

.sc-desglose-barra {
  display: flex;
  height: 10px;
  margin-top: 9px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--hair);
}
.sc-desglose-tramo { height: 100%; cursor: pointer; transition: opacity .12s; min-width: 2px; }
.sc-desglose-tramo:hover { opacity: .75; }
.sc-desglose-tramo.fijo { cursor: default; }
/* La barra pierde fuerza cuando hay un filtro puesto, salvo el tramo elegido. */
.sc-desglose-barra:has(.activo) .sc-desglose-tramo { opacity: .35; }
.sc-desglose-barra:has(.activo) .sc-desglose-tramo.activo { opacity: 1; }

.sc-desglose-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.sc-desglose-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 2px 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--t3);
  cursor: pointer;
}
.sc-desglose-item:disabled { cursor: default; }
.sc-desglose-item:hover:not(:disabled) .sc-desglose-nom { color: var(--tx); }
.sc-desglose-item.activo .sc-desglose-nom { color: var(--tx); font-weight: 600; }
.sc-desglose-punto { width: 8px; height: 8px; border-radius: 2px; flex: none; align-self: center; }
.sc-desglose-nom { color: var(--t3); }
.sc-desglose-n { font-family: var(--mono); font-size: 12.5px; color: var(--t1); font-weight: 600; }
.sc-desglose-pct { font-family: var(--mono); font-size: 11px; color: var(--t5); }

.sc-desglose-vacio { font-size: 12px; color: var(--t5); margin-top: 8px; }

/* ============================================================================
   Selección única (Ingreso / Egreso). Son radios reales: se oculta el círculo
   del navegador y se dibuja la píldora, así el propio HTML garantiza que al
   activar una se apague la otra, y se conserva el teclado.
   ============================================================================ */
.sc-opciones { display: flex; gap: 8px; flex-wrap: wrap; }

.sc-opcion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--r-ctl);
  background: var(--inset);
  cursor: pointer;
  user-select: none;
  transition: border-color .12s, background .12s, color .12s;
}
.sc-opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-opcion:hover { border-color: var(--t6); }
.sc-opcion.activa { border-color: var(--acc); background: var(--acc-soft); }
.sc-opcion:has(input:focus-visible) { outline: 1px solid var(--acc); outline-offset: 2px; }
.sc-opcion:has(input:disabled) { opacity: .55; cursor: default; }

.sc-opcion-punto {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--t6);
  background: transparent;
  transition: border-color .12s, box-shadow .12s;
}
.sc-opcion.activa .sc-opcion-punto {
  border-color: var(--acc);
  box-shadow: inset 0 0 0 3px var(--acc);
}

.sc-opcion-txt { font-size: 13px; color: var(--t2); }
.sc-opcion.activa .sc-opcion-txt { color: var(--acc); font-weight: 500; }

/* ----------------------------------------------------------------------------
   Menciones (@usuario) en comentarios de ticket
   ---------------------------------------------------------------------------- */
.sc-mencion { color: var(--acc); font-weight: 600; }

.sc-picker-opt.activa { background: var(--acc-soft); color: var(--tx); }

/* ----------------------------------------------------------------------------
   Tablero kanban (Dev): columnas por estado con tarjetas de ticket
   ---------------------------------------------------------------------------- */
.sc-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
/* Con la barra lateral, cuatro columnas dejan de caber antes de lo que parece. */
@media (max-width: 1280px) { .sc-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sc-kanban { grid-template-columns: 1fr; } }

.sc-kanban-col {
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  min-height: 140px;
}
.sc-kanban-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bd);
}
.sc-kanban-titulo { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t2); }
.sc-kanban-cuenta {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--t4);
  background: var(--inset); border-radius: var(--r-pill); padding: 1px 8px;
}
/* La franja superior de la columna dice de un vistazo en qué etapa se está. */
.sc-kanban-franja { width: 3px; height: 14px; border-radius: 2px; flex: none; }

.sc-kanban-cuerpo { display: flex; flex-direction: column; gap: 9px; padding: 12px; max-height: 62vh; overflow-y: auto; }
.sc-kanban-vacio { padding: 18px 14px; font-size: 12.5px; color: var(--t5); }

.sc-kanban-card {
  display: block; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--r-ctl);
  padding: 11px 12px; cursor: pointer; font-family: inherit;
}
.sc-kanban-card:hover { border-color: var(--acc); }
.sc-kanban-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sc-kanban-codigo { font-family: var(--mono); font-size: 11.5px; color: var(--acc); font-weight: 500; }
.sc-kanban-desc {
  margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--t2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-kanban-meta { margin-top: 9px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-kanban-pie { margin-top: 8px; font-size: 11px; color: var(--t5); display: flex; gap: 8px; flex-wrap: wrap; }

/* Arrastrar tarjetas entre columnas del kanban */
.sc-kanban-card { cursor: grab; }
.sc-kanban-card:active { cursor: grabbing; }
.sc-kanban-card.arrastrando { opacity: .45; }
.sc-kanban-col.sobre { border-color: var(--acc); background: var(--acc-soft); }
.sc-kanban-col.sobre .sc-kanban-cuerpo { border-radius: var(--r-card); }

/* ----------------------------------------------------------------------------
   Aviso de cierre por inactividad
   ---------------------------------------------------------------------------- */
/* El número grande y la barra que se vacía. La cuenta se ve de lejos a propósito: es
   un aviso que hay que notar sin leerlo, y quien vuelve al escritorio tiene que poder
   decidir en un vistazo si alcanza a pinchar. */
.sc-inactividad-cuenta {
  text-align: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 46px;
  line-height: 1;
  font-weight: 700;
  color: var(--crit);
  font-variant-numeric: tabular-nums;
}

.sc-inactividad-pista {
  margin: 14px 0 12px;
  height: 6px;
  border-radius: 999px;
  background: var(--inset);
  border: 1px solid var(--bd);
  overflow: hidden;
}

/* La transición dura lo mismo que el intervalo que la mueve, así que la barra baja
   de corrido en vez de dar saltos de un segundo. */
.sc-inactividad-barra {
  height: 100%;
  width: 100%;
  background: var(--crit);
  border-radius: 999px;
  transition: width 1s linear;
}