.login-page-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* DEFECTO de la maqueta (tipo 1): «fondo degradado azul genérico que no dice
     nada del producto». Aquí había un degradado de tres paradas sobre el
     primario, y las dos últimas mezclaban con `#000` — los dos ÚNICOS literales
     de color que quedaban en esta hoja. Se retira: el fondo es la superficie
     base del tema, y el color de marca pasa a aparecer donde significa algo
     (el tile del logo y el botón; ver el bloque de rediseño al final).
     La regla se conserva como respaldo para cualquier marcado legacy que use
     `.login-page-container` sin `.login-shell`. */
  background: var(--surface-base);
  padding: 24px 16px;
}

.login-container-custom {
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--text-primary) 25%, transparent);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
}

.login-logo {
  text-align: center;
  margin-bottom: 24px;
}

.login-logo img {
  max-height: 64px;
  max-width: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}

.login-header {
  text-align: center;
  margin-bottom: 28px;
}

/* D-E6-LOGINCSS-024 — el saludo iba con `color: var(--surface-raised)`, que es EXACTAMENTE el
   token con el que se pinta el fondo de la tarjeta (.login-container-custom, arriba en este mismo
   archivo): letra blanca sobre tarjeta blanca, invisible en la PRIMERA pantalla del producto.
   El color de un texto sobre una superficie sale del token de TEXTO, nunca del de la superficie.
   Lo fija la prueba tema/contraste-tokens.test.ts (ningun `color:` de texto puede usar un token
   --surface-*). */
.login-header h4 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.login-header p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.form-group-custom {
  margin-bottom: 18px;
}

.form-label-custom {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.input-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}

.form-control-custom {
  width: 100%;
  padding: 10px 40px 10px 36px;
  font-size: 14px;
  /* D-E6-LOGINCSS-024: el texto que teclea el usuario iba con el token de una SUPERFICIE
     (--surface-raised) sobre otra superficie (--surface-inset): en el tema claro, casi blanco
     sobre casi blanco. El color de un texto sale del token de texto. */
  color: var(--text-primary);
  background-color: var(--surface-inset);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.form-control-custom::-moz-placeholder {
  color: var(--border-color-strong);
}

.form-control-custom::placeholder {
  color: var(--border-color-strong);
}

.form-control-custom:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
  background-color: var(--surface-raised);
}

.form-control-custom.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 10%, transparent);
}

.password-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 4px;
  display: flex;
  align-items: center;
  z-index: 1;
  transition: color 0.15s ease;
}

.password-toggle:hover {
  color: var(--text-secondary);
}

.login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 8px;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.login-remember input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.login-remember label {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.forgot-password-custom {
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.forgot-password-custom:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.btn-login-custom {
  width: 100%;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  /* D-E6-LOGINCSS-024: aqui SI se queria letra clara sobre el color de marca, pero el token
     usado era el de una superficie. El token del contraste sobre primario existe y esta validado
     contra el (--color-primary-text, ver assets/main.css): mismo blanco, pero con significado. */
  color: var(--color-primary-text);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  letter-spacing: 0.3px;
}

.btn-login-custom:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.btn-login-custom:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

.btn-login-custom:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.login-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 24px;
  margin-bottom: 0;
}

/* =========================================================================
   REDISEÑO — maqueta «Tipo 1 · Login» (Mejora diseño .html, líneas 371-419)
   ═════════════════════════════════════════════════════════════════════════

   POR QUÉ ESTÁ AÑADIDO AL FINAL Y NO SUSTITUYE LO DE ARRIBA:
   las reglas viejas (`.login-page-container`, `.login-container-custom`,
   `.login-logo`, `.login-header`, `.login-footer`) SE CONSERVAN intactas
   porque `assets/main.css` y `assets/scss/components/_login.scss` también las
   declaran y hay proyectos entregados que las tienen enganchadas. El rediseño
   entra por una SEGUNDA clase en el MISMO elemento
   (`.login-page-container.login-shell`, especificidad 0,2,0), que gana a la
   regla de una sola clase sin depender del orden en que el bundler junte las
   hojas y SIN UN SOLO `!important`.

   COLOR: ni un literal. Todo sale de los tokens del contrato
   (`--color-primary*`, `--text-*`, `--surface-*`, `--border-color*`) o de los
   alias de la maqueta que `assets/tokens-plantilla.css` publica en `:root`
   (`--font-display`, `--font-mono`, `--text-link`). Por eso el TEMA OSCURO SE
   RESUELVE SOLO: esos tokens ya se redeclaran bajo `[data-theme="dark"]` y
   bajo `@media (prefers-color-scheme: dark)` en main.css y en
   tokens-plantilla.css, así que aquí no hace falta —ni conviene— un bloque
   oscuro propio, que se desincronizaría en la primera corrección de contraste.

   LO QUE FIJA `tema/contraste-tokens.test.ts` y esta hoja respeta: ningún
   `color:` de texto puede salir de un token `--surface-*` (era el defecto
   D-E6-LOGINCSS-024, letra blanca sobre tarjeta blanca).
   ========================================================================= */

/* ── 1. ARMAZÓN ────────────────────────────────────────────────────────────
   La maqueta es un split: marca a la izquierda, formulario a la derecha.
   Sustituye al degradado del primario, que era el defecto «fondo degradado
   azul genérico que no dice nada del producto»: ahora el fondo son las
   superficies del tema y el color de marca aparece donde significa algo (el
   tile del logo y el botón). */
.login-page-container.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  padding: 0;
  background: var(--surface-base);
  color: var(--text-primary);
}

/* ── 2. PANEL DE MARCA ────────────────────────────────────────────────────
   «Marca — logo y nombre del producto, no del generador.» La ranura de avisos
   de la maqueta no se dibuja: no hay fuente de avisos públicos previos a la
   sesión, y la propia maqueta dice que sin avisos se muestra «solo la marca». */
.login-shell .login-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 56px clamp(32px, 6vw, 88px);
  background: var(--surface-sunken);
  border-right: 1px solid var(--border-color);
  min-width: 0;
}

.login-shell .login-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 34ch;
}

.login-shell .login-brand-logo {
  max-height: 72px;
  max-width: 240px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}

/* Monograma: el respaldo cuando el proyecto no subió su logo. Es el ÚNICO
   sitio donde el color de marca hace de relleno grande, y la tinta de encima
   sale del token que existe justo para eso (`--color-primary-text`), no de un
   blanco a fuego que se rompería con un primario claro. */
.login-shell .login-brand-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.login-shell .login-brand-monogram--sm {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  font-size: 18px;
}

.login-shell .login-brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* ── 3. COLUMNA DEL FORMULARIO ────────────────────────────────────────────
   Superficie base a un lado, tarjeta elevada al otro: la jerarquía la da la
   superficie, no una sombra grande. */
.login-shell .login-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  min-width: 0;
}

.login-container-custom.login-form-card {
  width: 100%;
  max-width: 400px;
  padding: 36px 32px 28px;
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  /* La sombra deja de ser un bulto de 60px: geometría discreta y la tinta
     sale del token de texto, así que en oscuro no se vuelve un halo negro. */
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 6%, transparent),
              0 10px 28px -14px color-mix(in srgb, var(--text-primary) 22%, transparent);
}

/* Marca compacta dentro de la tarjeta: en móvil el panel de marca se colapsa
   y el nombre del producto tiene que seguir encima del formulario. En
   escritorio se oculta para no repetir la marca dos veces en pantalla. */
.login-form-card .login-brand-compact {
  display: none;
  align-items: center;
  gap: 10px;
  text-align: left;
  margin-bottom: 20px;
}

.login-form-card .login-brand-compact img {
  max-height: 38px;
  max-width: 150px;
  -o-object-fit: contain;
     object-fit: contain;
}

.login-form-card .login-brand-name-compact {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── 4. ENCABEZADO ───────────────────────────────────────────────────────── */
.login-header.login-form-head {
  text-align: left;
  margin-bottom: 22px;
}

/* `h1`, no `h4`: es el único encabezado de la pantalla. */
.login-form-head .login-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.login-header.login-form-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── 5. AVISO DE ERROR DE CREDENCIALES ────────────────────────────────────
   El MENSAJE lo sigue poniendo el backend sin retocar; lo que cambia es la
   presentación: un aviso con borde y fondo suave en vez de un párrafo rojo
   centrado con estilos en línea. `--color-danger-*` son tokens de marca; los
   rojos reservados de PLAZO (`--vencido`) NO se usan aquí, porque esto no es
   un vencimiento. */
.login-shell .login-alert {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  border-radius: var(--radius-md);
  background: var(--color-danger-muted);
  border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
  color: var(--color-danger-text);
}

/* ── 6. CAMPOS ────────────────────────────────────────────────────────────
   Las reglas de arriba (`.form-control-custom`, `.form-label-custom`,
   `.input-icon`) ya salen de tokens y se conservan; aquí solo se ajusta lo
   que la maqueta cambia. */
.login-shell .form-group-custom {
  margin-bottom: 16px;
}

.login-shell .form-label-custom {
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

/* El hueco de la derecha lo pide el botón «Mostrar», que solo existe en el
   campo de contraseña; el de usuario no lo reserva. */
.login-shell .form-control-custom {
  padding: 11px 14px 11px 36px;
  border-radius: var(--radius-md);
}

.login-shell #password.form-control-custom {
  padding-right: 84px;
}

/* El usuario es una CLAVE, no prosa: monoespaciada con cifras tabulares, como
   la maqueta («m.arriaga»). Ayuda a distinguir l/1/I y O/0 al teclear. */
.login-shell #username.form-control-custom {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* FOCO VISIBLE: anillo del primario del proyecto. Se declara también como
   `:focus-visible` para quien navega con teclado, y con `outline` además del
   `box-shadow` para sobrevivir al modo de alto contraste de Windows, donde
   las sombras no se pintan. */
.login-shell .form-control-custom:focus,
.login-shell .form-control-custom:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

/* El placeholder iba con `--border-color-strong`: un token de BORDE usado como
   color de letra, y por tanto con un contraste que nadie había medido. El
   token de texto apagado sí está clampeado a 4.5:1 contra las superficies. */
.login-shell .form-control-custom::-moz-placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.login-shell .form-control-custom::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* El asterisco de obligatorio y los mensajes de campo iban con `.text-danger`
   de Bootstrap, que es un rojo LITERAL ajeno al tema (y con contraste sin
   medir sobre la tarjeta). Dentro del login se reconduce al token de peligro
   del proyecto. El selector va acotado a `.login-shell`: no toca ninguna otra
   pantalla ni ninguna otra hoja. */
.login-shell .text-danger,
.login-shell .login-field-error {
  color: var(--color-danger-text);
}

.login-shell .login-field-error,
.login-shell .small.text-danger {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
}

/* ── 7. MOSTRAR / OCULTAR LA CONTRASEÑA ──────────────────────────────────
   Botón real, con nombre accesible y foco propio: era un icono sin nombre y
   sin anillo de foco, invisible para quien navega con teclado. */
.login-shell .password-toggle {
  right: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-link, var(--color-primary));
  background: none;
}

.login-shell .password-toggle:hover {
  background: var(--surface-hover);
  color: var(--color-primary-hover);
}

.login-shell .password-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* ── 8. FILA DE OPCIONES ─────────────────────────────────────────────────── */
.login-shell .login-options-row {
  margin-bottom: 18px;
}

.login-shell .login-remember {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.login-shell .login-remember input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── 9. BOTÓN ─────────────────────────────────────────────────────────────
   «El botón entra siempre»: ya no se deshabilita por campos vacíos, así que
   el estado gris deja de ser lo primero que ve el usuario. Sigue habiendo
   `:disabled` —solo mientras la petición está en vuelo— y ahora se pinta como
   el MISMO botón atenuado, no como un botón muerto de color texto-apagado. */
.login-shell .btn-login-custom {
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  color: var(--color-primary-text);
  background: var(--color-primary);
}

.login-shell .btn-login-custom:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.login-shell .btn-login-custom:disabled {
  background: var(--color-primary);
  color: var(--color-primary-text);
  opacity: 0.62;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* Aviso de servidor lento (maqueta: «si tarda más de 3 s, avisa que el
   servidor está lento»). Ámbar NO se usa aquí: en esta plantilla el ámbar
   está reservado a PLAZO y esto no es un vencimiento. */
.login-shell .login-lento {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--text-secondary);
}

/* ── 10. PIE ──────────────────────────────────────────────────────────────
   Nombre del producto primero; la firma del proveedor, cuando el proyecto la
   deja puesta, queda en segundo plano — que es justo el orden que el defecto
   «marca equivocada» tenía invertido. */
.login-footer.login-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
}

.login-footer.login-pie > span:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── 11. PANTALLAS ESTRECHAS ──────────────────────────────────────────────
   Por debajo de 900px el split no cabe: el panel de marca se retira y la
   marca compacta de dentro de la tarjeta toma el relevo, así que el nombre
   del producto NUNCA desaparece. */
@media (max-width: 900px) {
  .login-page-container.login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
  }

  .login-shell .login-brand-panel {
    display: none;
  }

  .login-shell .login-form-panel {
    width: 100%;
    padding: 0;
  }

  .login-form-card .login-brand-compact {
    display: flex;
  }
}

@media (max-width: 420px) {
  .login-container-custom.login-form-card {
    padding: 26px 20px 22px;
  }

  .login-form-head .login-title {
    font-size: 23px;
  }
}

/* Quien pide menos movimiento no recibe el salto del botón al pasar el ratón. */
@media (prefers-reduced-motion: reduce) {
  .login-shell .btn-login-custom,
  .login-shell .form-control-custom,
  .login-shell .password-toggle {
    transition: none;
  }

  .login-shell .btn-login-custom:hover:not(:disabled) {
    transform: none;
  }
}

/* El ejemplo del campo de usuario vuelve a la letra de cuerpo. `#username` se
   pinta monoespaciado (arriba, «El usuario es una CLAVE»), y eso arrastraba
   también al placeholder: «Tu usuario» —que es prosa, no una credencial— se
   leía con la misma letra que un valor ya teclado, así que el campo parecía
   lleno. Se nombra el token y no `inherit`, porque `inherit` en un
   `::placeholder` hereda del propio input, que aquí YA es monoespaciado.
   Gana por especificidad (0,3,0) a la regla de placeholder de más arriba, sin
   depender de la posición en el archivo. */
.login-shell #username.form-control-custom::-moz-placeholder {
  font-family: var(--font-sans);
  letter-spacing: normal;
}
.login-shell #username.form-control-custom::placeholder {
  font-family: var(--font-sans);
  letter-spacing: normal;
}

/* =========================================================
   SolicitudCambioModal — estilos
   ========================================================= */

.sc-modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--text-primary) 50%, transparent);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: sc-fade-in 0.15s ease;
}

@keyframes sc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sc-modal {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--text-primary) 25%, transparent);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: sc-slide-up 0.18s ease;
}

@keyframes sc-slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Header */
.sc-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 0;
}

.sc-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sc-modal-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--surface-raised);
  font-size: 16px;
  flex-shrink: 0;
}

.sc-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, var(--text-primary));
}

.sc-modal-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted, var(--text-secondary));
}

.sc-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, var(--text-muted));
  font-size: 16px;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.sc-modal-close:hover { color: var(--text-primary, var(--text-primary)); }

/* Body */
.sc-modal-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Fields */
.sc-field { display: flex; flex-direction: column; gap: 5px; }
.sc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, var(--text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.sc-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-primary, var(--text-secondary));
}
.sc-section-badge i { color: var(--color-primary); font-size: 11px; }

.sc-row {
  display: flex;
  gap: 12px;
}
.sc-field-half { flex: 1; }

.sc-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text-primary, var(--text-primary));
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.sc-select:focus { border-color: var(--color-primary); }

/* Urgencia buttons */
.sc-urgencia-group {
  display: flex;
  gap: 6px;
}
.sc-urgencia-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text-muted, var(--text-secondary));
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.sc-urgencia-btn:hover { border-color: var(--color-primary); }

/* Textarea */
.sc-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  color: var(--text-primary, var(--text-primary));
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.sc-textarea:focus { border-color: var(--color-primary); }

.sc-char-count {
  align-self: flex-end;
  font-size: 11px;
  color: var(--text-muted, var(--text-muted));
}

/* Error */
.sc-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-danger-muted);
  border: 1px solid var(--color-danger-muted);
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  font-size: 13px;
}

/* Footer */
.sc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.sc-btn-cancel {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary, var(--text-secondary));
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.sc-btn-cancel:hover { background: var(--surface-hover); }

.sc-btn-submit {
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--surface-raised);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s, opacity 0.15s;
}
.sc-btn-submit:hover { background: var(--color-primary-hover); }
.sc-btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Tracking view ---- */
.sc-tracking { }

.sc-tracking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.sc-tracking-code {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--text-primary, var(--text-primary));
}
.sc-tracking-code i { color: var(--color-primary); }

.sc-tracking-estado {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.sc-success-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-success-muted);
  border: 1px solid var(--color-success-muted);
  border-radius: var(--radius-md);
}
.sc-success-msg strong { font-size: 14px; display: block; margin-bottom: 2px; }
.sc-success-msg p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.sc-success-msg code {
  background: var(--color-success-muted);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-family: monospace;
  font-size: 13px;
}

/* Barra de análisis */
.sc-analysis-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-analysis-progress span { font-size: 12px; color: var(--text-muted, var(--text-secondary)); }
.sc-analysis-bar {
  height: 4px;
  background: var(--surface-hover);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.sc-analysis-bar-fill {
  height: 100%;
  width: 45%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  animation: sc-bar-pulse 1.5s ease-in-out infinite;
}
@keyframes sc-bar-pulse {
  0%, 100% { width: 30%; opacity: 0.7; }
  50%       { width: 70%; opacity: 1; }
}

/* Estado terminal */
.sc-status-terminal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
}
.sc-status-terminal i { font-size: 16px; margin-right: 6px; }
.sc-status-approved { background: var(--color-success-muted); color: var(--color-success); border: 1px solid var(--color-success-muted); }
.sc-status-rejected { background: var(--color-danger-muted); color: var(--color-danger); border: 1px solid var(--color-danger-muted); }
.sc-status-applied  { background: var(--color-primary-muted); color: var(--color-primary); border: 1px solid var(--color-primary-muted); }
.sc-rechazo-motivo  { margin: 4px 0 0; font-size: 12px; font-weight: 400; }

.sc-hallazgos-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-warning-muted);
  border: 1px solid var(--color-warning-muted);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 13px;
  color: var(--color-warning-text);
}

.sc-tracking-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, var(--text-secondary));
  font-style: italic;
}

/* Los estilos del sidebar están en main.css */
/* Este archivo se mantiene para posibles estilos específicos adicionales */


/* Paleta propia del overlay de capacitacion.
   Es una superficie que por diseno CONTRASTA con la aplicacion (coach oscuro
   sobre la pantalla), asi que sus fondos no siguen al tema. Lo que si lo sigue
   es el acento y el color de exito, para que el overlay se sienta del mismo
   sistema. Declarado como excepcion en tools/contrato-tokens-check.js. */
/* ── Training Mode Overlay ───────────────────────────────────────────────── */

:root {
  --training-bg: #1e1e2e;
  --training-bg2: #27273a;
  --training-border: rgba(139,92,246,0.35);
  --training-accent: var(--color-accent);
  --training-accent-light: color-mix(in srgb, var(--color-primary) 60%, #fff);
  --training-text: var(--border-color);
  --training-muted: var(--text-muted);
  --training-success: var(--color-success);
  --training-warning: var(--color-warning);
  --training-error: var(--color-danger);
  --training-badge-bg: rgba(139,92,246,0.2);
  --training-rule-bg: rgba(139,92,246,0.08);
  --training-type-bg: color-mix(in srgb, var(--color-primary) 20%, transparent);
  --training-type-text: var(--color-primary-muted);
  --training-req-yes-bg: rgba(34,197,94,0.15);
  --training-req-yes-text: var(--color-success-muted);
  --training-req-no-bg: rgba(100,116,139,0.15);
  --training-req-no-text: var(--text-muted);
}

[data-bs-theme='light'] {
  --training-bg: var(--surface-raised);
  --training-bg2: var(--surface-inset);
  --training-border: rgba(139,92,246,0.3);
  --training-accent: var(--color-primary);
  --training-accent-light: var(--color-accent);
  --training-text: var(--surface-raised);
  --training-muted: var(--text-muted);
  --training-badge-bg: rgba(124,58,237,0.1);
  --training-rule-bg: rgba(124,58,237,0.05);
  --training-type-bg: rgba(37,99,235,0.1);
  --training-type-text: var(--color-primary);
  --training-req-yes-bg: rgba(22,163,74,0.1);
  --training-req-yes-text: var(--color-success-text);
  --training-req-no-bg: rgba(100,116,139,0.1);
  --training-req-no-text: var(--text-secondary);
}

.training-overlay {
  position: fixed;
  z-index: 9999;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--training-bg);
  border: 1.5px solid var(--training-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--text-primary) 32%, transparent), 0 0 0 1px var(--training-border);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  color: var(--training-text);
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.training-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(139,92,246,0.25) 0%, rgba(99,102,241,0.15) 100%);
  border-bottom: 1px solid var(--training-border);
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.training-overlay__header:active {
  cursor: grabbing;
}

.training-overlay__badge {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--training-accent-light);
  text-transform: uppercase;
}

.training-overlay__header-actions {
  display: flex;
  gap: 4px;
}

.training-overlay__icon-btn {
  background: transparent;
  border: none;
  color: var(--training-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  transition: color 0.15s, background 0.15s;
}

.training-overlay__icon-btn:hover {
  color: var(--training-text);
  background: var(--training-badge-bg);
}

/* ── Screen title ─────────────────────────────────────────────────────────── */

.training-overlay__screen-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--training-bg2);
  border-bottom: 1px solid var(--training-border);
  font-size: 12px;
}

.training-overlay__screen-type {
  background: var(--training-badge-bg);
  color: var(--training-accent-light);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.training-overlay__tabs {
  display: flex;
  border-bottom: 1px solid var(--training-border);
  background: var(--training-bg);
}

.training-overlay__tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--training-muted);
  padding: 7px 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.2px;
}

.training-overlay__tab:hover {
  color: var(--training-text);
}

.training-overlay__tab--active {
  color: var(--training-accent-light);
  border-bottom-color: var(--training-accent);
  font-weight: 700;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.training-overlay__body {
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--training-border) transparent;
}

/* ── Info section rows ────────────────────────────────────────────────────── */

.training-overlay__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.training-overlay__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}

.training-overlay__row--block {
  flex-direction: column;
  gap: 4px;
}

.training-overlay__label {
  color: var(--training-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-width: 80px;
}

.training-overlay__value {
  color: var(--training-text);
  font-weight: 500;
}

.training-overlay__desc {
  margin: 0;
  color: var(--training-text);
  line-height: 1.5;
  font-size: 12px;
}

/* ── Fields table ─────────────────────────────────────────────────────────── */

.training-overlay__table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--training-border);
  border-radius: var(--radius-md);
}

.training-overlay__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.training-overlay__table th {
  text-align: left;
  padding: 4px 6px;
  color: var(--training-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--training-border);
  white-space: nowrap;
  font-size: 10px;
}

.training-overlay__table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(148,163,184,0.08);
  color: var(--training-text);
  vertical-align: top;
}

.training-overlay__table tr:last-child td {
  border-bottom: none;
}

.training-overlay__type-badge {
  background: var(--training-type-bg);
  color: var(--training-type-text);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.training-overlay__req {
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
}

.training-overlay__req--yes {
  background: var(--training-req-yes-bg);
  color: var(--training-req-yes-text);
}

.training-overlay__req--no {
  background: var(--training-req-no-bg);
  color: var(--training-req-no-text);
}

/* ── Rules ─────────────────────────────────────────────────────────────────── */

.training-overlay__rules,
.training-overlay__tests {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.training-overlay__rule-card,
.training-overlay__test-card {
  background: var(--training-rule-bg);
  border: 1px solid var(--training-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.training-overlay__rule-header,
.training-overlay__test-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.training-overlay__rule-id {
  background: var(--training-badge-bg);
  color: var(--training-accent-light);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}

.training-overlay__rule-type {
  color: var(--training-muted);
  font-size: 10px;
  font-style: italic;
}

.training-overlay__rule-desc,
.training-overlay__test-desc {
  margin: 0;
  color: var(--training-text);
  font-size: 12px;
  line-height: 1.45;
}

.training-overlay__test-expected {
  margin-top: 4px;
  font-size: 11px;
  color: var(--training-muted);
}

/* ── Permissions ─────────────────────────────────────────────────────────── */

.training-overlay__perm {
  display: inline-block;
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 700;
}

.training-overlay__perm--yes {
  background: var(--training-req-yes-bg);
  color: var(--training-req-yes-text);
}

.training-overlay__perm--no {
  background: transparent;
  color: var(--training-muted);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.training-overlay__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--training-muted);
  padding: 16px 0;
  font-style: italic;
  font-size: 12px;
}

/* Spartane DoIT — Chat Widget styles */

/* D-E6-WIDGETFIJO-026 - RESERVA DE ESPACIO.
   La burbuja es `position: fixed` y ninguna pantalla dejaba hueco para ella, asi que se comia la
   ultima fila de las tablas y el pie de las graficas. El layout generado pinta el contenido dentro
   de <main>; se le anade abajo el alto de la burbuja (56px) mas su separacion (24px) y un respiro.
   La clase la pone/quita el propio ChatWidget al montarse, de modo que un sistema sin widget (o con
   el widget apagado) conserva el espaciado de siempre.
   OJO: este archivo tiene DOS COPIAS (esta plantilla, que es la que la T140 copia al proyecto, y
   GenerarCss() de Generators/ChatbotWidgetGenerator.cs, solo activo en modo --agentes). El fix se
   escribio la primera vez solo en el generador y no llego a ningun proyecto. */
body.chatbot-widget-on main { padding-bottom: 96px; }
.chatbot-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--surface-raised);
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--text-primary) 25%, transparent);
  /* D-E6-WIDGETFIJO-026 - la burbuja estaba en 9999 y tapaba TODO: los modales (z-50 de
     components/ui), el spinner y el overlay de capacitacion (9999) y el relogin (10000).
     900/899 la deja por encima del contenido y por debajo de cualquier cosa modal, alineada
     con el otro widget flotante del sistema (shared/voz/VozUsuarioWidget, z 900/1000). */
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.chatbot-fab:hover { background: var(--color-primary-hover); }

.chatbot-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-danger);
  color: var(--surface-raised);
  border-radius: var(--radius-full);
  width: 18px;
  height: 18px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 380px;
  max-height: 600px;
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--text-primary) 12%, transparent);
  display: flex;
  flex-direction: column;
  z-index: 899;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
}

.chatbot-header {
  background: var(--color-primary);
  color: var(--surface-raised);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chatbot-header-title { font-weight: 600; font-size: 15px; }
.chatbot-header-actions { display: flex; gap: 8px; }

.chatbot-icon-btn {
  background: none;
  border: none;
  color: color-mix(in srgb, var(--surface-raised) 85%, transparent);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.chatbot-icon-btn:hover { color: var(--surface-raised); background: color-mix(in srgb, var(--surface-raised) 15%, transparent); }

.chatbot-alerts {
  background: var(--color-warning-muted);
  border-left: 3px solid var(--color-warning);
  padding: 8px 12px;
  max-height: 80px;
  overflow-y: auto;
}
.chatbot-alert-item { font-size: 12px; color: var(--color-warning-text); margin-bottom: 2px; }

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chatbot-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 24px 16px;
  line-height: 1.6;
}

.chatbot-message { display: flex; }
.chatbot-message--user { justify-content: flex-end; }
.chatbot-message--assistant { justify-content: flex-start; }

.chatbot-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  line-height: 1.5;
}
.chatbot-message--user .chatbot-bubble {
  background: var(--color-primary);
  color: var(--surface-raised);
  border-bottom-right-radius: var(--radius-sm);
}
.chatbot-message--assistant .chatbot-bubble {
  background: var(--surface-inset);
  color: var(--text-primary);
  border-bottom-left-radius: var(--radius-sm);
}

.chatbot-content p { margin: 0 0 4px; }
.chatbot-table-row { font-size: 12px; display: block; white-space: pre; overflow-x: auto; }

.chatbot-sources {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}
.chatbot-source-item { display: flex; justify-content: space-between; padding: 2px 0; }
.chatbot-score { color: var(--color-primary); font-weight: 600; }

.chatbot-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 16px;
}
.chatbot-typing span {
  width: 8px; height: 8px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  animation: chatbot-bounce 1.2s infinite;
}
.chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatbot-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

.chatbot-confirm {
  background: var(--color-primary-muted);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-top: 4px;
}
.chatbot-confirm p { margin: 0 0 8px; font-size: 13px; }
.chatbot-confirm-actions { display: flex; gap: 8px; }

.chatbot-btn {
  padding: 6px 16px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.chatbot-btn--primary { background: var(--color-primary); color: var(--surface-raised); }
.chatbot-btn--secondary { background: var(--border-color); color: var(--text-secondary); }

.chatbot-error {
  background: var(--color-danger-muted);
  color: var(--color-danger-hover);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 12px;
}

.chatbot-input-area {
  border-top: 1px solid var(--border-color);
  padding: 8px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chatbot-input {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  font-size: 14px;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
}
.chatbot-input:focus { border-color: var(--color-primary); }

.chatbot-send-btn {
  background: var(--color-primary);
  color: var(--surface-raised);
  border: none;
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.chatbot-send-btn:hover:not(:disabled) { background: var(--color-primary-hover); }
.chatbot-send-btn:disabled { background: var(--border-color-strong); cursor: not-allowed; }

/* Voice input */
.chatbot-mic-btn {
  background: var(--surface-inset);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 17px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.chatbot-mic-btn:hover:not(:disabled) { background: var(--color-primary-muted); border-color: var(--color-primary); }
.chatbot-mic-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.chatbot-mic-btn--active {
  background: var(--color-danger-muted);
  border-color: var(--color-danger);
  animation: chatbot-mic-pulse 1.5s ease-in-out infinite;
}
.chatbot-mic-btn--processing {
  background: var(--color-warning-muted);
  border-color: var(--color-warning);
}

@keyframes chatbot-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 40%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-danger) 0%, transparent); }
}

.chatbot-voice-banner {
  padding: 6px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chatbot-voice-banner--listening { background: var(--color-danger-muted); color: var(--color-danger-hover); }
.chatbot-voice-banner--processing { background: var(--color-warning-muted); color: var(--color-warning-text); }

.chatbot-voice-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  display: inline-block;
  animation: chatbot-bounce 1s infinite;
}
.chatbot-voice-dot--processing { background: var(--color-warning); animation: none; }

.chatbot-voice-interim {
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  background: var(--surface-inset);
  border-left: 3px solid var(--color-primary);
}

.chatbot-voice-error { margin: 0 8px 4px; }

@media (max-width: 480px) {
  .chatbot-panel { width: calc(100vw - 16px); right: 8px; bottom: 80px; }
}

/* ===================================================================
   Home golden — layouts Command / Brief / Bento + widgets compartidos.
   Usa los tokens semánticos de main.css (theme-aware: dark automático).
   Clases con prefijo hg- para no chocar con .home-* / .golden-*.
   =================================================================== */

.hg-shell { --hg-gap: 18px; }
[data-home-density="compact"] .hg-shell,
.hg-shell[data-home-density="compact"] { --hg-gap: 11px; }

/* ---- Selector "Personalizar" (autocontenido aquí para no depender de HomePage.css) ---- */
.home-style-selector { position: relative; display: inline-flex; }
.home-style-menu {
  /* portal a document.body: position:fixed + coords se fijan por JS (ver HomeStyleSelector) */
  position: fixed; z-index: 1000; width: 280px; padding: 12px;
  background: var(--surface-raised, var(--surface-raised)); border: 1px solid var(--border-color, var(--border-color));
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg, 0 12px 28px color-mix(in srgb, var(--text-primary) 12%, transparent));
}
.hsm-title { font-size:var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, var(--text-muted)); margin: 6px 4px 8px; }
.hsm-layouts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.hsm-opt { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; text-align: left; padding: 9px 10px; border-radius: var(--radius-md,8px); cursor: pointer; border: 1.5px solid var(--border-color, var(--border-color)); background: var(--surface-inset, var(--surface-inset)); }
.hsm-opt:hover { border-color: var(--border-color-strong); }
.hsm-opt.sel { border-color: var(--color-primary, var(--color-primary)); background: var(--color-primary-muted, var(--color-primary-muted)); }
.hsm-opt .material-icons { grid-row: 1 / span 2; font-size: 22px; color: var(--color-primary, var(--color-primary)); }
.hsm-opt-label { font-size:var(--text-sm); font-weight: 700; color: var(--text-primary, var(--text-primary)); }
.hsm-opt-desc { font-size:var(--text-xs); color: var(--text-muted, var(--text-muted)); }
.hsm-density { display: flex; gap: 6px; }
.hsm-density button { flex: 1; padding: 7px; border-radius: var(--radius-md,8px); font-size:var(--text-sm); font-weight: 600; cursor: pointer; border: 1.5px solid var(--border-color, var(--border-color)); background: var(--surface-inset, var(--surface-inset)); color: var(--text-primary, var(--text-primary)); }
.hsm-density button.sel { border-color: var(--color-primary, var(--color-primary)); background: var(--color-primary-muted, var(--color-primary-muted)); color: var(--color-primary, var(--color-primary)); }

/* La primera parada era var(--surface-base) — el fondo de la pagina, #FAFAFA en
   produccion. Un degradado "navy" que arrancaba en casi-blanco: ademas de romper el
   contraste (ver .hg-hero) no era lo que el nombre .hg-hero-nav prometia. Las tres
   paradas salen ahora de la marca. */
.hg-hero-nav { --hg-1:var(--color-primary-active); --hg-2:var(--color-primary); --hg-3:var(--color-accent,var(--color-primary)); }

/* ---- Toolbar (selector flotante) ---- */
.hg-toolbar { display:flex; justify-content:flex-end; margin-bottom:14px; }

/* ---- KPI card (golden) ---- */
.hg-kpi-grid { display:grid; gap:var(--hg-gap); }
.hg-kpi {
  position:relative; overflow:hidden;
  background:var(--surface-raised,var(--surface-raised));
  border:1px solid var(--border-color,var(--border-color));
  border-radius:var(--radius-lg,12px);
  padding:16px 16px 14px;
  box-shadow:var(--shadow-sm,0 1px 3px color-mix(in srgb, var(--text-primary) 12%, transparent));
  transition:transform .2s, box-shadow .2s;
}
.hg-kpi::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--color-accent, var(--color-primary)); }
.hg-kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow-md,0 4px 12px color-mix(in srgb, var(--text-primary) 12%, transparent)); }
.hg-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.hg-kpi-tile { width:44px; height:44px; border-radius:var(--radius-md,8px); display:flex; align-items:center; justify-content:center; color:var(--surface-raised); background:var(--color-accent, var(--color-primary)); box-shadow:var(--shadow-sm,0 1px 3px color-mix(in srgb, var(--text-primary) 12%, transparent)); }
.hg-kpi-tile .material-icons { font-size:22px; }
.hg-trend { display:inline-flex; align-items:center; gap:4px; font-size:var(--text-xs); font-weight:700; padding:3px 8px; border-radius: var(--radius-full); }
.hg-trend .material-icons { font-size:13px; }
.hg-trend.up { color:var(--color-success,var(--color-success)); background:var(--color-success-muted,var(--color-success-muted)); }
.hg-trend.down { color:var(--color-danger,var(--color-danger)); background:var(--color-danger-muted,var(--color-danger-muted)); }
.hg-trend.flat { color:var(--color-warning,var(--color-warning)); background:var(--color-warning-muted,var(--color-warning-muted)); }
.hg-kpi-value { font-family:var(--font-display,inherit); font-size:var(--text-4xl); font-weight:800; line-height:1; letter-spacing:var(--tracking-tight,-.02em); font-variant-numeric:tabular-nums; color:var(--text-primary,var(--text-primary)); }
.hg-kpi-label { margin-top:7px; font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-wider,.06em); color:var(--text-muted,var(--text-muted)); }
.hg-kpi-sub { margin-top:3px; font-size:var(--text-xs); color:var(--text-secondary,var(--text-secondary)); }
/* skeleton */
.hg-kpi-skel { min-height:104px; }
.hg-kpi-skel .b { background:var(--surface-sunken,var(--surface-sunken)); border-radius: var(--radius-md); }
.hg-kpi-skel .b1 { width:44px; height:44px; margin-left:auto; }
.hg-kpi-skel .b2 { width:64px; height:22px; margin-top:14px; }
.hg-kpi-skel .b3 { width:100px; height:12px; margin-top:8px; }

/* ---- Card genérica ---- */
.hg-card { background:var(--surface-raised,var(--surface-raised)); border:1px solid var(--border-color,var(--border-color)); border-radius:var(--radius-lg,12px); padding:18px; box-shadow:var(--shadow-sm,0 1px 3px color-mix(in srgb, var(--text-primary) 12%, transparent)); }
.hg-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; }
.hg-card-title { display:flex; align-items:center; gap:9px; font-family:var(--font-display,inherit); font-size:var(--text-lg); font-weight:700; color:var(--text-primary,var(--text-primary)); }
.hg-card-title .material-icons { font-size:20px; color:var(--color-primary,var(--color-primary)); }
.hg-card-sub { font-size:var(--text-xs); color:var(--text-muted,var(--text-muted)); }
.hg-link { font-size:var(--text-xs); font-weight:600; color:var(--color-primary,var(--color-primary)); text-decoration:none; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.hg-link:hover { text-decoration:underline; }

/* ---- Charts ---- */
.hg-donut-wrap { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.hg-donut-center { position:relative; }
.hg-legend { display:flex; flex-direction:column; gap:8px; min-width:130px; }
.hg-legend-row { display:flex; align-items:center; gap:9px; font-size:var(--text-sm); color:var(--text-secondary,var(--text-secondary)); }
.hg-legend-row .sw { width:11px; height:11px; border-radius: var(--radius-xs); flex-shrink:0; }
.hg-legend-row .lv { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---- Pendientes ---- */
.hg-pend-list { display:flex; flex-direction:column; gap:3px; }
.hg-pend-item { display:flex; align-items:center; gap:13px; padding:10px 11px; border-radius:var(--radius-md,8px); text-decoration:none; color:inherit; transition:background .15s; }
.hg-pend-item:hover { background:var(--surface-sunken,var(--surface-sunken)); }
.hg-pend-stripe { width:4px; align-self:stretch; min-height:32px; border-radius: var(--radius-sm); flex-shrink:0; }
.hg-pend-stripe.s-alta { background:var(--color-danger,var(--color-danger)); }
.hg-pend-stripe.s-media { background:var(--color-warning,var(--color-warning)); }
.hg-pend-stripe.s-baja { background:var(--color-success,var(--color-success)); }
.hg-pend-body { flex:1; min-width:0; }
.hg-pend-t { display:block; font-size:var(--text-base); font-weight:600; color:var(--text-primary,var(--text-primary)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hg-pend-m { font-size:var(--text-xs); color:var(--text-muted,var(--text-muted)); }
.hg-pill { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-2xs); font-weight:700; padding:3px 9px; border-radius: var(--radius-full); text-transform:capitalize; }
.hg-pill.p-alta { color:var(--color-danger,var(--color-danger)); background:var(--color-danger-muted,var(--color-danger-muted)); }
.hg-pill.p-media { color:var(--color-warning,var(--color-warning)); background:var(--color-warning-muted,var(--color-warning-muted)); }
.hg-pill.p-baja { color:var(--color-success,var(--color-success)); background:var(--color-success-muted,var(--color-success-muted)); }

/* ---- Modules ---- */
.hg-mods-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.hg-mod-card { background:var(--surface-raised,var(--surface-raised)); border:1px solid var(--border-color,var(--border-color)); border-radius:var(--radius-lg,12px); box-shadow:var(--shadow-sm,0 1px 3px color-mix(in srgb, var(--text-primary) 12%, transparent)); overflow:hidden; }
.hg-mod-head { display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer; transition:background .15s; }
.hg-mod-head:hover { background:var(--surface-sunken,var(--surface-sunken)); }
.hg-mod-ic { width:44px; height:44px; border-radius:var(--radius-md,8px); display:flex; align-items:center; justify-content:center; color:var(--surface-raised); flex-shrink:0; background:linear-gradient(135deg,var(--color-primary,var(--color-primary)),var(--color-accent,var(--color-primary))); }
.hg-mod-ic .material-icons, .hg-mod-ic i { font-size:19px; color:var(--surface-raised); }
.hg-mod-info { flex:1; min-width:0; }
.hg-mod-name { font-weight:700; font-size:var(--text-base); color:var(--text-primary,var(--text-primary)); }
.hg-mod-count { font-size:var(--text-xs); color:var(--text-muted,var(--text-muted)); }
.hg-mod-caret { color:var(--text-muted,var(--text-muted)); }
.hg-mod-screens { display:flex; flex-direction:column; padding:0 10px 10px; }
.hg-screen-link { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius: var(--radius-md); text-decoration:none; color:var(--text-secondary,var(--text-secondary)); font-size:var(--text-sm); font-weight:500; transition:all .15s; }
.hg-screen-link:hover { background:var(--surface-sunken,var(--surface-sunken)); color:var(--color-primary,var(--color-primary)); transform:translateX(3px); }
.hg-screen-link .material-icons { font-size:18px; color:var(--text-muted,var(--text-muted)); }

/* ---- Botones ---- */
.hg-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--radius-md,8px); font-weight:600; font-size:var(--text-sm); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:all .18s; }
.hg-btn .material-icons { font-size:18px; }
/* La tinta salia de --surface-raised, que en este par no esta validado contra NADA: el boton
   pinta SU PROPIO fondo (el primario) encima de la tarjeta y nadie componia los dos antes de
   medir — el mismo error de las cuatro rondas anteriores. Medido con los valores reales de
   cat_tema_diseno: 7 de 16 combinaciones bajo AA (peor 2.78 Neobrutalism claro, 2.99 Mantine
   claro, 4.02 Glass claro, 2.92 AntD oscuro). --color-primary-text es esa misma tinta ya
   validada a 4.5:1 por Program.cs contra el primario COMPUESTO sobre la superficie, en claro
   y en oscuro (antes ese token salia con el literal "#FFFFFF" a mano: violaba R2).
   El `filter:brightness(1.08)` del hover se retira por la MISMA razon que en .hg-btn-white:
   perturba fondo y tinta a la vez y tira por debajo de AA un par que queda justo en el borde
   (con el filtro el peor caso medido era 2.39). La respuesta al hover pasa a ser geometrica. */
.hg-btn-primary { background:var(--color-primary,var(--color-primary)); color:var(--color-primary-text,var(--surface-raised)); box-shadow:0 4px 12px color-mix(in srgb, var(--color-primary,var(--color-primary)) 30%, transparent); }
.hg-btn-primary:hover { transform:translateY(-1px); color:var(--color-primary-text,var(--surface-raised)); text-decoration:none; }
/* Vive SIEMPRE sobre el hero / el widget bento (fondos de marca con velo), asi que su
   tinta es la del hero y no --surface-raised, que en tema oscuro es casi negro y
   dejaba el boton ilegible sobre su propio fondo. */
.hg-btn-glass { background:color-mix(in srgb, #FFFFFF 15%, transparent); border-color:color-mix(in srgb, #FFFFFF 45%, transparent); color:var(--hg-ink,#FFFFFF); backdrop-filter:blur(4px); }
.hg-btn-glass:hover { background:color-mix(in srgb, #FFFFFF 30%, transparent); color:var(--hg-ink,#FFFFFF); text-decoration:none; }
/* El texto salia de --hg-2, que .hg-hero-nav fija a var(--color-primary): el primario
   CRUDO sobre --surface-raised falla AA en 5 de 8 temas en claro (Mantine 2.99, AntD
   4.10, Glass 4.02, Tailwind 4.47, Neobrutalism 2.78) y en 2 mas en oscuro (AntD 2.92,
   Glass 4.48). --color-primary-on-surface es ese mismo primario ya validado a 4.5:1
   contra --surface-raised por Program.cs, en claro y en oscuro. */
.hg-btn-white { background:var(--surface-raised); color:var(--color-primary-on-surface,var(--color-primary-active)); }
/* El `filter:brightness(.97)` atenuaba FONDO Y TINTA a la vez, y como --color-primary-on-surface
   sale del clamp justo en el borde (4.50-4.53 en media docena de temas), cualquier perturbacion
   lo tira por debajo: medido, 8 de 16 combinaciones caian bajo AA SOLO en el hover (peor 4.31,
   Glass oscuro) con el reposo pasando. La respuesta al hover pasa a ser geometrica (translateY,
   el mismo gesto de .hg-btn-primary): no toca ningun color, asi que el par ya validado queda
   intacto. Medido: 8/16 fallos (peor 4.31) -> 0/16 (peor 4.50). */
.hg-btn-white:hover { transform:translateY(-1px); text-decoration:none; }
/* Mismo par exacto que .hg-btn-white (primario sobre --surface-raised): es la otra
   rama del mismo QuickActions, la de fondo claro, y fallaba en los mismos 7 casos. */
.hg-btn-outline { background:var(--surface-raised,var(--surface-raised)); color:var(--color-primary-on-surface,var(--color-primary)); border-color:var(--border-color-strong); }
/* El hover volvia al --color-primary CRUDO una linea debajo del reposo ya corregido, y ademas
   sobre OTRA superficie (--color-primary-muted, no --surface-raised): fallaba AA en 10 de 16
   combinaciones (peor 2.51 Neobrutalism claro; 2.69 Mantine, 3.35 AntD oscuro, 3.44 Glass...).
   --color-primary-on-muted es ese mismo primario ya validado por Program.cs contra el muted YA
   COMPUESTO (el muted es translucido en Glass y en Mantine/Tailwind oscuros).
   Medido: 10/16 fallos (peor 2.51) -> 0/16 (peor 4.50). */
.hg-btn-outline:hover { background:var(--color-primary-muted,var(--color-primary-muted)); color:var(--color-primary-on-muted,var(--color-primary-on-surface)); text-decoration:none; }

/* ---- Hero ----
   CONTRASTE GARANTIZADO EN TODO EL DEGRADADO (arreglo 2026-08-28).
   Antes: color:var(--surface-raised) (BLANCO) sobre un degradado cuya primera parada
   era var(--hg-1) = var(--surface-base) = #FAFAFA en produccion. Texto blanco sobre
   casi-blanco: 1.00:1. Y .hg-hello no declaraba color propio, asi que heredaba ese
   blanco. Subir solo la primera parada no bastaba: el degradado tiene 3 paradas y
   cualquier tema puede traer un primario claro, asi que el saludo podia quedar
   ilegible en el medio del recorrido.
   ARREGLO DE RAIZ: un velo OPACO-PARCIAL uniforme (::after, rgba(8,12,24,.62)) tapa
   TODO el hero, paradas incluidas. Peor caso posible = parada blanca pura:
   0.62*#080C18 + 0.38*#FFFFFF = #666870, y texto #FFFFFF sobre #666870 = 5.54:1.
   Es decir: >= 5.5:1 en CUALQUIER punto del degradado y con CUALQUIER tema, sin
   depender de que el tema traiga colores oscuros. El brillo de marca sigue viendose
   al 38%. El contenido va en z-index:1, por encima del velo.
   El circulo decorativo dejo de ser un pseudo-elemento (ahora es una capa mas del
   background) para que quede DEBAJO del velo; el ::after esta ahora ocupado por el
   velo, que es quien debe pintarse ultimo sobre todo el fondo. */
.hg-hero {
  --hg-ink: #FFFFFF;                 /* tinta del hero: fija, porque el velo tambien lo es */
  position:relative; overflow:hidden; border-radius:var(--radius-2xl,24px); padding:28px 30px;
  color:var(--hg-ink);
  background:
    radial-gradient(circle at calc(100% - 90px) -20px, color-mix(in srgb, var(--color-primary) 32%, transparent), transparent 70%),
    linear-gradient(135deg,var(--hg-1,var(--surface-base)),var(--hg-2,var(--color-primary-active)) 55%,var(--hg-3,var(--color-primary)));
  box-shadow:var(--shadow-xl,0 24px 48px color-mix(in srgb, var(--text-primary) 12%, transparent));
}
.hg-hero::after { content:""; position:absolute; inset:0; background:rgba(8,12,24,.62); pointer-events:none; }
.hg-hero-top { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
/* Declara su color en vez de heredarlo: era la pieza que salia blanca sobre blanco. */
.hg-hello { font-family:var(--font-display,inherit); font-size:var(--text-4xl); font-weight:800; letter-spacing:var(--tracking-tight,-.02em); color:var(--hg-ink); }
/* Los textos secundarios usaban --color-primary-muted, que sobre el velo baja de 4.5.
   Se atenua la MISMA tinta al 88%: 4.73:1 en el peor caso medido arriba. */
.hg-date { margin-top:5px; font-size:var(--text-base); color:color-mix(in srgb, var(--hg-ink) 88%, transparent); text-transform:capitalize; }
.hg-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.hg-glass { position:relative; z-index:1; background:color-mix(in srgb, var(--surface-raised) 15%, transparent); border:1px solid color-mix(in srgb, var(--surface-raised) 15%, transparent); border-radius:var(--radius-lg,12px); padding:15px; backdrop-filter:blur(6px); color:var(--hg-ink); }
.hg-glass-v { font-family:var(--font-display,inherit); font-size:var(--text-3xl); font-weight:800; font-variant-numeric:tabular-nums; color:var(--hg-ink); }
.hg-glass-l { font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:var(--tracking-wider,.06em); color:color-mix(in srgb, var(--hg-ink) 88%, transparent); margin-top:5px; font-weight:600; }

/* ---- Section eyebrow ---- */
.hg-eyebrow { display:flex; align-items:center; gap:10px; margin:6px 2px 14px; }
.hg-eyebrow .kick { font-family:var(--font-display,inherit); font-weight:800; font-size:var(--text-xs); color:var(--color-primary,var(--color-primary)); letter-spacing:.03em; }
.hg-eyebrow .ttl { font-family:var(--font-display,inherit); font-weight:700; font-size:var(--text-lg); color:var(--text-primary,var(--text-primary)); }
.hg-eyebrow .rule { flex:1; height:1px; background:var(--border-color,var(--border-color)); }

/* =================== LAYOUT: Command Center =================== */
.hg-cmd { display:flex; flex-direction:column; gap:20px; }
/* repeat(4,1fr) FIJO dejaba 2 huecos con 6 KPIs (y 3 con 5). auto-fit + minmax rellena
   la fila con los que haya, igual que golden-kpi-grid con su data-count. */
.hg-cmd-kpis { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:24px; }
.hg-cmd-grid { display:grid; grid-template-columns:1.7fr 1fr; gap:var(--hg-gap); }
.hg-cmd-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--hg-gap); }

.hg-kpi-row { grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px) { .hg-kpi-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .hg-kpi-row { grid-template-columns:1fr; } }

/* =================== LAYOUT: Executive Brief =================== */
.hg-brief { display:flex; flex-direction:column; }
.hg-brief-hello { font-family:var(--font-display,inherit); font-size:var(--text-5xl); font-weight:800; letter-spacing:-.03em; color:var(--text-primary,var(--text-primary)); }
.hg-brief-hello .accent { color:var(--color-primary,var(--color-primary)); }
.hg-brief-summary { margin-top:10px; font-size:var(--text-lg); color:var(--text-secondary,var(--text-secondary)); max-width:64ch; }
.hg-brief-summary b { color:var(--text-primary,var(--text-primary)); font-weight:700; }
.hg-brief-meta { margin-top:13px; display:flex; gap:22px; flex-wrap:wrap; }
.hg-brief-meta .m { display:flex; align-items:center; gap:7px; font-size:var(--text-sm); color:var(--text-muted,var(--text-muted)); }
.hg-brief-meta .m .material-icons { font-size:15px; color:var(--color-primary,var(--color-primary)); }
.hg-brief-two { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--hg-gap); }
.hg-modlist { display:flex; flex-direction:column; background:var(--surface-raised,var(--surface-raised)); border:1px solid var(--border-color,var(--border-color)); border-radius:var(--radius-lg,12px); overflow:hidden; box-shadow:var(--shadow-sm,0 1px 3px color-mix(in srgb, var(--text-primary) 12%, transparent)); }
.hg-modrow { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--border-color,var(--border-color)); text-decoration:none; color:inherit; transition:background .15s; cursor:pointer; }
.hg-modrow:last-child { border-bottom:none; }
.hg-modrow:hover { background:var(--surface-sunken,var(--surface-sunken)); }
.hg-modrow .idx { font-family:var(--font-display,inherit); font-weight:800; font-size:var(--text-sm); color:var(--text-muted,var(--text-muted)); width:24px; }
.hg-modrow .nm { font-weight:700; font-size:var(--text-md); color:var(--text-primary,var(--text-primary)); flex:1; }
.hg-modrow .ct { font-size:var(--text-xs); color:var(--text-muted,var(--text-muted)); }
.hg-modrow .material-icons { color:var(--text-muted,var(--text-muted)); }

/* =================== LAYOUT: Bento =================== */
.hg-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(112px,auto); grid-auto-flow:dense; gap:var(--hg-gap); }
.hg-bento > * { border-radius:var(--radius-xl,16px); }
.hg-bento .hg-kpi { border-radius:var(--radius-xl,16px); display:flex; flex-direction:column; justify-content:center; }
/* Mismo defecto y mismo arreglo que .hg-hero: texto var(--surface-raised) sobre un
   degradado de primary->accent que ningun tema garantiza oscuro. Velo uniforme al
   62% => >=5.54:1 con cualquier tema; circulo decorativo movido al background para
   que quede debajo del velo. */
.hg-bw { --hg-ink:#FFFFFF; grid-column:span 2; position:relative; overflow:hidden; color:var(--hg-ink); background:radial-gradient(circle at calc(100% - 60px) calc(100% + 50px), color-mix(in srgb, #FFFFFF 15%, transparent), transparent 70%),linear-gradient(135deg,var(--color-primary),var(--color-accent,var(--color-primary))); padding:22px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow-lg,0 12px 28px color-mix(in srgb, var(--text-primary) 12%, transparent)); }
.hg-bw::after { content:""; position:absolute; inset:0; background:rgba(8,12,24,.62); pointer-events:none; }
.hg-bw h3 { font-family:var(--font-display,inherit); font-size:var(--text-3xl); font-weight:800; position:relative; z-index:1; color:var(--hg-ink); }
.hg-bw p { margin:6px 0 0; color:color-mix(in srgb, var(--hg-ink) 88%, transparent); font-size:var(--text-base); position:relative; z-index:1; }
.hg-bw .hg-btn { position:relative; z-index:1; align-self:flex-start; }
.hg-b-kpi { grid-column:span 1; }
.hg-b-chart { grid-column:span 2; grid-row:span 2; }
.hg-b-pend { grid-column:span 2; grid-row:span 2; }
.hg-b-donut { grid-column:span 2; }
.hg-b-mods { grid-column:span 4; }

/* ---- Responsive ---- */
@media (max-width:1024px) {
  .hg-cmd-grid, .hg-cmd-grid2, .hg-brief-two { grid-template-columns:1fr; }
  .hg-cmd-kpis { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  .hg-bento { grid-template-columns:repeat(2,1fr); }
  .hg-bento > * { grid-column:span 2 !important; grid-row:auto !important; }
  .hg-cmd-kpis { grid-template-columns:repeat(2,1fr); }
}

/* D-E6-403-009: KPI que el rol no puede ver. Se atenua y se marca, pero se MUESTRA:
   ocultarlo sin mas dejaria al usuario creyendo que el indicador no existe. */
.hg-kpi-sin-permiso { opacity: .72; border-style: dashed; }

/* HomePage — generated by Spartane DoIT */
.home-page { display:flex; flex-direction:column; gap:24px; max-width:1400px; margin:0 auto; padding:8px 0 40px; }
.home-greeting { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.greeting-text h1 { font-size:1.65rem; font-weight:700; color:var(--color-heading,var(--text-primary)); margin:0; }
.greeting-date { margin:4px 0 0; font-size:.85rem; color:var(--color-muted,var(--text-muted)); text-transform:capitalize; }
.greeting-actions { display:flex; gap:10px; }
.home-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius: var(--radius-md); font-size:.85rem; font-weight:600; text-decoration:none; transition:all .2s; cursor:pointer; }
.home-btn .material-icons { font-size:18px; }
.home-btn-primary { background:var(--color-primary-btn,var(--color-primary)); color:var(--surface-raised); border:none; }
.home-btn-primary:hover { background:var(--color-primary-btn-hover,var(--color-primary)); color:var(--surface-raised); text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.home-btn-outline { background:transparent; color:var(--color-primary-btn,var(--color-primary)); border:1.5px solid var(--color-primary-btn,var(--color-primary)); }
.home-btn-outline:hover { background:var(--color-primary-btn,var(--color-primary)); color:var(--surface-raised); text-decoration:none; }
.home-kpis { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:16px; align-items:stretch; }
.home-kpi-card { display:grid; grid-template-columns:minmax(0,1fr) 44px; grid-template-rows:auto 1fr; align-items:start; -moz-column-gap:12px; column-gap:12px; row-gap:8px; min-height:108px; padding:16px 18px 14px 20px; box-sizing:border-box; overflow:hidden; background:var(--color-card-bg,var(--surface-raised)); border-left:4px solid var(--color-success); border-radius: var(--radius-lg); box-shadow:0 1px 4px var(--color-card-shadow,color-mix(in srgb, var(--border-color) 65%, transparent)); transition:transform .2s,box-shadow .2s; }
.home-kpi-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px color-mix(in srgb, var(--text-primary) 8%, transparent); }
.home-kpi-content { display:contents; }
.home-kpi-value { grid-column:1; grid-row:1; font-size:1.5rem; font-weight:800; color:var(--color-heading,var(--text-primary)); line-height:1; }
.home-kpi-label { grid-column:1 / -1; grid-row:2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; font-size:.75rem; font-weight:600; text-transform:uppercase; color:var(--color-muted,var(--text-muted)); }
.home-kpi-icon-wrapper { grid-column:2; grid-row:1; width:44px; height:44px; border-radius: var(--radius-lg); display:flex; align-items:center; justify-content:center; justify-self:end; }
.home-kpi-icon-wrapper .material-icons { font-size:22px; }
.home-kpi-skeleton { opacity:.6; }
.home-kpi-skeleton-icon { grid-column:2; grid-row:1; width:44px; height:44px; border-radius: var(--radius-lg); background:var(--border-color); justify-self:end; }
.home-kpi-skeleton-lines { grid-column:1; grid-row:1 / span 2; display:flex; flex-direction:column; gap:6px; }
.home-kpi-skeleton-lines div { height:12px; background:var(--border-color); border-radius: var(--radius-sm); }
.home-kpi-skeleton-lines div:first-child { width:60px; height:20px; }
.home-kpi-skeleton-lines div:nth-child(2) { width:100px; }
.home-charts { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.chart-card { background:var(--color-card-bg,var(--surface-raised)); border-radius: var(--radius-lg); padding:20px; box-shadow:0 1px 4px var(--color-card-shadow,color-mix(in srgb, var(--border-color) 65%, transparent)); }
.chart-card-wide { grid-column: span 1; }
.chart-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.chart-header h3 { display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:700; color:var(--color-heading,var(--text-primary)); margin:0; }
.chart-header h3 .material-icons { font-size:20px; color:var(--color-muted,var(--text-muted)); }
.chart-subtitle { font-size:.75rem; color:var(--color-muted,var(--text-muted)); }
.home-middle-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.home-card { background:var(--color-card-bg,var(--surface-raised)); border-radius: var(--radius-lg); padding:20px; box-shadow:0 1px 4px var(--color-card-shadow,color-mix(in srgb, var(--border-color) 65%, transparent)); }
.card-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-title-row h3 { display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:700; color:var(--color-heading,var(--text-primary)); margin:0; }
.card-title-row h3 .material-icons { font-size:20px; color:var(--color-muted,var(--text-muted)); }
.card-link { font-size:.8rem; color:var(--color-primary-btn,var(--color-primary)); text-decoration:none; font-weight:600; }
.pendientes-list { display:flex; flex-direction:column; gap:2px; }
.pendiente-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius: var(--radius-md); text-decoration:none; color:inherit; transition:background .15s; }
.pendiente-item:hover { background:var(--surface-inset,var(--surface-inset)); text-decoration:none; color:inherit; }
.pendiente-priority { width:4px; height:36px; border-radius: var(--radius-sm); flex-shrink:0; }
.priority-alta { background:var(--color-danger); }
.priority-media { background:var(--color-warning); }
.priority-baja { background:var(--color-success); }
.pendiente-body { flex:1; min-width:0; }
.pendiente-titulo { display:block; font-size:.85rem; font-weight:600; color:var(--color-heading,var(--text-primary)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pendiente-meta { font-size:.73rem; color:var(--color-muted,var(--text-muted)); }
.pendiente-arrow { font-size:18px; color:var(--color-muted,var(--text-muted)); }
.home-middle-row-single { grid-template-columns:1fr; }
.home-modules-section { margin-top:8px; }
.section-header { margin-bottom:16px; }
.section-header h2 { display:flex; align-items:center; gap:8px; font-size:1.2rem; font-weight:700; color:var(--color-heading,var(--text-primary)); margin:0; }
.section-header h2 .material-icons { font-size:24px; color:var(--color-primary-btn,var(--color-primary)); }
.section-header p { margin:2px 0 0; font-size:.82rem; color:var(--color-muted,var(--text-muted)); }
.modules-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.module-card { background:var(--color-card-bg,var(--surface-raised)); border-radius: var(--radius-lg); box-shadow:0 1px 4px var(--color-card-shadow,color-mix(in srgb, var(--border-color) 65%, transparent)); overflow:hidden; transition:box-shadow .2s; }
.module-card:hover { box-shadow:0 4px 16px color-mix(in srgb, var(--text-primary) 8%, transparent); }
.module-card.expanded { box-shadow:0 4px 20px color-mix(in srgb, var(--text-primary) 12%, transparent); }
.module-card-header { display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; transition:background .15s; }
.module-card-header:hover { background:var(--color-background,var(--surface-sunken)); }
.module-icon-wrapper { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius: var(--radius-md); background:linear-gradient(135deg,var(--color-primary-btn,var(--color-primary)),var(--color-accent,var(--color-primary))); flex-shrink:0; }
.module-fa-icon { color:var(--surface-raised); font-size:18px; }
.module-info { flex:1; min-width:0; }
.module-name { font-size:.9rem; font-weight:700; color:var(--color-heading,var(--text-primary)); margin:0; line-height:1.25; }
.module-count { font-size:.73rem; color:var(--color-muted,var(--text-muted)); }
.module-expand-icon { font-size:22px; color:var(--color-muted,var(--text-muted)); }
.module-screens { display:flex; flex-direction:column; padding:0 12px 12px; animation:slideDown .25s ease; }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.screen-link { display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius: var(--radius-md); text-decoration:none; color:var(--color-text,var(--text-primary)); font-size:.82rem; font-weight:500; transition:all .15s; }
.screen-link:hover { background:var(--color-background,var(--surface-sunken)); color:var(--color-primary-btn,var(--color-primary)); text-decoration:none; transform:translateX(4px); }
.screen-link-icon { font-size:18px; color:var(--color-muted,var(--text-muted)); }
.screen-link:hover .screen-link-icon { color:var(--color-primary-btn,var(--color-primary)); }
.home-quick-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:8px; }
.quick-link-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 16px; background:var(--color-card-bg,var(--surface-raised)); border-radius: var(--radius-lg); box-shadow:0 1px 4px var(--color-card-shadow,color-mix(in srgb, var(--border-color) 65%, transparent)); text-decoration:none; color:var(--color-text,var(--text-primary)); font-size:.82rem; font-weight:600; text-align:center; transition:all .2s; }
.quick-link-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px color-mix(in srgb, var(--text-primary) 8%, transparent); color:var(--color-primary-btn,var(--color-primary)); text-decoration:none; }
.quick-link-card .material-icons { font-size:28px; color:var(--color-primary-btn,var(--color-primary)); }
@media(max-width:1024px) { .home-charts{grid-template-columns:1fr} .home-middle-row{grid-template-columns:1fr} .home-kpis{grid-template-columns:repeat(3, 1fr)} }
@media(max-width:768px) { .home-greeting{flex-direction:column;align-items:flex-start} .home-kpis{grid-template-columns:repeat(2,1fr)} .modules-grid{grid-template-columns:1fr} .greeting-text h1{font-size:1.3rem} }
@media(max-width:480px) { .home-kpis{grid-template-columns:1fr} .home-quick-links{grid-template-columns:repeat(2,1fr)} }
[data-bs-theme="dark"] .home-kpi-card,[data-bs-theme="dark"] .chart-card,[data-bs-theme="dark"] .home-card,[data-bs-theme="dark"] .module-card,[data-bs-theme="dark"] .quick-link-card { background:var(--surface-raised); box-shadow:0 1px 4px color-mix(in srgb, var(--text-primary) 32%, transparent); }
[data-bs-theme="dark"] .module-card-header:hover,[data-bs-theme="dark"] .pendiente-item:hover,[data-bs-theme="dark"] .screen-link:hover { background:var(--text-secondary); }

/* =========================================
   MIS INDICADORES — KPIs por rol (KPI Engine)
   Sigue el sistema visual de HomePage.css:
   variables --color-* con fallback claro y
   overrides [data-bs-theme="dark"].
   ========================================= */

.mis-indicadores {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

/* ─── Encabezado ─── */
.mi-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-heading, var(--text-primary));
  margin: 0;
  line-height: 1.2;
}

.mi-header h1 .material-icons {
  font-size: 28px;
  color: var(--color-primary-btn, var(--color-primary));
}

.mi-header p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--color-muted, var(--text-muted));
}

/* ─── Estados globales (cargando / vacío / error) ─── */
.mi-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 20px;
  background: var(--color-card-bg, var(--surface-raised));
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px var(--color-card-shadow, color-mix(in srgb, var(--border-color) 65%, transparent));
  color: var(--color-muted, var(--text-muted));
  font-size: 0.9rem;
  text-align: center;
}

.mi-estado-icon { font-size: 40px; }

.mi-spin { animation: mi-girar 1.2s linear infinite; }

@keyframes mi-girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Alertas activas ─── */
.mi-alertas {
  background: var(--color-card-bg, var(--surface-raised));
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 0 1px 4px var(--color-card-shadow, color-mix(in srgb, var(--border-color) 65%, transparent));
}

.mi-alertas-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mi-alertas-header .material-icons {
  font-size: 20px;
  color: var(--color-warning);
}

.mi-alertas-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-heading, var(--text-primary));
  margin: 0;
}

.mi-alertas-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-md);
  background: var(--color-danger);
  color: var(--surface-raised);
  font-size: 0.7rem;
  font-weight: 700;
}

.mi-alertas-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mi-alerta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  transition: background 0.15s;
}

.mi-alerta-item:hover { background: var(--surface-inset, var(--surface-inset)); }

.mi-alerta-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.mi-alerta-body {
  flex: 1;
  min-width: 0;
}

.mi-alerta-titulo {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-heading, var(--text-primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-alerta-meta {
  font-size: 0.73rem;
  color: var(--color-muted, var(--text-muted));
}

.mi-alerta-acciones {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Botones (mismo lenguaje que .home-btn) */
.mi-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.mi-btn:disabled { opacity: 0.55; cursor: default; }

.mi-btn .material-icons { font-size: 16px; }

.mi-btn-primary {
  background: var(--color-primary-btn, var(--color-primary));
  color: var(--surface-raised);
  border: none;
}

.mi-btn-primary:not(:disabled):hover {
  background: var(--color-primary-btn-hover, var(--color-primary));
}

.mi-btn-outline {
  background: transparent;
  color: var(--color-primary-btn, var(--color-primary));
  border: 1.5px solid var(--color-primary-btn, var(--color-primary));
}

.mi-btn-outline:not(:disabled):hover {
  background: var(--color-primary-btn, var(--color-primary));
  color: var(--surface-raised);
}

/* ─── Grid de tarjetas KPI ─── */
.mi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

.mi-card {
  background: var(--color-card-bg, var(--surface-raised));
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px var(--color-card-shadow, color-mix(in srgb, var(--border-color) 65%, transparent));
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.mi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.mi-card.expanded {
  grid-column: 1 / -1;
  transform: none;
}

.mi-card-main {
  position: relative;
  padding: 16px 18px 12px;
  cursor: pointer;
}

.mi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.mi-semaforo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.mi-semaforo-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.mi-chip {
  display: inline-block;
  max-width: 55%;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-inset, var(--surface-sunken));
  color: var(--color-muted, var(--text-muted));
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-card-nombre {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-heading, var(--text-primary));
  margin: 0 0 8px;
  line-height: 1.3;
}

.mi-card-valor-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mi-card-valor {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--color-heading, var(--text-primary));
  line-height: 1;
}

.mi-direccion {
  font-size: 18px;
  color: var(--color-muted, var(--text-muted));
}

.mi-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.mi-card-meta {
  font-size: 0.76rem;
  color: var(--color-muted, var(--text-muted));
}

.mi-card-meta strong { color: var(--color-heading, var(--text-primary)); }

.mi-card-fecha {
  font-size: 0.7rem;
  color: var(--color-muted, var(--text-muted));
}

.mi-card-sparkline {
  margin-top: 10px;
  color: var(--color-muted, var(--text-muted)); /* currentColor de la línea de referencia */
}

.mi-card-sparkline .mi-sparkline {
  display: block;
  width: 100%;
  height: 44px;
}

.mi-card-expand {
  position: absolute;
  right: 10px;
  bottom: 6px;
  color: var(--color-muted, var(--text-muted));
}

.mi-card-expand .material-icons { font-size: 20px; }

/* ─── Detalle expandible ─── */
.mi-card-detalle {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border-color, var(--border-color));
  animation: mi-slide-down 0.25s ease;
}

@keyframes mi-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mi-detalle-descripcion {
  margin: 0 0 14px;
  font-size: 0.84rem;
  color: var(--color-text, var(--text-primary));
  line-height: 1.5;
}

.mi-detalle-serie-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted, var(--text-muted));
}

.mi-detalle-frecuencia {
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.mi-detalle-serie {
  color: var(--color-muted, var(--text-muted)); /* currentColor de la línea de meta */
}

.mi-detalle-serie .mi-sparkline {
  display: block;
  width: 100%;
  height: 120px;
}

.mi-detalle-serie-estado {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  font-size: 0.82rem;
  color: var(--color-muted, var(--text-muted));
}

.mi-detalle-serie-estado .material-icons { font-size: 18px; }

.mi-detalle-ultima {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--color-muted, var(--text-muted));
}

.mi-detalle-ultima strong { color: var(--color-heading, var(--text-primary)); }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .mi-alerta-item {
    flex-wrap: wrap;
  }
  .mi-alerta-acciones {
    width: 100%;
    justify-content: flex-end;
  }
  .mi-grid { grid-template-columns: 1fr; }
}

/* ─── Dark mode (mismo criterio que HomePage.css) ─── */
[data-bs-theme="dark"] .mi-estado,
[data-bs-theme="dark"] .mi-alertas,
[data-bs-theme="dark"] .mi-card {
  background: var(--surface-raised);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text-primary) 32%, transparent);
}

[data-bs-theme="dark"] .mi-alerta-item:hover {
  background: var(--text-secondary);
}

[data-bs-theme="dark"] .mi-chip {
  background: var(--text-secondary);
  color: var(--text-muted);
}

[data-bs-theme="dark"] .mi-card-detalle {
  border-top-color: var(--text-secondary);
}

/* ===== DocumentEditor (Control_Type 51) — estilos autocontenidos ===== */

/* --- Campo colapsado (vista previa) --- */
.sp-doc-preview {
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 10px 12px;
}
.sp-doc-preview-error {
  border-color: var(--color-danger);
}
.sp-doc-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.sp-doc-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  background: var(--color-warning-muted);
  color: var(--color-warning-text);
}
.sp-doc-chip-final {
  background: var(--color-success-muted);
  color: var(--color-success-text);
}
.sp-doc-snapshots {
  font-size: 11px;
  color: var(--text-secondary);
}
.sp-doc-open-btn {
  margin-left: auto;
  border: 1px solid var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.sp-doc-open-btn:hover {
  background: var(--color-primary-active);
}
.sp-doc-excerpt {
  font-size: 12px;
  color: var(--text-secondary);
  max-height: 54px;
  overflow: hidden;
  white-space: pre-line;
}

/* --- Overlay a pantalla completa --- */
.sp-de-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--text-primary) 12%, transparent);
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 12px;
}
.sp-de-window {
  background: var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--text-primary) 50%, transparent);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1280px;
  overflow: hidden;
}
.sp-de-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary-hover);
  color: var(--surface-raised);
  padding: 8px 14px;
}
.sp-de-title {
  font-weight: 700;
  font-size: 14px;
}
.sp-de-spacer {
  flex: 1;
}
.sp-de-busy {
  font-size: 12px;
  opacity: 0.9;
}
.sp-de-primary {
  background: var(--surface-raised);
  color: var(--color-primary-hover);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.sp-de-close {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--surface-raised) 45%, transparent);
  color: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
}
.sp-de-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-color-strong);
  padding: 6px 10px;
}
.sp-de-btn {
  min-width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  padding: 0 6px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.sp-de-btn:hover:not(:disabled) {
  background: var(--surface-inset);
  border-color: var(--border-color);
}
.sp-de-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.sp-de-btn-active {
  background: var(--color-primary-muted) !important;
  border-color: var(--color-primary-muted) !important;
}
.sp-de-select {
  height: 28px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 190px;
}
.sp-de-select-font {
  width: 165px;
}
.sp-de-sep {
  width: 1px;
  height: 22px;
  background: var(--border-color);
  margin: 0 6px;
}
.sp-de-plantillas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--surface-inset);
  border-bottom: 1px solid var(--border-color-strong);
  padding: 8px 12px;
  font-size: 12px;
}
.sp-de-plantillas button {
  border: 1px solid var(--border-color-strong);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
}
.sp-de-plantillas button:hover {
  background: var(--surface-inset);
}
.sp-de-plantillas-close {
  margin-left: auto;
}
.sp-de-statusbar {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--color-primary-hover);
  color: var(--surface-raised);
  font-size: 11px;
  padding: 4px 14px;
}

/* --- Lienzo y páginas --- */
.sp-canvas {
  flex: 1;
  overflow: auto;
  background: var(--border-color);
}
.sp-zoom-outer {
  margin: 20px auto;
  position: relative;
}
.sp-zoom-inner {
  position: relative;
}
.sp-stack {
  background: var(--surface-raised);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--text-primary) 32%, transparent);
  position: relative;
  box-sizing: border-box;
}
.sp-chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sp-page-gap {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.sp-gap-band {
  background: var(--border-color);
  box-shadow:
    inset 0 5px 6px -5px color-mix(in srgb, var(--text-primary) 50%, transparent),
    inset 0 -4px 5px -4px color-mix(in srgb, var(--text-primary) 32%, transparent);
}
.sp-page-endfill {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Encabezado / pie (pantalla e impresión comparten clases) */
.sp-hf {
  display: flex;
  font-family: 'Carlito', sans-serif;
  font-size: 9pt;
  color: var(--text-secondary);
  align-items: flex-end;
  gap: 8px;
  overflow: hidden;
  box-sizing: border-box;
}
.sp-header {
  align-items: flex-end;
  padding-bottom: 12px;
}
.sp-header-logo {
  height: 24px;
  width: auto;
}
.sp-footer {
  align-items: flex-start;
  padding-top: 12px;
  justify-content: space-between;
}

/* --- Tipografía del documento (pantalla + impresión + snapshot PDF) --- */
.sp-typo {
  font-family: 'Carlito', sans-serif;
  font-size: 11pt;
  line-height: 1.15;
  color: var(--text-primary);
  word-wrap: break-word;
}
.sp-typo:focus,
.sp-typo:focus-visible {
  outline: none;
}
.sp-typo p {
  margin: 0 0 8pt;
}
.sp-typo h1 {
  font-size: 16pt;
  color: var(--color-primary);
  font-weight: 400;
  margin: 0 0 8pt;
}
.sp-typo h2 {
  font-size: 13pt;
  color: var(--color-primary);
  font-weight: 400;
  margin: 0 0 8pt;
}
.sp-typo h3 {
  font-size: 12pt;
  color: var(--color-primary-active);
  font-weight: 700;
  margin: 0 0 8pt;
}
.sp-typo ul,
.sp-typo ol {
  margin: 0 0 8pt;
  padding-left: 0.4in;
}
.sp-typo ul ul,
.sp-typo ol ol,
.sp-typo ul ol,
.sp-typo ol ul {
  margin-bottom: 0;
}
.sp-typo li > p {
  margin: 0 0 2pt;
}
.sp-typo table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 8pt;
  table-layout: fixed;
}
.sp-typo td,
.sp-typo th {
  border: 1px solid var(--border-color-strong);
  padding: 3pt 6pt;
  vertical-align: top;
  position: relative;
}
.sp-typo th {
  background: var(--surface-inset);
  text-align: left;
}
.sp-typo td > p:last-child,
.sp-typo th > p:last-child {
  margin-bottom: 0;
}
.sp-typo .selectedCell::after {
  z-index: 2;
  position: absolute;
  content: '';
  inset: 0;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  pointer-events: none;
}
.sp-typo img {
  max-width: 100%;
  height: auto;
}
.sp-typo img.ProseMirror-selectednode {
  outline: 2px solid var(--color-primary);
}
.sp-typo hr {
  border: none;
  border-top: 1px solid var(--text-muted);
  margin: 0 0 8pt;
}
.sp-typo a {
  color: var(--text-link);
  text-decoration: underline;
}
.sp-typo blockquote {
  margin: 0 0 8pt;
  padding-left: 0.3in;
  border-left: 3px solid var(--border-color-strong);
  color: var(--text-secondary);
}
.sp-typo pre {
  font-family: 'Cousine', monospace;
  font-size: 10pt;
  background: var(--surface-inset);
  padding: 6pt;
  margin: 0 0 8pt;
  white-space: pre-wrap;
}

/* Campos del sistema y zonas bloqueadas */
.sp-datafield {
  background: var(--surface-inset);
  border-bottom: 1px dotted var(--border-color-strong);
  border-radius: var(--radius-xs);
}
.sp-locked {
  border-left: 3px solid var(--border-color);
  background: var(--surface-inset);
  padding: 4px 8px 2px 12px;
  margin: 0 0 8pt;
  position: relative;
}
.sp-locked::after {
  content: '🔒';
  position: absolute;
  top: 3px;
  right: 6px;
  font-size: 10px;
  opacity: 0.55;
}

/* Salto de página manual */
.sp-pagebreak {
  border-top: 2px dashed var(--border-color);
  margin: 6px 0 10px;
  position: relative;
  height: 12px;
}
.sp-pagebreak-label {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 8pt;
  padding: 0 8px;
}
.sp-pagebreak.ProseMirror-selectednode {
  outline: 2px solid var(--color-primary);
}

/* ===== Impresión 1:1 ===== */
#sp-doc-print-root {
  display: none;
}
.sp-print-page {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
  -moz-column-break-after: page;
       break-after: page;
  page-break-after: always;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sp-print-page:last-child {
  -moz-column-break-after: auto;
       break-after: auto;
  page-break-after: auto;
}
.sp-print-abs-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.sp-print-abs-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Snapshot PDF (html2canvas renderiza con estilos de PANTALLA): quitar el adorno
   de campos/zonas conservando su geometría, igual que en la impresión. */
.sp-snapshot .sp-datafield {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
.sp-snapshot .sp-locked {
  background: transparent !important;
  border-left-color: transparent !important;
}
.sp-snapshot .sp-locked::after {
  display: none !important;
}

@media print {
  body.sp-doc-printing {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface-raised) !important;
  }
  body.sp-doc-printing #root {
    display: none !important;
  }
  body.sp-doc-printing #sp-doc-print-root {
    display: block !important;
  }
  /* El adorno de pantalla no se imprime; su GEOMETRÍA se conserva (colores
     transparentes, no display:none) para no mover el texto. */
  body.sp-doc-printing .sp-datafield {
    background: transparent !important;
    border-bottom-color: transparent !important;
  }
  body.sp-doc-printing .sp-locked {
    background: transparent !important;
    border-left-color: transparent !important;
  }
  body.sp-doc-printing .sp-locked::after {
    display: none !important;
  }
}

/* ============================================================
   print.css — Estilos base del sistema de impresión multi-país
   Spartane DoIT v3
   ============================================================ */

/* ── Botón trigger (no se imprime) ───────────────────────────── */
.print-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.15s;
}
.print-trigger-btn:hover { background: var(--surface-inset); }

@media print {
  .print-trigger-btn { display: none !important; }
}

/* ── Área imprimible ──────────────────────────────────────────── */
.printable-document {
  font-family: 'Arial', sans-serif;
  font-size: 10pt;
  color: var(--text-primary);
  background: var(--surface-raised);
  padding: 12mm;
  box-sizing: border-box;
  width: 100%;
}

/* Tamaño de papel */
.printable-document--a4        { max-width: 210mm; min-height: 297mm; }
.printable-document--letter    { max-width: 216mm; min-height: 279mm; }
.printable-document--thermal_80mm { max-width: 80mm; padding: 2mm; font-size: 8pt; }

/* ── Encabezado ───────────────────────────────────────────────── */
.print-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 2px solid var(--text-secondary);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.print-header__logo img { max-height: 40px; }
.print-header__doc-type { font-size: 16pt; font-weight: 700; margin: 0; }
.print-header__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 9pt; color: var(--text-secondary); }
.print-header__uuid { font-size: 7pt; color: var(--text-secondary); word-break: break-all; margin-top: 4px; }
.print-header__label { font-weight: 600; }

/* ── Partes (emisor / receptor) ───────────────────────────────── */
.print-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.print-party { font-size: 9pt; }
.print-party__title { font-weight: 700; font-size: 8pt; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 2px; border-bottom: 1px solid var(--border-color); padding-bottom: 2px; }
.print-party__name  { font-weight: 600; margin: 2px 0; }
.print-party__fiscal, .print-party__address, .print-party__city,
.print-party__email, .print-party__phone, .print-party__extra { margin: 1px 0; }
.print-party__label { font-weight: 600; }

/* Ajuste para ticket térmico: una columna */
.printable-document--thermal_80mm .print-parties { grid-template-columns: 1fr; }

/* ── Líneas / conceptos ───────────────────────────────────────── */
.print-lines { margin-bottom: 8px; overflow-x: auto; }
.print-lines__table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.print-lines__th {
  background: var(--text-secondary); color: var(--surface-raised); padding: 3px 5px;
  text-align: left; font-weight: 600; white-space: nowrap;
}
.print-lines__td { padding: 3px 5px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.print-lines__td--right { text-align: right; white-space: nowrap; }
.print-lines__td--bold  { font-weight: 700; }
.print-lines__td--desc  { max-width: 200px; }

/* Filas alternas */
.print-lines__row:nth-child(even) .print-lines__td { background: var(--surface-inset); }

/* ── Totales ──────────────────────────────────────────────────── */
.print-totals {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  page-break-inside: avoid;
}
.print-totals__notes { flex: 1; font-size: 9pt; color: var(--text-secondary); }
.print-totals__notas { font-style: italic; margin-top: 4px; }
.print-totals__amounts { min-width: 240px; }
.print-totals__row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 9pt;
}
.print-totals__row--total {
  border-top: 2px solid var(--text-secondary);
  border-bottom: none;
  margin-top: 2px;
  padding-top: 4px;
}
.print-totals__label { color: var(--text-secondary); }
.print-totals__label--total { font-weight: 700; font-size: 10pt; }
.print-totals__value--total { font-weight: 700; font-size: 10pt; }

/* ── Sello / verificación ─────────────────────────────────────── */
.print-seal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--text-muted);
  font-size: 7pt;
  color: var(--text-secondary);
  page-break-inside: avoid;
}
.print-seal__label { font-weight: 600; }
.print-seal__url { word-break: break-all; font-size: 6.5pt; }
.print-seal__qr-img { width: 60px; height: 60px; }
.print-seal__standard { font-size: 6pt; color: var(--text-muted); margin-top: 4px; }

/* ── Reglas de impresión ──────────────────────────────────────── */
@media print {
  .printable-document { padding: 0; }
  .print-lines__table { page-break-inside: auto; }
  .print-lines__row   { page-break-inside: avoid; }
}

.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--text-primary) 50%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 3rem;
  height: 3rem;
  border: 0.25rem solid var(--surface-raised);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* Modal de re-login in-place. z-index por encima del spinner global (9999) para que
   quede visible mientras el spinner corre durante la autenticación. */
.relogin-overlay {
  position: fixed;
  inset: 0;
  background-color: color-mix(in srgb, var(--text-primary) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}

.relogin-modal {
  width: 100%;
  max-width: 380px;
  background-color: var(--color-card-bg, var(--surface-raised));
  color: var(--color-text, var(--text-primary));
  border: 1px solid var(--color-border, var(--border-color));
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-2xl, 0 25px 50px -12px color-mix(in srgb, var(--text-primary) 12%, transparent));
  padding: 1.75rem;
}

.relogin-title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-heading, var(--text-primary));
}

.relogin-subtitle {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-secondary, var(--text-secondary));
}

.relogin-error {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--color-danger, var(--color-danger));
}

.relogin-field {
  margin-bottom: 1rem;
}

.relogin-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text, var(--text-primary));
}

.relogin-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  color: var(--color-text, var(--text-primary));
  background-color: var(--color-background, var(--surface-raised));
  border: 1px solid var(--color-border, var(--border-color));
  border-radius: var(--radius-md, 8px);
}

.relogin-field input:focus {
  outline: none;
  border-color: var(--border-color-focus, var(--color-primary));
}

.relogin-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.relogin-password-wrapper input {
  padding-right: 2.4rem;
}

.relogin-password-toggle {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, var(--text-secondary));
  padding: 0.25rem;
}

.relogin-submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-text, var(--surface-raised));
  background-color: var(--color-primary, var(--color-primary));
  border: none;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
}

.relogin-submit:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.relogin-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Hanken Grotesk, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.-bottom-7 {
  bottom: -1.75rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-2 {
  bottom: 0.5rem;
}
.left-0 {
  left: 0px;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-5 {
  top: 1.25rem;
}
.z-10 {
  z-index: 10;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-12 {
  margin-left: 3rem;
  margin-right: 3rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-full {
  height: 100%;
}
.max-h-36 {
  max-height: 9rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[240px\] {
  max-height: 240px;
}
.max-h-full {
  max-height: 100%;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[2\.25rem\] {
  min-height: 2.25rem;
}
.min-h-\[20px\] {
  min-height: 20px;
}
.min-h-\[28px\] {
  min-height: 28px;
}
.min-h-\[36px\] {
  min-height: 36px;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[50px\] {
  min-height: 50px;
}
.min-h-\[52px\] {
  min-height: 52px;
}
.min-h-\[90px\] {
  min-height: 90px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0\.5 {
  width: 0.125rem;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[18px\] {
  min-width: 18px;
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-\[36px\] {
  min-width: 36px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.max-w-\[75\%\] {
  max-width: 75%;
}
.max-w-full {
  max-width: 100%;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-8 {
  --tw-translate-x: 2rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.cursor-zoom-out {
  cursor: zoom-out;
}
.touch-none {
  touch-action: none;
}
.touch-manipulation {
  touch-action: manipulation;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.list-disc {
  list-style-type: disc;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-0 {
  border-left-width: 0px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-cyan-300 {
  --tw-border-opacity: 1;
  border-color: rgb(103 232 249 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-primary {
  border-color: var(--color-primary, #1e3a5f);
}
.border-purple-300 {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-rose-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-l-blue-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-50\/50 {
  background-color: rgb(249 250 251 / 0.5);
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-primary {
  background-color: var(--color-primary, #1e3a5f);
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.fill-gray-800 {
  fill: #1f2937;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-16 {
  padding-right: 4rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-none {
  line-height: 1;
}
.leading-snug {
  line-height: 1.375;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-accent {
  color: var(--color-accent, #22c55e);
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-cyan-800 {
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-error {
  --tw-text-opacity: 1;
  color: rgb(211 47 47 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-200 {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-indigo-900 {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}
.text-primary {
  color: var(--color-primary, #1e3a5f);
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.accent-blue-600 {
  accent-color: #2563eb;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_2px_rgba\(239\2c 68\2c 68\2c 0\.6\)\] {
  --tw-shadow: 0 0 6px 2px rgba(239,68,68,0.6);
  --tw-shadow-colored: 0 0 6px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_2px_rgba\(250\2c 204\2c 21\2c 0\.6\)\] {
  --tw-shadow: 0 0 6px 2px rgba(250,204,21,0.6);
  --tw-shadow-colored: 0 0 6px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_2px_rgba\(34\2c 197\2c 94\2c 0\.6\)\] {
  --tw-shadow: 0 0 6px 2px rgba(34,197,94,0.6);
  --tw-shadow-colored: 0 0 6px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-blue-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.\[a-zA-Z0-9_\:\(\)\.-\] {
  a-z-a--z0-9_: ().-;
}
.\[a-zA-Z0-9_\:\(\)\.\\-\] {
  a-z-a--z0-9_: ().\-;
}
.\[criticidad\:texto\] {
  criticidad: texto;
}

/* =========================================================================
   SPARTANE — DESIGN SYSTEM PREMIUM v3.0
   Enterprise Premium de Alta Productividad
   =========================================================================
   Arquitectura de capas:
   1. Primitivos   — valores brutos
   2. Semánticos   — rol y función
   3. Componentes  — variables específicas
   4. Estilos      — clases CSS
   5. Layout       — estructura shell
   6. Animaciones  — keyframes + motion
   7. Dark mode    — overrides semánticos
   ========================================================================= */

/* =========================================================================
   FONTS (SEGURIDAD #46)
   Manrope y Space Grotesk se auto-hospedan via @fontsource/* importadas en
   src/main.tsx. Se elimino el @import de fonts.googleapis.com (CDN de terceros).
   ========================================================================= */

/* =========================================================================
   1. TOKENS PRIMITIVOS
   ========================================================================= */
:root {
  /* ── Paleta Azul Premium ──────────────────────────────────────── */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --blue-950: #172554;

  /* ── Paleta Neutral ──────────────────────────────────────────── */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-150: #EAEFF5;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;
  --neutral-950: #020617;

  /* ── Estados semánticos ──────────────────────────────────────── */
  --green-50:  #F0FDF4; --green-100: #DCFCE7; --green-500: #22C55E; --green-600: #16A34A; --green-700: #15803D;
  --yellow-50: #FFFBEB; --yellow-100:#FEF3C7; --yellow-500:#F59E0B; --yellow-600:#D97706; --yellow-700:#B45309;
  --red-50:    #FFF1F2; --red-100:   #FFE4E6; --red-500:   #EF4444; --red-600:   #DC2626; --red-700:   #B91C1C;
  --violet-50: #F5F3FF; --violet-500:#8B5CF6; --violet-600:#7C3AED;
  --cyan-50:   #ECFEFF; --cyan-500:  #06B6D4; --cyan-600:  #0891B2;
  --orange-50: #FFF7ED; --orange-500:#F97316; --orange-600:#EA580C;

  /* =========================================================================
     2. TOKENS SEMÁNTICOS (Light Mode)
     ========================================================================= */

  /* ── Brand / Primary ──────────────────────────────────────────── */
  --color-primary:         #1D4ED8;
  --color-primary-hover:   #1E40AF;
  --color-primary-active:  #1E3A8A;
  --color-primary-muted:   #DBEAFE;
  --color-primary-text:    #FFFFFF;

  /* ── Accent ───────────────────────────────────────────────────── */
  --color-accent:          #2563EB;
  --color-accent-hover:    #1D4ED8;

  /* ── Secundario de marca ──────────────────────────────────────── */
  --color-secondary:       #475569;
  --color-secondary-hover: #334155;

  /* ── Danger/Error ─────────────────────────────────────────────── */
  --color-danger:          #DC2626;
  --color-danger-hover:    #B91C1C;
  --color-danger-muted:    #FEE2E2;
  --color-danger-text:     #7F1D1D;

  /* ── Success ──────────────────────────────────────────────────── */
  --color-success:         #16A34A;
  --color-success-hover:   #15803D;
  --color-success-muted:   #DCFCE7;
  --color-success-text:    #14532D;

  /* ── Warning ──────────────────────────────────────────────────── */
  --color-warning:         #D97706;
  --color-warning-hover:   #B45309;
  --color-warning-muted:   #FEF3C7;
  --color-warning-text:    #78350F;

  /* ── Info ─────────────────────────────────────────────────────── */
  --color-info:            #0891B2;
  --color-info-hover:      #0E7490;
  --color-info-muted:      #CFFAFE;
  --color-info-text:       #164E63;

  /* ── Colores semánticos PINTADOS COMO TEXTO ───────────────────────
     --color-danger/success/warning/info son colores de MARCA: sirven para
     rellenar, no para escribir. main.css los usaba como tinta en
     .ui-inline-error, .ui-formfield-req y .ui-alertbar-more, donde daban
     2.41–4.03 con los 8 temas reales. Estos son la versión validada: -on-surface
     contra las superficies de cuerpo, -on-muted contra el fondo suave del propio
     estado. AplicarTemaCss emite los mismos nombres por tema. */
  --color-danger-on-surface:  #D72323;
  --color-danger-on-muted:    #CC2121;
  --color-success-on-surface: #117F3A;
  --color-success-on-muted:   #11813A;
  --color-warning-on-surface: #A65B05;
  --color-warning-on-muted:   #A75C05;
  --color-info-on-surface:    #077894;
  --color-info-on-muted:      #077894;

  /* ── Avatar de iniciales ──────────────────────────────────────────
     El fondo lo elige el runtime entre 6 colores de marca (hash del nombre), así
     que ninguna regla CSS sabe cuál toca y no hay una tinta que cumpla contra los
     seis. Mismo remedio que el hero (.hg-hero::after): un velo opaco-parcial por
     encima del fondo y por debajo del texto, con el alfa MÍNIMO que deja la tinta
     en ≥4.5:1 sobre los seis. AplicarTemaCss recalcula los dos por tema. */
  --avatar-ink:   #FFFFFF;
  --avatar-scrim: #0000002D;

  /* ── Superficies ──────────────────────────────────────────────── */
  --surface-base:     #F1F5F9;
  --surface-raised:   #FFFFFF;
  --surface-overlay:  #FFFFFF;
  --surface-inset:    #F8FAFC;
  --surface-sunken:   #EFF2F6;
  --surface-hover:    #F1F5F9;
  --table-header-bg:  #F8FAFC;

  /* ── Densidad (la marca el tema; la retícula --space-* NO) ────── */
  /* Ver docs/CONTRATO-TOKENS.md §3.7: --space-* es una retícula geométrica de
     4px y se queda fija; la densidad de un tema entra por estos cuatro. Los
     alimenta AplicarTemaCss desde components.input/card/modal del tema. */
  --control-h:  38px;
  --row-h:      38px;
  --card-pad:   var(--space-6);
  --modal-pad:  var(--space-6);

  /* ── Tarjeta y botón (los define components.card/button del tema) ── */
  --card-shadow:    var(--shadow-sm);
  --card-border:    1px solid var(--border-color);
  --btn-transform:  none;

  /* ── Texto ────────────────────────────────────────────────────────
     Los cuatro valores están validados a ≥4.5:1 contra las CUATRO superficies
     de cuerpo (--surface-raised #FFFFFF, --surface-base #F1F5F9,
     --surface-inset #F8FAFC y --surface-sunken #EFF2F6), no solo contra la
     tarjeta blanca. --text-muted era #64748B (4.35 sobre --surface-base) y
     --text-disabled era #94A3B8 (2.66 sobre blanco) — este último es el que
     pintaba el ícono de orden de tabla, el del estado vacío y el punto del
     semáforo, que NO son controles inhabilitados. Peor par medido ahora: 4.50. */
  --text-primary:   #0F172A;
  --text-secondary: #334155;
  --text-muted:     #606F85;
  --text-disabled:  #5D708B;
  --text-inverse:   #FFFFFF;
  --text-link:      #2563EB;
  --text-link-hover:#1D4ED8;

  /* ── Bordes ───────────────────────────────────────────────────── */
  --border-color:        #E2E8F0;
  --border-color-strong: #CBD5E1;
  --border-color-focus:  #3B82F6;
  --border-color-error:  #EF4444;
  --border-color-success:#22C55E;

  /* ── Elevación / Sombras ──────────────────────────────────────── */
  --shadow-xs:   0 1px 2px 0 color-mix(in srgb, var(--text-primary) 25%, transparent);
  --shadow-sm:   0 1px 3px 0 color-mix(in srgb, var(--text-primary) 25%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--text-primary) 25%, transparent);
  --shadow-md:   0 4px 6px -1px color-mix(in srgb, var(--text-primary) 25%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--text-primary) 25%, transparent);
  --shadow-lg:   0 10px 15px -3px color-mix(in srgb, var(--text-primary) 25%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--text-primary) 25%, transparent);
  --shadow-xl:   0 20px 25px -5px color-mix(in srgb, var(--text-primary) 25%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--text-primary) 25%, transparent);
  --shadow-2xl:  0 25px 50px -12px color-mix(in srgb, var(--text-primary) 25%, transparent);
  --shadow-inner:inset 0 2px 4px 0 color-mix(in srgb, var(--text-primary) 25%, transparent);

  /* ── Motion ──────────────────────────────────────────────────── */
  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --duration-slower:  450ms;
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Tipografía ──────────────────────────────────────────────── */
  --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Peldano micro para rotulos en MAYUSCULAS (eyebrows, etiquetas de KPI de vidrio).
     Se agrego el 2026-08-28 al unificar home-golden.css, que tenia .66/.68/.70rem
     sueltos: sin este escalon habria habido que subirlos a 12px o dejarlos fuera. */
  --text-2xs:  0.6875rem; /* 11px */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md:   0.9375rem; /* 15px */
  --text-lg:   1rem;      /* 16px */
  --text-xl:   1.125rem;  /* 18px */
  --text-2xl:  1.25rem;   /* 20px */
  --text-3xl:  1.5rem;    /* 24px */
  --text-4xl:  1.875rem;  /* 30px */
  --text-5xl:  2.25rem;   /* 36px */

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;

  /* ── Espaciado (base 4px grid) ───────────────────────────────── */
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;

  /* ── Radio ───────────────────────────────────────────────────── */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full:9999px;

  /* ── Z-index ─────────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-popover:  500;
  --z-toast:    600;

  /* ── Layout Shell ────────────────────────────────────────────── */
  --sidebar-width:           256px;
  --sidebar-collapsed-width:  68px;
  --topbar-height:            64px;
  --content-max-width:      1440px;

  /* ── Compatibilidad legacy ───────────────────────────────────── */
  --color-background:     var(--surface-base);
  --color-text:           var(--text-primary);
  --color-white:          var(--surface-raised);
  --color-card-bg:        var(--surface-raised);
  --color-input-border:   var(--border-color);
  --color-heading:        var(--text-primary);
  --color-label:          var(--text-secondary);
  --color-muted:          var(--text-muted);
  --color-link:           var(--text-link);
  --color-link-hover:     var(--text-link-hover);
  --color-card-shadow:    color-mix(in srgb, var(--text-primary) 25%, transparent);
  --color-border:         var(--border-color);
  --color-form-control-bg:var(--surface-raised);
  --color-form-control-border: var(--border-color);
  --color-form-control-text:   var(--text-primary);
  --color-input-focus:    rgba(59, 130, 246, 0.15);
  --font-family-primary:  var(--font-sans);
  --font-family-secondary:var(--font-sans);
  --font-size-base:       var(--text-base);
  --font-weight-bold:     var(--weight-semibold);
  --line-height-base:     var(--leading-normal);
  --border-radius:        var(--radius-lg);
  --border-radius-sm:     var(--radius-sm);
  --border-radius-lg:     var(--radius-xl);
  --border-radius-input:  var(--radius-md);
  --padding-container:    var(--space-6);
  --margin-section:       var(--space-5);
  --shadow:               var(--shadow-sm);
  --shadow-login:         var(--shadow-xl);

  /* ── Sidebar tema ────────────────────────────────────────────── */
  --sidebar-bg:               #0F1729;
  --sidebar-menu-color:       #94A3B8;
  --sidebar-menu-active-bg:   #1E2D45;
  --sidebar-menu-active-color:#FFFFFF;
  /* #64748B daba 3.76:1 sobre #0F1729 (AA pide 4.5). Se ajusta lo minimo
     conservando el matiz: #718199 = 4.51:1 sobre #0F1729 y 4.86:1 sobre #080E1C. */
  --sidebar-category-color:   #718199;
  --sidebar-submenu-color:    #CBD5E1;
  /* Texto del menu lateral. UN solo token para todas las piezas de la barra
     (.menu-item, .menu-text, .menu-icon, .expand-icon, .sidebar-logo-text...).
     Antes cada regla llevaba este claro a mano: pensado para el navy de arriba,
     sobre la barra BLANCA del tema Material (429 proyectos) daba 1.20:1.
     Program.cs (AplicarTemaCss) lo sobreescribe por proyecto con el textColor del
     tema YA validado a 4.5:1 contra components.sidebar.bg; este valor es el
     respaldo para el navy por defecto (11.39:1). */
  --sidebar-text:             rgba(226, 232, 240, 0.88);

  /* ── Topbar ──────────────────────────────────────────────────── */
  --topbar-bg:         #FFFFFF;
  --topbar-link-color: #64748B;
  --topbar-border:     #E2E8F0;

  /* ── Content ─────────────────────────────────────────────────── */
  --content-bg:        #F1F5F9;
  --card-border-radius:var(--radius-lg);

  /* ── Legacy extra ────────────────────────────────────────────── */
  --color-primary-btn:       var(--color-primary);
  --color-primary-btn-hover: var(--color-primary-hover);
  --color-dropdown-bg:       var(--surface-overlay);
  --color-dropdown-border:   var(--border-color);
  --color-dropdown-item:     var(--text-primary);
  --color-dropdown-item-hover: var(--text-primary);
  --color-dropdown-item-hover-bg: var(--neutral-100);
  --color-status-indicator:  var(--neutral-200);
  --color-topbar-divider:    var(--border-color);
  --color-bg-light:          var(--surface-inset);
  --color-bg-primary:        var(--color-primary);
  --color-bg-success:        var(--color-success);
  --color-bg-warning:        var(--color-warning);
  --color-shadow:            color-mix(in srgb, var(--text-primary) 25%, transparent);
  --color-gray-400:          var(--neutral-300);
  --color-gray-500:          var(--neutral-400);
  --color-gray-600:          var(--neutral-500);
  /* AQUI HABIA CINCO PROPIEDADES AUTORREFERENCIALES (borradas 2026-08-29): cada una se daba
     como valor un var() de SI MISMA. Eran --color-danger-hover, --color-success-hover,
     --color-warning-hover, --color-info-hover y --color-info.
     (El ejemplo NO se transcribe literal a proposito: una sonda que censa declaraciones lo
     leeria como una autorreferencia viva aunque este dentro de un comentario.)
     Una custom property que se referencia A SI MISMA dentro del mismo :root es un ciclo:
     por CSS Custom Properties §3 queda *guaranteed-invalid at computed-value time*, o sea
     SIN valor util. Y como esta cascada va DESPUES, cada una anulaba la definicion buena
     que ya existia arriba en el bloque de colores semanticos:
       --color-danger-hover  #B91C1C (L86)   --color-success-hover #15803D (L92)
       --color-warning-hover #B45309 (L98)   --color-info-hover    #0E7490 (L104)
       --color-info          #0891B2 (L103)
     El caso grave era --color-info: se consume como COLOR DE TEXTO (.text-info,
     .confirm-dialog-icon.info, .dg-btn-icon.btn-icon-info) y es de la que depende el punto
     del semaforo en los valores blue/cyan; quedaba transparente. Hoy lo tapaba _theme.css,
     que se importa despues y que los 8 temas si pueblan — pero un tema sin la clave `info`
     se queda sin respaldo, porque el emisor de Program.cs hace `continue` y no la emite.
     ARREGLO = BORRARLAS (R1: la fuente canonica es el bloque semantico de arriba). No se
     derivan de su base a proposito: los cuatro *-hover ya traen su valor literal pensado, y
     solo se consumen como background/border-color — nunca como texto —, asi que derivarlos
     habria cambiado el diseno sin arreglar nada. Ver docs/CONTRATO-TOKENS.md. */

  /* ── Huérfanos: se consumían sin estar definidos ──────────────── */
  /* Siete tokens que los generadores y el COTIZADOR ya usaban y que no existían
     en ninguna hoja: cada var() caía en su fallback hex, así que esas zonas
     salían idénticas en los 8 temas. Se definen aquí como alias del contrato
     para que el tema las alcance; los consumidores se re-apuntan en F2
     (docs/CONTRATO-TOKENS.md §5.1). */
  --color-surface:           var(--surface-base);
  --color-card:              var(--surface-raised);
  --color-text-muted:        var(--text-muted);
  --color-primary-contrast:  var(--color-primary-text);
  --color-warn-bg:           var(--color-warning-muted);
  --color-warn-fg:           var(--color-warning-text);
  /* Color de identidad de un tercero (WhatsApp): NO se tematiza a propósito. */
  --color-whatsapp:          #25D366;

  /* ── PROPUESTA 10 · un solo acento ───────────────────────────────
     Respaldos de los tokens que emite AplicarTemaCss. Se definen como alias de
     tokens que YA existen -no como colores nuevos escritos a mano (R2)- para que
     la plantilla se vea bien aunque un proyecto se genere sin _theme.css.

     --control-strong-*  El par NEUTRO FUERTE. Lo que está "seleccionado" pero NO es
                         la acción principal (la paginación activa) deja de gastar el
                         acento y usa este bloque de tinta con su contratinta.
     --chart-1..6        La escala del acento para gráficas: seis pasos del MISMO
                         color en vez de seis colores de marca compitiendo. El tema
                         los recalcula midiendo ≥3.0:1 contra el fondo y ≥N:1 entre
                         contiguos (ver ContrasteAA.EscalaAcento en Program.cs).
                         Ojo: --chart-color-1..6 es OTRA cosa (la paleta de branding)
                         y sigue existiendo; estos no la pisan. */
  --control-strong-bg:  var(--text-primary);
  --control-strong-ink: var(--surface-raised);
  --chart-1: var(--blue-300);
  --chart-2: var(--blue-400);
  --chart-3: var(--blue-500);
  --chart-4: var(--blue-600);
  --chart-5: var(--blue-800);
  --chart-6: var(--blue-950);
}

/* =========================================================================
   DARK MODE — tokens semánticos dedicados
   ========================================================================= */
[data-theme="dark"], [data-bs-theme="dark"] {
  --surface-base:     #0F172A;
  --surface-raised:   #1E293B;
  --surface-overlay:  #1E293B;
  --surface-inset:    #0D1424;
  --surface-sunken:   #0A1122;
  --surface-hover:    #334155;
  --table-header-bg:  #0D1424;

  /* Validados contra las cuatro superficies oscuras (#1E293B/#0F172A/#0D1424/
     #0A1122), no solo contra la tarjeta: --text-muted #64748B daba 3.36 sobre
     --surface-raised y --text-disabled #334155 daba 1.36. Peor par ahora: 4.50. */
  --text-primary:   #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted:     #8190A5;
  --text-disabled:  #7B91B0;
  --text-link:      #60A5FA;
  --text-link-hover:#93C5FD;

  /* Ver la nota de los mismos tokens en modo claro. */
  --color-danger-on-surface:  #F87171;
  --color-danger-on-muted:    #F87171;
  --color-success-on-surface: #4ADE80;
  --color-success-on-muted:   #4ADE80;
  --color-warning-on-surface: #FBBF24;
  --color-warning-on-muted:   #FBBF24;
  --color-info-on-surface:    #38BDF8;
  --color-info-on-muted:      #38BDF8;

  --avatar-ink:   #FFFFFF;
  --avatar-scrim: #00000054;

  --border-color:        #1E293B;
  --border-color-strong: #334155;

  --shadow-xs:  0 1px 2px 0 color-mix(in srgb, var(--text-primary) 50%, transparent);
  --shadow-sm:  0 1px 3px 0 color-mix(in srgb, var(--text-primary) 50%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--text-primary) 50%, transparent);
  --shadow-md:  0 4px 6px -1px color-mix(in srgb, var(--text-primary) 50%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--text-primary) 50%, transparent);
  --shadow-lg:  0 10px 15px -3px color-mix(in srgb, var(--text-primary) 50%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--text-primary) 50%, transparent);
  --shadow-xl:  0 20px 25px -5px color-mix(in srgb, var(--text-primary) 50%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--text-primary) 50%, transparent);

  --color-primary-muted: #1E3A5F;
  --color-danger-muted:  #450A0A;
  --color-success-muted: #052E16;
  --color-warning-muted: #451A03;
  --color-info-muted:    #082F49;

  /* El texto sobre el fondo suave tiene que ACLARARSE en oscuro. Sin esto el
     par -text sobre -muted daba 1.5-1.65:1, ilegible, en cada chip de estado. */
  --color-danger-text:   #FCA5A5;
  --color-success-text:  #86EFAC;
  --color-warning-text:  #FCD34D;
  --color-info-text:     #7DD3FC;
  --color-primary-text:  #FFFFFF;

  /* ── Legacy dark ───────────────────────────────────────────── */
  --color-background:      #0F172A;
  --content-bg:            #0F172A;
  --topbar-bg:             #1E293B;
  --topbar-border:         #334155;
  --color-white:           #1E293B;
  --color-text:            #F1F5F9;
  --sidebar-bg:            #080E1C;
  --color-card-bg:         #1E293B;
  --card-bg:               #1E293B;
  --color-input-border:    #334155;
  --color-heading:         #F1F5F9;
  --color-label:           #CBD5E1;
  --color-muted:           #64748B;
  --color-border:          #1E293B;
  --color-form-control-bg: #1E293B;
  --color-form-control-border: #334155;
  --color-form-control-text:   #F1F5F9;
  --color-dropdown-bg:         #1E293B;
  --color-dropdown-border:     #334155;
  --color-dropdown-text:       #CBD5E1;
  --color-dropdown-item:       #F1F5F9;
  --color-dropdown-item-hover: #FFFFFF;
  --color-dropdown-item-hover-bg: #334155;
  --color-topbar-divider:  #334155;
  --color-card-shadow:     color-mix(in srgb, var(--text-primary) 50%, transparent);
  --color-shadow:          color-mix(in srgb, var(--text-primary) 50%, transparent);
}

/* =========================================================================
   BASE RESET + TIPOGRAFÍA
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  /* La última parada era un degradado azul ESCRITO A MANO (#eef3fb/#f5f8fc/#edf2f9):
     no seguía al tema y en modo oscuro seguía siendo azul claro, así que el texto
     claro caía sobre un fondo claro. Ahora el lienzo es el token --surface-base y
     los dos halos salen de los colores de marca. */
  background:
    radial-gradient(1000px 500px at 10% -10%, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 62%),
    radial-gradient(800px 450px at 90% -10%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 62%),
    var(--surface-base);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-y: auto;
  transition: background-color var(--duration-slow) var(--ease-standard),
              color var(--duration-slow) var(--ease-standard);
}

body:has(.layout-container) { display: block; }
body:has(.login-container) { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--text-primary); margin: 0; }
h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-4); color: var(--text-secondary); line-height: var(--leading-relaxed); }

a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }

ul,ol { margin: 0; padding: 0; list-style: none; }
hr { border: none; border-top: 1px solid var(--border-color); margin: var(--space-6) 0; }

input,button,select,optgroup,textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button { cursor: pointer; border-radius: var(--border-radius-sm); }
button:focus:not(:focus-visible) { outline: 0; }

/* =========================================================================
   LAYOUT SHELL
   ========================================================================= */
/* El respaldo del armazón es la SUPERFICIE DE LA PÁGINA, no el color de la barra.
   Estaba en --sidebar-bg, y como .layout-main pinta superficies que en varios temas
   son translúcidas (Glassmorphism usa rgba en surface/backgroundAlt), el lienzo real
   acababa siendo el color del sidebar: medido en oscuro, .footer-text quedaba en 3.52.
   La barra pinta su propio fondo, así que no necesita este respaldo. */
.layout-container { display: flex; min-height: 100vh; width: 100%; background-color: var(--surface-base); }
.layout-sidebar { flex-shrink: 0; }
.layout-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--sidebar-width);
  /* ESTE degradado era la causa de 67 nodos bajo AA: sus dos últimas paradas eran
     azules escritas a mano (rgba(245,249,255,.92) y rgba(235,241,251,.96)), o sea
     un lienzo que NO es ningún token. .footer-text pinta --text-muted encima, y
     --text-muted está validado contra --surface-raised, no contra ese azul: 3.29–4.19
     en claro y 1.10–2.72 en oscuro (donde el lienzo seguía siendo claro). Las tres
     paradas salen ahora de tokens de superficie, que son contra los que se valida
     el texto. */
  background:
    linear-gradient(170deg, var(--surface-raised) 0%, var(--surface-inset) 38%, var(--surface-base) 100%);
  transition: margin-left var(--duration-slow) var(--ease-standard);
  position: relative;
}
/* Compensa el ancho del sidebar cuando esta colapsado. Antes el selector
   buscaba `.sidebar-collapsed`, una clase que el TSX NUNCA emite (
   components/sidebar/SidebarComponent.tsx emite `collapsed`), asi que la regla
   estaba muerta y el boton de colapsar era un no-op visual (el ancho tampoco
   cambiaba por el `width !important` de scss/navs/_sidebar.scss, ya retirado).

   Acotado a >=1025px A PROPOSITO: el colapso es una funcion de ESCRITORIO; en
   <=1024px el sidebar es un drawer flotante y `.layout-main` va sin margen.
   Sin este media query el :has (0,4,0) le ganaria a `.layout-main{margin-left:0}`
   (0,1,0) del bloque movil y el contenido quedaria desplazado 68px en telefono.

   `screen and` es OBLIGATORIO: sin el, la regla tambien aplica al imprimir en
   apaisado (carta horizontal ~1056px > 1025px) y su especificidad (0,4,0) le gana
   al `.layout-main{margin-left:0}` (0,1,0) del bloque `@media print`, dejando 68px
   de margen muerto en el PDF (el sidebar se oculta con display:none, pero :has
   sigue matcheando). */
@media screen and (min-width: 1025px) {
  .layout-container:has(.sidebar.collapsed) .layout-main { margin-left: var(--sidebar-collapsed-width); }
}
.layout-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-height);
  background-color: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.layout-content {
  flex: 1;
  padding: var(--space-6) var(--space-6);
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}
.layout-panel { min-height: calc(100% - 40px); width: 100%; }
.layout-footer { padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border-color); }
.footer-text { font-size: var(--text-xs); color: var(--text-muted); text-align: center; }

/* =========================================================================
   CARD
   ========================================================================= */
.card {
  background: var(--surface-raised);
  border-radius: var(--card-border-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-elevated { box-shadow: var(--shadow-md); }
.card-elevated:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.card-flat { box-shadow: none; border: 1px solid var(--border-color); }
.card-interactive { cursor: pointer; }
.card-interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--color-primary); }
.card-interactive:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  background: transparent;
}
.card-header-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.card-body { padding: var(--space-5); }
.card-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-color); background: var(--surface-inset); }

/* Metric card */
.metric-card {
  background: var(--surface-raised);
  border-radius: var(--card-border-radius);
  border: 1px solid var(--border-color);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-normal) var(--ease-standard);
  position: relative;
  overflow: hidden;
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-standard);
}
.metric-card:hover::before { opacity: 1; }
.metric-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.metric-card-value { font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--text-primary); line-height: 1; letter-spacing: var(--tracking-tight); }
.metric-card-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-top: var(--space-1); }
.metric-card-delta { font-size: var(--text-xs); font-weight: var(--weight-semibold); margin-top: var(--space-2); }
.metric-card-delta.positive { color: var(--color-success-on-surface); }
.metric-card-delta.negative { color: var(--color-danger-on-surface); }

/* =========================================================================
   BOTONES
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  position: relative;
  overflow: hidden;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn:active:not(:disabled):not(:where([aria-disabled="true"])) { transform: scale(0.975); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; }

/* Boton apagado con `aria-disabled="true"` en vez de `disabled` nativo.
   Se hace asi para que el boton SIGA siendo enfocable y el lector de pantalla
   pueda anunciar el motivo por el que esta bloqueado (un `<button disabled>` no
   entra en el orden de tabulacion y ese motivo no existia para teclado). El
   efecto lateral era que, al no haber `disabled` real, los `:hover`/`:active`
   de arriba seguian aplicando: un boton que NO se puede pulsar se iluminaba al
   pasar el raton e invitaba a pulsarlo. Por eso cada estado de esos lleva
   `:not(:where([aria-disabled="true"]))`, y aqui se deja el cursor de "no permitido".
   NO se pone `pointer-events: none` (mataria el `title` con el motivo y el
   propio cursor) y NO se toca `:focus-visible`: el anillo de foco es la
   accesibilidad, no el senuelo. */
button[aria-disabled="true"],
[role="button"][aria-disabled="true"] { cursor: not-allowed; }

/* =========================================================================
   MOTIVO VISIBLE DE UN CONTROL BLOQUEADO (globo de `data-motivo`)
   =========================================================================
   El motivo por el que una accion no se puede usar ya viajaba en el `title`
   (raton) y dentro del `aria-label` (lector de pantalla). Quedaba fuera justo
   el usuario que VE la pantalla y navega con el tabulador: el `title` nativo
   solo aparece al pasar el raton, asi que ese usuario enfocaba un boton
   apagado y no tenia ninguna forma de saber por que.

   Se resuelve aqui, en la hoja, y no en cada componente: el texto ya esta en
   el DOM como atributo, de modo que pintarlo con `content: attr(...)` no
   duplica texto, no cambia la firma de ningun componente y sirve a la vez para
   raton (:hover) y para teclado (:focus-visible).

   Se usa `::before` y NO `::after` porque `.btn::after` esta ocupado por el
   efecto ripple: reutilizarlo lo apagaria en todos los botones.

   El guardia `:not(:where([data-motivo=""]))` evita el globo vacio cuando el
   motivo llega como cadena vacia (React omite el atributo si es `undefined`,
   pero no si es `''`). Va envuelto en `:where(...)` a proposito: `:not()` suma
   la especificidad de su argumento y estas reglas empezarian a ganarle a las
   clases de los propios botones. */
/* `overflow: visible` es imprescindible, no cosmetico: `.btn` recorta su
   contenido (main.css, regla `.btn`) para que el ripple no se salga del radio, y
   ese mismo recorte dejaria el globo INVISIBLE dentro del boton. Quitarlo solo
   en los controles que llevan motivo no afecta al ripple, que es un
   pseudo-elemento de exactamente 100% x 100% y no se sale. */
[data-motivo]:not(:where([data-motivo=""])) { position: relative; overflow: visible; }

[data-motivo]:not(:where([data-motivo=""]))::before {
  content: attr(data-motivo);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-popover);
  width: -moz-max-content;
  width: max-content;
  max-width: min(280px, 60vw);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  /* El globo NO captura el raton: si lo hiciera, aparecer bajo el cursor
     cancelaria el :hover que lo mostro y parpadearia. Un pseudo-elemento
     tampoco entra en el orden de tabulacion, asi que no roba el foco. */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

[data-motivo]:not(:where([data-motivo=""])):hover::before,
[data-motivo]:not(:where([data-motivo=""])):focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* Acciones de fila: el globo va a la IZQUIERDA del icono y centrado en la fila.
   Esa columna es la ultima de la tabla, asi que un globo que creciera hacia la
   derecha se saldria de la pantalla; y uno colocado debajo lo recortarian
   `.dg-card` (overflow: hidden) y `.dg-card-body` (overflow: auto). Hacia la
   izquierda cabe siempre: tiene todo el ancho de la fila. */
.ui-rowacts [data-motivo]:not(:where([data-motivo=""]))::before,
.dg-actions [data-motivo]:not(:where([data-motivo=""]))::before {
  top: 50%;
  left: auto;
  right: calc(100% + 6px);
  transform: translateY(-50%);
}

/* Barras de accion alineadas a la derecha (el grupo Anterior/Siguiente/Finalizar
   del asistente y la navegacion del cotizador): ahi el globo se ancla al borde
   derecho del boton para no desbordar por la derecha. */
.wizard-navigation > div:last-child > [data-motivo]:not(:where([data-motivo=""]))::before,
.cot-nav > [data-motivo]:not(:where([data-motivo=""])):last-child::before {
  left: auto;
  right: 0;
}

/* Quien pide "sin animaciones" recibe el globo igual, solo que sin la fundida. */
@media (prefers-reduced-motion: reduce) {
  [data-motivo]:not(:where([data-motivo=""]))::before { transition: none; }
}

/* Ripple effect */
.btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: color-mix(in srgb, var(--surface-raised) 15%, transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.btn:active:not(:where([aria-disabled="true"]))::after { opacity: 1; }

/* Variantes */
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(29, 78, 216, 0.3);
}
.btn-primary:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}
.btn-secondary {
  background: var(--surface-raised);
  border-color: var(--border-color-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background: var(--neutral-100);
  border-color: var(--neutral-400);
  box-shadow: var(--shadow-sm);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background: var(--neutral-100);
  color: var(--text-primary);
}
.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25);
}
.btn-danger:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}
.btn-success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #FFFFFF;
}
.btn-success:hover:not(:disabled):not(:where([aria-disabled="true"])) { background: var(--color-success-hover); border-color: var(--color-success-hover); }
.btn-warning {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: #FFFFFF;
}
.btn-warning:hover:not(:disabled):not(:where([aria-disabled="true"])) { background: var(--color-warning-hover); border-color: var(--color-warning-hover); }
.btn-info {
  background: var(--color-info);
  border-color: var(--color-info);
  color: #FFFFFF;
}
.btn-tonal {
  background: var(--color-primary-muted);
  border-color: transparent;
  color: var(--color-primary);
}
.btn-tonal:hover:not(:disabled):not(:where([aria-disabled="true"])) { background: var(--blue-200); }
.btn-link { background: transparent; border-color: transparent; color: var(--text-link); padding-left: 0; padding-right: 0; }
.btn-link:hover:not(:disabled):not(:where([aria-disabled="true"])) { color: var(--text-link-hover); text-decoration: underline; }
.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}
.btn-accent:hover:not(:disabled):not(:where([aria-disabled="true"])) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* Tamaños */
.btn-xs { padding: 2px var(--space-2); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn-md { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn-xl { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); border-radius: var(--radius-xl); }
.btn-icon { padding: var(--space-2); aspect-ratio: 1; }
.btn-icon.btn-sm { padding: var(--space-1); }

/* Loading state */
.btn-loading { cursor: wait; }
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}

/* =========================================================================
   FORMULARIOS
   ========================================================================= */
.form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.form-label-required { color: var(--color-danger-on-surface); font-size: var(--text-xs); }

.form-control {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-raised);
  background-clip: padding-box;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-input);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
}
.form-control::-moz-placeholder { color: var(--text-disabled); }
.form-control::placeholder { color: var(--text-disabled); }
.form-control:hover:not(:disabled):not(:-moz-read-only) { border-color: var(--neutral-400); }
.form-control:hover:not(:disabled):not(:read-only) { border-color: var(--neutral-400); }
.form-control:focus {
  outline: none;
  border-color: var(--border-color-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.form-control:disabled { background-color: var(--surface-inset); color: var(--text-disabled); cursor: not-allowed; opacity: 0.7; }
.form-control:-moz-read-only { background-color: var(--surface-inset); color: var(--text-secondary); }
.form-control:read-only { background-color: var(--surface-inset); color: var(--text-secondary); }
.form-control.is-invalid { border-color: var(--border-color-error); background-image: none; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.form-control.is-valid { border-color: var(--border-color-success); }
.form-control.is-valid:focus { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12); }

.form-error { font-size: var(--text-xs); color: var(--color-danger-on-surface); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.form-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* Input con iconos */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .form-control { padding-left: 2.5rem; }
.input-group .input-icon { position: absolute; left: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; z-index: 1; }
.input-group .input-icon-right { left: auto; right: var(--space-3); }
.input-group:has(.input-icon-right) .form-control { padding-left: var(--space-3); padding-right: 2.5rem; }

/* Select — mismo lenguaje visual que los inputs de texto:
   superficie clara, borde sutil, misma altura/radio, foco con primary.
   (Evita el relleno navy oscuro de selects nativos.) */
select.form-control {
  background-color: var(--surface-raised);
  color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 stroke=%27%2364748B%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: 2.5rem;
  cursor: pointer;
}
/* Panel de opciones nativo: superficie clara + texto legible (no navy) */
select.form-control option,
.dg-filter-select option,
.dg-pagesize-select option {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}
select.form-control:disabled { cursor: not-allowed; }
/* Multi-select: ítems seleccionados con acento primary tonal, no navy */
select.form-control[multiple] {
  background-image: none;
  padding-right: var(--space-3);
  min-height: auto;
}
select.form-control[multiple] option:checked {
  background: var(--color-primary-muted) linear-gradient(0deg, var(--color-primary-muted), var(--color-primary-muted));
  color: var(--color-primary-active);
}
/* Los selects de la grilla comparten altura con los demás controles */
.dg-filter-select,
.dg-pagesize-select { -moz-appearance: none; appearance: none; -webkit-appearance: none; }

/* Checkbox & Radio */
.form-check { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.form-check-input {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface-raised);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  position: relative;
}
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-check-input:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.form-check-input[type="radio"] { border-radius: var(--radius-full); }
.form-check-input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 8px; height: 8px;
  background: white;
  border-radius: var(--radius-full);
  border: none;
  transform: none;
}
.form-check-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.form-check-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

/* Switch */
.form-switch { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.form-switch-input {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--neutral-300);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}
.form-switch-input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 25%, transparent);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.form-switch-input:checked { background: var(--color-primary); }
.form-switch-input:checked::after { transform: translateX(20px); }
.form-switch-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* =========================================================================
   TABLA / DATA GRID
   ========================================================================= */
.table-responsive { overflow-x: auto; border-radius: var(--card-border-radius); border: 1px solid var(--border-color); }
.table-custom {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-radius: var(--card-border-radius);
}
/* HOMOLOGACION DE RADIOS: con border-collapse: separate el radio del <table> NO se ve;
   hay que redondear las celdas de las CUATRO esquinas (thead arriba, tfoot -o la ultima
   fila del tbody si no hay tfoot- abajo). Sin esto la tabla salia con esquinas rectas
   dentro de una tarjeta redondeada. */
.table-custom > thead > tr:first-child > th:first-child,
.table-custom > thead > tr:first-child > td:first-child { border-top-left-radius: var(--card-border-radius); }
.table-custom > thead > tr:first-child > th:last-child,
.table-custom > thead > tr:first-child > td:last-child { border-top-right-radius: var(--card-border-radius); }
.table-custom > tfoot > tr:last-child > td:first-child,
.table-custom > tfoot > tr:last-child > th:first-child { border-bottom-left-radius: var(--card-border-radius); }
.table-custom > tfoot > tr:last-child > td:last-child,
.table-custom > tfoot > tr:last-child > th:last-child { border-bottom-right-radius: var(--card-border-radius); }
.table-custom:not(:has(tfoot)) > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--card-border-radius); }
.table-custom:not(:has(tfoot)) > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--card-border-radius); }
/* El degradado estaba ESCRITO A MANO (#f8fbff -> #eff5fd) y no cambiaba con el tema ni con el
   modo: en oscuro la tinta del encabezado (--text-muted, validada contra la superficie OSCURA)
   quedaba clara sobre ese fondo claro fijo. Mismo defecto de composicion de las rondas
   anteriores. El fondo sale ahora del token del tema (--table-header-bg, que Program.cs emite
   en claro y en oscuro desde components.table.headerBg) y la tinta de --table-header-color,
   que Program.cs valida a 4.5:1 CONTRA ESE fondo ya compuesto (headerBg puede ser
   'transparent' -Material, shadcn, Notion- o traer alfa -Glassmorphism-). */
.table-custom thead tr {
  background: var(--table-header-bg, var(--surface-inset));
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}
.table-custom thead th {
  padding: var(--space-3) var(--space-4);
  /* PROPUESTA 5: los encabezados de la rejilla van en CAJA NORMAL. Las versales frenan la
     lectura y estorban a los acentos del espanol, y ademas obligan a un tamano diminuto para
     que quepan. Se sube el cuerpo un escalon y se usa el token de texto secundario, que ya
     esta validado a 4.5:1 (R2: ningun color escrito a mano). Las versales se conservan solo
     en las etiquetas cortas de seccion, que es la excepcion admitida. */
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--table-header-color, var(--text-secondary));
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  border-bottom: none;
  position: relative;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.table-custom thead th.sortable { cursor: pointer; }
.table-custom thead th.sortable:hover { color: var(--text-primary); background: var(--neutral-200); }
/* PROPUESTA 10: la columna ordenada es un indicador, no la acción principal. El énfasis lo
   da la tinta fuerte (ya validada contra el fondo del encabezado), no el acento. */
.table-custom thead th.sorted { color: var(--text-primary); }

.table-custom tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.table-custom tbody tr:last-child { border-bottom: none; }
.table-custom tbody tr:hover { background-color: var(--blue-50); }
.table-custom tbody tr.selected { background-color: var(--color-primary-muted); }
.table-custom td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  color: var(--text-secondary);
  border-bottom: none;
}
.table-custom td.cell-primary { color: var(--text-primary); font-weight: var(--weight-medium); }
.table-custom td.cell-actions { text-align: right; white-space: nowrap; }

/* Row actions — visibles solo en hover */
.table-custom .row-actions { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.table-custom tr:hover .row-actions { opacity: 1; }

/* Empty state de tabla */
.table-empty {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  color: var(--text-muted);
}
.table-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-3); opacity: 0.4; }
.table-empty-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-1); }
.table-empty-desc { font-size: var(--text-sm); color: var(--text-muted); }

/* =========================================================================
   BADGES
   ========================================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.badge-primary   { background: var(--color-primary-muted); color: var(--color-primary); }
.badge-secondary { background: var(--neutral-200); color: var(--neutral-700); }
.badge-success   { background: var(--color-success-muted); color: var(--color-success-text); }
.badge-warning   { background: var(--color-warning-muted); color: var(--color-warning-text); }
.badge-error, .badge-danger { background: var(--color-danger-muted); color: var(--color-danger-text); }
.badge-info      { background: var(--color-info-muted); color: var(--color-info-text); }
.badge-violet    { background: var(--violet-50); color: var(--violet-600); }
.badge-outline { background: transparent; border: 1.5px solid currentColor; }
.badge-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }

/* =========================================================================
   MODAL
   ========================================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--text-primary) 25%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn var(--duration-normal) var(--ease-standard);
}
.modal-content {
  background: var(--surface-raised);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-height: calc(100vh - var(--space-8));
  display: flex;
  flex-direction: column;
  animation: modalSlideIn var(--duration-slow) var(--ease-decelerate);
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.modal-sm  { max-width: 440px; }
.modal-md  { max-width: 600px; }
.modal-lg  { max-width: 800px; }
.modal-xl  { max-width: 1080px; }
.modal-full{ max-width: calc(100vw - var(--space-8)); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.modal-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); }
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--neutral-100); color: var(--text-primary); }

.modal-body { padding: var(--space-6); overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--surface-inset);
}

/* Legacy modal footer */
.modal-footer-buttons { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) 0 0; }
.modal-btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  position: relative;
  overflow: hidden;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.modal-btn-cancel:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.modal-btn-cancel:active:not(:disabled):not(:where([aria-disabled="true"])) { transform: scale(0.975); }
.modal-btn-cancel:disabled { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; }
.modal-btn-cancel::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: color-mix(in srgb, var(--surface-raised) 15%, transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.modal-btn-cancel:active:not(:where([aria-disabled="true"]))::after { opacity: 1; }
@media (max-width: 1024px) {

  .modal-btn-cancel {
    min-height: 44px;
  }
}
@media (max-width: 768px) {
  .modal-btn-cancel { min-height: 38px; }
}
@media (max-width: 480px) {
  .modal-btn-cancel { width: 100%; }
}
@media print {
  .modal-btn-cancel { display: none; }
}
.modal-btn-cancel {
  background: var(--surface-raised);
  border-color: var(--border-color-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}
.modal-btn-cancel:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background: var(--neutral-100);
  border-color: var(--neutral-400);
  box-shadow: var(--shadow-sm);
}
.modal-btn-cancel {
  background-color: var(--surface-raised);
  border-color: var(--border-color-strong);
  color: var(--text-primary);
}
.modal-btn-cancel:hover:not(:disabled):not(:where([aria-disabled="true"])) { background-color: var(--surface-hover); }
.modal-btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  position: relative;
  overflow: hidden;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.modal-btn-delete:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.modal-btn-delete:active:not(:disabled):not(:where([aria-disabled="true"])) { transform: scale(0.975); }
.modal-btn-delete:disabled { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; }
.modal-btn-delete::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: color-mix(in srgb, var(--surface-raised) 15%, transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.modal-btn-delete:active:not(:where([aria-disabled="true"]))::after { opacity: 1; }
@media (max-width: 1024px) {

  .modal-btn-delete {
    min-height: 44px;
  }
}
@media (max-width: 768px) {
  .modal-btn-delete { min-height: 38px; }
}
@media (max-width: 480px) {
  .modal-btn-delete { width: 100%; }
}
@media print {
  .modal-btn-delete { display: none; }
}
.modal-btn-delete {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25);
}
.modal-btn-delete:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}
.modal-btn-delete {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-primary-text);
}
.modal-btn-delete:hover:not(:disabled):not(:where([aria-disabled="true"])) { background-color: var(--color-danger-hover); }
.modal-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  position: relative;
  overflow: hidden;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.modal-btn-submit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.modal-btn-submit:active:not(:disabled):not(:where([aria-disabled="true"])) { transform: scale(0.975); }
.modal-btn-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; }
.modal-btn-submit::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: color-mix(in srgb, var(--surface-raised) 15%, transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.modal-btn-submit:active:not(:where([aria-disabled="true"]))::after { opacity: 1; }
@media (max-width: 1024px) {

  .modal-btn-submit {
    min-height: 44px;
  }
}
@media (max-width: 768px) {
  .modal-btn-submit { min-height: 38px; }
}
@media (max-width: 480px) {
  .modal-btn-submit { width: 100%; }
}
@media print {
  .modal-btn-submit { display: none; }
}
.modal-btn-submit {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(29, 78, 216, 0.3);
}
.modal-btn-submit:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}
.modal-btn-submit {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}
.modal-btn-submit:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* =========================================================================
   PAGE HEADER
   ========================================================================= */
.page-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  /* Mismo defecto que .layout-main: la parada final era rgba(239,246,255,.95),
     un azul a mano. .page-subtitle y .page-header-stat-label pintan --text-muted
     encima (4.10–4.44 en claro, 1.04–2.75 en oscuro). Fondo, borde y sombra salen
     ahora de tokens. */
  background: linear-gradient(135deg, var(--surface-raised) 0%, var(--surface-inset) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 30px -22px color-mix(in srgb, var(--text-primary) 45%, transparent);
  margin-bottom: var(--space-4);
}
.page-header-left { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-family: var(--font-display);
}
.page-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.page-header-right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.page-header-stats { display: flex; align-items: center; gap: var(--space-4); }
.page-header-stat { display: flex; flex-direction: column; align-items: center; }
.page-header-stat-value { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1; }
.page-header-stat-label { font-size: var(--text-xs); color: var(--text-muted); }

/* Breadcrumb */
.breadcrumb-custom {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.breadcrumb-custom a { color: var(--text-muted); transition: color var(--duration-fast); }
/* PROPUESTA 10: el hover de la miga de pan se marca con énfasis neutro, no con el acento. */
.breadcrumb-custom a:hover { color: var(--text-primary); }
.breadcrumb-custom .separator { color: var(--neutral-300); }
.breadcrumb-custom .current { color: var(--text-secondary); font-weight: var(--weight-medium); }

/* =========================================================================
   TOOLBAR
   ========================================================================= */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
  flex-wrap: wrap;
}
.toolbar-primary { display: flex; align-items: center; gap: var(--space-2); }
.toolbar-secondary { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.toolbar-divider { width: 1px; height: 24px; background: var(--border-color); margin: 0 var(--space-1); flex-shrink: 0; }
.toolbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-inset);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  transition: all var(--duration-fast) var(--ease-standard);
  min-width: 220px;
}
.toolbar-search:focus-within { border-color: var(--border-color-focus); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.toolbar-search input { border: none; background: none; outline: none; font-size: var(--text-sm); color: var(--text-primary); width: 100%; min-width: 0; }
.toolbar-search input::-moz-placeholder { color: var(--text-disabled); }
.toolbar-search input::placeholder { color: var(--text-disabled); }

/* =========================================================================
   APP SHELL: SIDEBAR + TOPBAR
   ========================================================================= */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: var(--z-raised);
  /* Chrome con la marca del proyecto: usa --sidebar-brand (derivado del tema)
     con fallback al navy histórico si el tema no lo define. */
  background:
    linear-gradient(180deg,
      var(--sidebar-brand, rgba(9, 20, 45, 0.98)) 0%,
      var(--sidebar-brand-2, rgba(11, 26, 56, 0.98)) 52%,
      var(--sidebar-brand-3, rgba(7, 16, 36, 0.98)) 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 14px 0 35px -25px rgba(2, 6, 23, 0.82);
  display: flex;
  flex-direction: column;
  transition: width var(--duration-normal) var(--ease-standard);
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 12px;
}

.sidebar-logo-wrapper {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-logo-full,
.sidebar-logo-icon {
  max-width: 100%;
  max-height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* El boton pinta SU PROPIO fondo encima de la barra, asi que su tinta NO puede salir de
   --sidebar-text: ese token esta validado contra la barra DESNUDA. Correccion previa
   (2026-08-28) cambio el #dbeafe fijo por --sidebar-text y subio de ~1.2 a ~2.6-2.85,
   pero seguia fallando AA en 9 de 16 combinaciones (peor 2.59, shadcn claro) porque medir
   contra la barra desnuda es medir contra un fondo que no existe: es el mismo error de
   composicion que se corrigio para el item activo del menu.
   AHORA Program.cs COMPONE el fondo real (--text-primary al 25% sobre components.sidebar.bg,
   con ContrasteAA.SobreSuperficie) y emite las dos piezas del par:
     --sidebar-toggle-bg    el fondo ya compuesto y OPACO
     --sidebar-toggle-color la tinta, validada a 4.5:1 CONTRA ESE fondo
   Medido con los valores reales de cat_tema_diseno: 9/16 fallos (peor 2.59) -> 0/16 (peor 4.50).
   Los fallbacks conservan el aspecto de la plantilla sin _theme.css. */
.toggle-sidebar {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: var(--sidebar-toggle-bg, color-mix(in srgb, var(--text-primary) 25%, transparent));
  color: var(--sidebar-toggle-color, var(--sidebar-text));
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* El hover pintaba rgba(30,64,175,0.5) A MANO (viola R2: ningun color se escribe a mano) y
   dejaba la tinta de reposo encima: 7 de 16 combinaciones bajo AA, peor 1.76 (Mantine claro).
   Sale al par YA VALIDADO del item activo del menu — que es ademas el estado con el que un
   usuario asocia "esto reacciona": Program.cs compone activeBg sobre la barra y valida
   activeColor contra ese compuesto. Medido: 7/16 fallos (peor 1.76) -> 0/16 (peor 4.50).
   No se acuñan tokens nuevos aqui a proposito (R1: unificar en la fuente canonica). */
.toggle-sidebar:hover {
  background: var(--sidebar-menu-active-bg);
  color: var(--sidebar-menu-active-color);
}

.sidebar-divider {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  margin: 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 16px;
  overflow-y: auto;
}

.sidebar-category-label {
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* rgba(148,163,184,.72) daba 4.21:1 sobre el navy y ~1.4:1 sobre una barra clara.
     Sale del token del tema, que Program.cs emite ya validado a 4.5:1. */
  color: var(--sidebar-category-color);
}

/* El rotulo de marca de la barra. El style inline color:var(--surface-raised) que
   SidebarComponent.tsx traia (y que obligaba a este !important) ya se quito del TSX:
   el color sale solo de aqui, del token unico de la barra. */
.sidebar-logo-text {
  color: var(--sidebar-text);
}

.sidebar-search-wrapper {
  padding: 0 4px 4px;
}

.sidebar-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.24);
  /* MISMO defecto de composicion que .toggle-sidebar, y por eso el MISMO par de tokens.
     La caja pinta su propio fondo (--text-primary al 25%) ENCIMA de la barra, pero la lupa
     y el input sacaban su tinta de --sidebar-text, que esta validado contra la barra
     DESNUDA. Medido en Chrome headless con el tema Material (proyecto 8003): tinta
     rgb(117,117,117) sobre el fondo compuesto rgb(188,188,188) = 2.41:1, cuando el minimo
     de un icono es 3.0 (WCAG 1.4.11) y el del texto del input 4.5.
     Program.cs ya COMPONE ese fondo y emite el par validado (--sidebar-toggle-bg /
     --sidebar-toggle-color): aqui se consume, en vez de derivarlo otra vez a mano (R1). */
  background: var(--sidebar-toggle-bg, color-mix(in srgb, var(--text-primary) 25%, transparent));
  padding: 7px 10px;
}

.sidebar-search-icon {
  font-size: 18px;
  /* Tinta validada CONTRA EL FONDO DE LA CAJA, no contra la barra (ver .sidebar-search-box). */
  color: var(--sidebar-toggle-color, var(--sidebar-text));
}

.sidebar-search-input {
  width: 100%;
  border: 0;
  background: transparent;
  /* Ver .sidebar-search-box: el input se pinta sobre el fondo de la caja, no sobre la barra. */
  color: var(--sidebar-toggle-color, var(--sidebar-text));
  outline: none;
  font-size: 13px;
}

.sidebar-search-input::-moz-placeholder {
  /* El placeholder tambien vive DENTRO de la caja, asi que pintarlo con
     --sidebar-category-color (validado contra la barra desnuda) repetia el defecto. Y NO se
     atenua: un placeholder es texto, le aplica el 4.5:1 completo, y cualquier opacidad
     encima lo volveria a bajar por debajo. Se usa la tinta ya validada, tal cual. */
  color: var(--sidebar-toggle-color, var(--sidebar-text));
}

.sidebar-search-input::placeholder {
  /* El placeholder tambien vive DENTRO de la caja, asi que pintarlo con
     --sidebar-category-color (validado contra la barra desnuda) repetia el defecto. Y NO se
     atenua: un placeholder es texto, le aplica el 4.5:1 completo, y cualquier opacidad
     encima lo volveria a bajar por debajo. Se usa la tinta ya validada, tal cual. */
  color: var(--sidebar-toggle-color, var(--sidebar-text));
}

.menu-list,
.submenu,
.sub-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item,
.submenu-item,
.sub-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  border-radius: var(--radius-md);
  padding: 8px 10px;
  /* Desacoplado del navy: ver --sidebar-text en :root. */
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.menu-item:hover,
.submenu-item:hover,
.sub-submenu-item:hover,
.menu-list > li.active > .menu-item,
.submenu > li.active > .submenu-item {
  /* El estado activo tambien estaba clavado en azul/blanco: sobre una barra clara
     quedaba blanco sobre azul palido. Sale de los tokens del tema (que Program.cs
     emite desde components.sidebar.activeBg / activeColor) con el par historico
     como respaldo. */
  background: var(--sidebar-menu-active-bg, rgba(59, 130, 246, 0.24));
  color: var(--sidebar-menu-active-color, #ffffff);
}

/* .menu-text / .menu-icon declaran su propio color (var(--sidebar-text)), asi que
   NO heredan el de .menu-item: sin estas dos reglas el estado activo pintaba solo
   el contenedor y el texto se quedaba en el color de reposo. */
.menu-item:hover > .menu-text,
.menu-item:hover > .menu-icon,
.menu-item:hover > .expand-icon,
.submenu-item:hover > .submenu-text,
.submenu-item:hover > .submenu-icon,
.submenu-item:hover > .expand-icon,
.sub-submenu-item:hover > .submenu-text,
.sub-submenu-item:hover > .submenu-icon,
.menu-list > li.active > .menu-item > .menu-text,
.menu-list > li.active > .menu-item > .menu-icon,
.menu-list > li.active > .menu-item > .expand-icon,
.submenu > li.active > .submenu-item > .submenu-text,
.submenu > li.active > .submenu-item > .submenu-icon,
.submenu > li.active > .submenu-item > .expand-icon {
  color: var(--sidebar-menu-active-color, #ffffff);
}

.menu-icon,
.submenu-icon,
.expand-icon {
  font-size: 18px;
  flex-shrink: 0;
  color: var(--sidebar-text);
}

.menu-text,
.submenu-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sidebar-text);
}

.menu-text.hidden,
.submenu-text.hidden,
.hidden {
  display: none;
}

.submenu,
.sub-submenu {
  display: none;
  margin-left: 10px;
  padding-left: 8px;
  border-left: 1px dashed rgba(148, 163, 184, 0.36);
}

.submenu.expanded,
.sub-submenu.expanded {
  display: block;
}

.sidebar-empty-state {
  padding: 14px 10px;
  font-size: 12px;
  /* Estaba clavado en rgba(148,163,184,.86): 5.47:1 sobre el navy por defecto, pero
     2.07-2.20:1 sobre las barras claras de los temas 1, 2, 4 y 6. Mismo token que el
     resto de la barra (R2). */
  color: var(--sidebar-text);
}

.navbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  /* Era un degradado a rgba(248,251,255,.92) escrito a mano: en oscuro dejaba la
     barra superior CLARA con tinta clara encima (.topbar-user-role daba 1.11–3.62).
     La barra es --topbar-bg, que AplicarTemaCss ya emite desde color.surface en
     los dos modos, y es la superficie contra la que se valida su texto. */
  background: var(--topbar-bg);
}

.navbar-left,
.navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(203, 213, 225, 0.7);
  background: color-mix(in srgb, var(--surface-raised) 85%, transparent);
  /* Estaba clavado en #334155: sobre una topbar oscura desaparecia. --text-secondary
     ya viene validado a 4.5:1 contra color.surface, que ES el fondo de la topbar
     (--topbar-bg). Medido: 4.51 en el peor de los 8 temas (AntD oscuro). */
  color: var(--text-secondary);
}

.topbar-btn:hover:not(:where([aria-disabled="true"])) {
  /* El hover tambien estaba en literales (#eff6ff / #1e3a8a): en modo oscuro habria
     dejado texto claro sobre un fondo casi blanco. Los dos salen de tokens. */
  background: var(--surface-hover);
  color: var(--text-primary);
}

.topbar-divider-v {
  width: 1px;
  height: 24px;
  background: rgba(148, 163, 184, 0.38);
}

.topbar-app-name {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  /* Mismo caso que .topbar-user-name, que ya salia del token: estaba clavado en
     #0f172a y sobre una topbar oscura desaparecia. */
  color: var(--text-primary);
}

.topbar-lang-trigger,
.topbar-user-trigger {
  border: 1px solid rgba(203, 213, 225, 0.78);
  background: color-mix(in srgb, var(--surface-raised) 85%, transparent);
  border-radius: var(--radius-lg);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}

.topbar-lang-trigger:hover,
.topbar-user-trigger:hover {
  /* Estaba clavado en #eff6ff: en oscuro dejaba un rectángulo blanco con el nombre
     y el rol claros encima. --surface-inset es superficie validada en los dos modos. */
  background: var(--surface-inset);
}

.topbar-lang-flag {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
}

.topbar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  /* Era un degradado de marca FIJO (#2563eb -> #048297) con la tinta atada a
     --color-primary-text, que está validado contra --color-primary y no contra
     este degradado: en cuanto el tema movía la tinta el par dejaba de estar medido.
     Ahora el degradado sale del tema y usa el mismo par validado que el avatar de
     iniciales de las tablas — velo mínimo + --avatar-ink (ver la nota del token). */
  background: linear-gradient(140deg, var(--color-primary) 0%, var(--color-accent) 100%);
  box-shadow: inset 0 0 0 999px var(--avatar-scrim);
  color: var(--avatar-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.topbar-user-info {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.topbar-user-name {
  font-size: 12px;
  font-weight: 700;
  /* --topbar-bg SI es tematizable (Program.cs lo emite desde color.surface) pero el
     nombre estaba clavado en #0f172a: sobre una topbar oscura desaparecia. Sale del
     token de texto, que ya viene validado a 4.5:1 contra esa misma superficie. */
  color: var(--text-primary);
}

.topbar-user-role {
  font-size: 10px;
  /* Estaba clavado en #64748b (justo el default de --topbar-link-color). El token
     ademas viene validado a 4.5:1 contra la superficie de la topbar. */
  color: var(--topbar-link-color);
}

.topbar-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: color-mix(in srgb, var(--surface-raised) 85%, transparent);
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 36px -26px color-mix(in srgb, var(--text-primary) 25%, transparent);
  backdrop-filter: blur(10px);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  z-index: var(--z-dropdown);
}

.topbar-user-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================================================================
   DROPZONE
   ========================================================================= */
.dropzone {
  /* Fondo, borde y texto estaban en literales claros (#f8fbff/#f1f7ff, #334155):
     en oscuro quedaba una caja blanca, y el texto ni siquiera salía de un token. */
  border: 1.5px dashed var(--border-color-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-inset) 0%, var(--surface-sunken) 100%);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
}

.dropzone:hover,
.dropzone.active {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, var(--surface-inset) 0%, var(--surface-base) 100%);
  transform: translateY(-1px);
}

.dropzone-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

/* =========================================================================
   TABS
   ========================================================================= */
.tabs-container { display: flex; flex-direction: column; width: 100%; }
.tabs-header {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-standard);
  position: relative;
  margin-bottom: -2px;
}
.tab-btn:hover:not(:where([aria-disabled="true"])) { color: var(--text-primary); background: var(--neutral-100); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold); }
.tab-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tab-count { font-size: var(--text-xs); padding: 1px 6px; border-radius: var(--radius-full); background: var(--neutral-200); color: var(--text-muted); transition: all var(--duration-fast); }
.tab-btn.active .tab-count { background: var(--color-primary-muted); color: var(--color-primary); }

/* =========================================================================
   ACCORDION
   ========================================================================= */
.accordion-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-2);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.accordion-item:hover { box-shadow: var(--shadow-sm); }
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--border-radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  background: var(--surface-raised);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast);
}
.accordion-trigger:hover { background: var(--surface-inset); }
/* PROPUESTA 10: el acordeón abierto ya se distingue por su fondo; el acento sobraba. */
.accordion-trigger.open { background: var(--surface-inset); color: var(--text-primary); }
.accordion-chevron { transition: transform var(--duration-normal) var(--ease-standard); flex-shrink: 0; }
.accordion-trigger.open .accordion-chevron { transform: rotate(180deg); }
.accordion-content { padding: var(--space-4); border-top: 1px solid var(--border-color); background: var(--surface-raised); }

/* =========================================================================
   WIZARD STEPPER
   ========================================================================= */
.wizard-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: var(--space-8);
  position: relative;
}
.wizard-stepper::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-color);
  z-index: 0;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
  gap: var(--space-2);
}
.wizard-step-circle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: 2px solid var(--border-color);
  background: var(--surface-raised);
  color: var(--text-muted);
  transition: all var(--duration-normal) var(--ease-standard);
  box-shadow: var(--shadow-sm);
}
/* La tinta sobre el primario era `white` ESCRITA A MANO (R2) y sin validar contra nada: en
   los temas de primario claro quedaba por debajo de AA. --color-primary-text es esa misma
   tinta, pero validada contra el primario YA COMPUESTO. El fondo sigue siendo el acento a
   propósito: el paso del asistente es la acción principal en curso, no un adorno. */
.wizard-step.completed .wizard-step-circle { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }
.wizard-step.active .wizard-step-circle { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); box-shadow: 0 0 0 4px var(--color-primary-muted); }
.wizard-step.error .wizard-step-circle { background: var(--color-danger); border-color: var(--color-danger); color: white; }
.wizard-step-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); text-align: center; max-width: 80px; line-height: var(--leading-tight); }
.wizard-step.active .wizard-step-label { color: var(--color-primary); font-weight: var(--weight-semibold); }
.wizard-step.completed .wizard-step-label { color: var(--text-secondary); }

/* Progress bar en wizard */
.wizard-progress {
  height: 4px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.wizard-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-full);
  transition: width var(--duration-slower) var(--ease-decelerate);
}

/* =========================================================================
   CONFIRM DIALOG
   ========================================================================= */
.confirm-dialog-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 1.5rem;
}
.confirm-dialog-icon.danger { background: var(--color-danger-muted); color: var(--color-danger-on-muted); }
.confirm-dialog-icon.warning { background: var(--color-warning-muted); color: var(--color-warning-on-muted); }
.confirm-dialog-icon.info { background: var(--color-info-muted); color: var(--color-info-on-muted); }
.confirm-dialog-title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-primary); text-align: center; margin-bottom: var(--space-2); }
.confirm-dialog-message { font-size: var(--text-sm); color: var(--text-secondary); text-align: center; line-height: var(--leading-relaxed); margin-bottom: 0; }

/* =========================================================================
   SUMMARY CARD (Wizard)
   ========================================================================= */
.summary-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.summary-card-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.summary-card-row { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-color); gap: var(--space-4); }
.summary-card-row:last-child { border-bottom: none; padding-bottom: 0; }
.summary-card-key { font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; }
.summary-card-value { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); text-align: right; }

/* =========================================================================
   FILTERS / FILTERBAR
   ========================================================================= */
.filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-inset);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.filters-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); white-space: nowrap; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  /* PROPUESTA 10 + contraste. Dos defectos en una línea: (a) el chip de filtro es adorno,
     no la acción principal, y gastaba el acento; (b) pintaba --color-primary CRUDO sobre
     --color-primary-muted, que es EXACTAMENTE el defecto ya corregido en
     .hg-btn-outline:hover — medido en Chrome headless con Material: rgb(25,118,210) sobre
     rgb(227,242,253) = 4.03:1, bajo AA. Pasa a neutro, y el neutro ya está validado contra
     las cuatro superficies de cuerpo. */
  background: var(--surface-sunken);
  color: var(--text-primary);
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: all var(--duration-fast);
}
.filter-chip:hover { background: var(--surface-hover); }
.filter-chip-remove { opacity: 0.7; }
.filter-chip-remove:hover { opacity: 1; }

/* =========================================================================
   PAGINATION
   ========================================================================= */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  justify-content: center;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1.5px solid var(--border-color);
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.page-btn:hover:not(:where([aria-disabled="true"])) { background: var(--neutral-100); border-color: var(--neutral-400); color: var(--text-primary); }
/* PROPUESTA 10: la paginación era uno de los seis sitios que gastaban el acento a la vez
   que el botón principal ("cuando todo resalta, nada resalta"). La página activa pasa al
   par NEUTRO FUERTE, que distingue igual de bien sin competir con la acción principal.
   De paso caen dos colores escritos a mano que violaban R2: `white` y el azul fijo
   rgba(29,78,216,0.3) de la sombra, que además no cambiaba con el tema. */
.page-btn.active { background: var(--control-strong-bg); border-color: var(--control-strong-bg); color: var(--control-strong-ink); box-shadow: var(--shadow-sm); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================================================
   TOAST / ALERT
   ========================================================================= */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid;
  box-shadow: var(--shadow-lg);
  animation: toastSlideIn var(--duration-slow) var(--ease-decelerate);
  max-width: 400px;
}
.toast-success { background: var(--color-success-muted); border-color: var(--color-success); color: var(--color-success-text); }
.toast-error   { background: var(--color-danger-muted);  border-color: var(--color-danger);  color: var(--color-danger-text);  }
.toast-warning { background: var(--color-warning-muted); border-color: var(--color-warning); color: var(--color-warning-text); }
.toast-info    { background: var(--color-info-muted);    border-color: var(--color-info);    color: var(--color-info-text);    }

.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid; }
.alert-success { background: var(--color-success-muted); border-color: var(--color-success); color: var(--color-success-text); }
.alert-error   { background: var(--color-danger-muted);  border-color: var(--color-danger);  color: var(--color-danger-text);  }
.alert-warning { background: var(--color-warning-muted); border-color: var(--color-warning); color: var(--color-warning-text); }
.alert-info    { background: var(--color-info-muted);    border-color: var(--color-info);    color: var(--color-info-text);    }

/* =========================================================================
   EMPTY STATE
   ========================================================================= */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  text-align: center;
  color: var(--text-muted);
  gap: var(--space-3);
}
/* AQUI HABIA UNA SEGUNDA REGLA `.empty-state-icon` (borrada 2026-08-31). Estaba MUERTA: la
   de la sección EMPTY STATE, más abajo en esta misma hoja, declara exactamente las mismas
   diez propiedades (display, align-items, justify-content, width, height, margin-bottom,
   border-radius, background, color, font-size) y, por venir después con la misma
   especificidad, ganaba las diez. La detectó el anclaje regla→token de ContrasteCssTests,
   que ancla por la PRIMERA aparición del selector y por tanto medía la regla que el
   navegador nunca pinta — un duplicado así vuelve mentiroso al propio anclaje (R1: una
   sola fuente). Ojo: `.empty-state-title` y `.empty-state-desc`, aquí abajo, siguen
   duplicadas de la misma forma; se dejan porque no las cubre ningún par todavía. */
.empty-state-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.empty-state-desc { font-size: var(--text-sm); color: var(--text-muted); max-width: 360px; line-height: var(--leading-relaxed); }

/* =========================================================================
   SKELETON LOADING
   ========================================================================= */
.skeleton {
  background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text:last-child { width: 70%; }
.skeleton-title { height: 20px; margin-bottom: 12px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); }
.skeleton-btn { height: 36px; width: 100px; border-radius: var(--radius-md); }

/* =========================================================================
   DROPDOWN
   ========================================================================= */
.dropdown { position: relative; display: inline-flex; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 180px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-1);
  animation: dropdownOpen var(--duration-normal) var(--ease-decelerate);
  overflow: hidden;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--duration-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
.dropdown-item:hover { background: var(--neutral-100); }
.dropdown-item.danger { color: var(--color-danger-on-surface); }
.dropdown-item.danger:hover { background: var(--color-danger-muted); }
.dropdown-divider { height: 1px; background: var(--border-color); margin: var(--space-1) 0; }

/* =========================================================================
   ANIMATIONS / KEYFRAMES
   ========================================================================= */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dropdownOpen {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes staggerFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger utility para listas */
.stagger-item { animation: staggerFadeUp var(--duration-slow) var(--ease-decelerate) both; }
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }
.stagger-item:nth-child(4) { animation-delay: 180ms; }
.stagger-item:nth-child(5) { animation-delay: 240ms; }
.stagger-item:nth-child(6) { animation-delay: 300ms; }

/* Page entrance */
.page-enter { animation: fadeInUp var(--duration-slow) var(--ease-decelerate); }

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   FOCUS VISIBLE (accessibility)
   ========================================================================= */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* =========================================================================
   UTILITY CLASSES
   ========================================================================= */
.text-primary-color { color: var(--color-primary); }
.text-success { color: var(--color-success-on-surface); }
.text-danger  { color: var(--color-danger-on-surface); }
.text-warning { color: var(--color-warning-on-surface); }
.text-info    { color: var(--color-info-on-surface); }
.text-muted   { color: var(--text-muted); }
.text-error   { color: var(--color-danger-on-surface); }

.bg-primary-muted  { background: var(--color-primary-muted); }
.bg-success-muted  { background: var(--color-success-muted); }
.bg-danger-muted   { background: var(--color-danger-muted); }
.bg-warning-muted  { background: var(--color-warning-muted); }

.divider { height: 1px; background: var(--border-color); margin: var(--space-4) 0; }
.divider-vertical { width: 1px; background: var(--border-color); margin: 0 var(--space-3); align-self: stretch; }

.section-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--space-3); }

/* =========================================================================
   KPI CARDS
   ========================================================================= */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }

/* =========================================================================
   DATA GRID (dg-*)
   ========================================================================= */
.dg-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: var(--card-border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dg-card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-inset);
}
.dg-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dg-filters-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.dg-filter-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.dg-filter-select,
.dg-pagesize-select {
  min-height: 34px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: var(--text-sm);
  padding: 0 var(--space-3);
}
.dg-filter-select:focus,
.dg-pagesize-select:focus {
  outline: none;
  border-color: var(--border-color-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.dg-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.dg-export-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.dg-export-btn,
.dg-btn-new,
.dg-btn-icon,
.dg-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--surface-raised);
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-standard);
}
.dg-export-btn {
  width: 32px;
  height: 32px;
}
.dg-export-btn:hover:not(:where([aria-disabled="true"])),
.dg-btn-icon:hover:not(:where([aria-disabled="true"])),
.dg-page-btn:hover:not(:where([aria-disabled="true"])) {
  background: var(--neutral-100);
  color: var(--text-primary);
  border-color: var(--neutral-400);
}
.dg-btn-new {
  min-height: 34px;
  padding: 0 var(--space-3);
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.dg-btn-new:hover:not(:where([aria-disabled="true"])) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.dg-card-body {
  overflow: auto;
  max-height: 65vh;
}
.dg-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--card-border-radius);
}
/* HOMOLOGACION DE RADIOS: las esquinas de la rejilla (ver .table-custom). */
.dg-table > thead > tr:first-child > .dg-th:first-child { border-top-left-radius: var(--card-border-radius); }
.dg-table > thead > tr:first-child > .dg-th:last-child { border-top-right-radius: var(--card-border-radius); }
.dg-table > tbody > tr:last-child > .dg-td:first-child { border-bottom-left-radius: var(--card-border-radius); }
.dg-table > tbody > tr:last-child > .dg-td:last-child { border-bottom-right-radius: var(--card-border-radius); }
.dg-th,
.dg-td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.dg-th {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: var(--surface-inset);
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 0 var(--border-color);
}
/* Alineación numérica a la derecha (enterprise) */
.dg-th-numeric,
.dg-td-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.dg-th-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dg-th-sortable {
  cursor: pointer;
}
.dg-th-sortable:hover {
  color: var(--text-primary);
}
.dg-sort-icon {
  color: var(--text-disabled);
}
.dg-row { transition: background-color var(--duration-fast) var(--ease-standard); }
.dg-row:hover {
  background: var(--surface-inset);
}
.dg-row:last-child .dg-td { border-bottom: none; }
.dg-td {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.dg-td-empty {
  padding: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
/* Skeleton de carga (sutil) */
.dg-row-skeleton:hover { background: transparent; }
.dg-skeleton {
  display: block;
  height: 12px;
  width: 80%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-inset) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  animation: dg-skeleton-shimmer 1.4s ease infinite;
}
.dg-skeleton-sm { width: 48px; }
.dg-skeleton-check { width: 16px; height: 16px; border-radius: var(--radius-sm); margin: 0 auto; }
@keyframes dg-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-skeleton { animation: none; }
}
.dg-th-checkbox,
.dg-td-checkbox {
  width: 44px;
  text-align: center;
}
.dg-checkbox {
  width: 16px;
  height: 16px;
}
.dg-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dg-btn-icon {
  width: 30px;
  height: 30px;
}
.dg-btn-icon.btn-icon-info { color: var(--color-info-on-surface); }
.dg-btn-icon.btn-icon-warning { color: var(--color-warning-on-surface); }
.dg-btn-icon.btn-icon-danger { color: var(--color-danger-on-surface); }
/* BKL-0583: el juego estaba incompleto. APROBACIONPageGenerator emite
   `dg-btn-icon btn-icon-success` (Aprobar) y `dg-btn-icon btn-icon-secondary`
   (Delegar) desde hace tiempo, y como nadie definia esas dos reglas los dos
   botones se pintaban con el gris de `.dg-btn-icon` en vez de su color. Se
   completan con los mismos tokens que usan sus tres hermanas. */
.dg-btn-icon.btn-icon-success { color: var(--color-success-on-surface); }
.dg-btn-icon.btn-icon-secondary { color: var(--color-secondary); }
.dg-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-color);
  background: var(--surface-inset);
  flex-wrap: wrap;
}
.dg-pagination-info {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dg-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dg-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dg-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: var(--text-sm);
}
.dg-page-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* =========================================================================
   EMPTY STATE — estado vacío reutilizable (tablas, grids, paneles)
   ========================================================================= */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
}
.empty-state-compact { padding: var(--space-8) var(--space-4); }
.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  /* PROPUESTA 10: un icono decorativo de estado vacío no es la acción principal. Deja de
     gastar el acento y pasa a neutro; --text-muted ya está validado contra las cuatro
     superficies de cuerpo, así que además cubre de sobra el 3.0:1 de un objeto gráfico. */
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-2xl);
}
.empty-state-compact .empty-state-icon { width: 48px; height: 48px; font-size: var(--text-xl); }
.empty-state-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}
.empty-state-text {
  margin: 0;
  max-width: 360px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}
.empty-state-action { margin-top: var(--space-3); }

/* =========================================================================
   ERGONOMIA TACTIL (solo movil/tablet, <=1024px)

   Referencias: WCAG 2.2 SC 2.5.8 (minimo 24px) y 2.5.5 (44px), Apple HIG
   (44pt) y Material Design 3 (48dp + 8dp de separacion).
   Medido antes de este bloque en un telefono de 390px: botones-icono de
   34x34px e inputs de ~20px de alto -> pasaban el minimo de WCAG pero
   quedaban por debajo de lo comodo segun Apple/Material.

   Se acota a <=1024px A PROPOSITO: en escritorio (raton) la densidad actual
   es correcta y agrandar los controles ahi solo restaria informacion por
   pantalla.
   ========================================================================= */
@media (max-width: 1024px) {
  /* 16px es el umbral por debajo del cual Safari en iOS hace ZOOM AUTOMATICO
     al enfocar un campo (la pagina entera salta de escala). El tema usa
     --text-base = 14px, por eso pasaba. Se fija 16px solo en campos. */
  .form-control,
  .dg-filter-select,
  .dg-pagesize-select,
  .sidebar-search-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Alto comodo de campo. min-height gana sobre height, asi que basta con
     esto para elevar los controles que traen alto fijo. */
  .form-control,
  .dg-filter-select,
  .dg-pagesize-select,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 44px;
  }

  /* Botones-icono: de 34px a 44px (Apple HIG). */
  .topbar-btn,
  .topbar-menu-toggle,
  .dg-export-btn,
  .dg-btn-icon,
  .dg-page-btn,
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  .btn,
  .dg-btn-new {
    min-height: 44px;
  }

  /* Separacion entre objetivos tactiles contiguos (Material: 8dp). Sin esto
     los iconos de accion de cada fila quedan pegados y el dedo falla. */
  .dg-actions,
  .dg-export-buttons {
    gap: var(--space-2);
  }
}

/* =========================================================================
   SAFE AREAS (notch / isla dinamica / barra de gestos)

   Sin esto el contenido puede quedar por debajo de la barra de estado o del
   indicador inferior en iPhone. Requiere `viewport-fit=cover` en el meta
   viewport (ver public/index.html). `env()` vale 0 en dispositivos sin
   recortes, asi que es seguro aplicarlo siempre.
   ========================================================================= */
.navbar {
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.layout-footer {
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
}

.sidebar {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Boton hamburguesa: solo tiene sentido cuando el sidebar es un drawer
   (<=1024px). En desktop el sidebar es fijo, asi que se oculta. */
.topbar-menu-toggle { display: none; }

/* Backdrop del drawer lateral en movil/tablet. Se renderiza solo cuando el
   menu esta abierto; al tocarlo se cierra. */
.sidebar-backdrop {
  /* Oculto por defecto: si el usuario abre el drawer y luego agranda la ventana
     (o rota la tablet), el backdrop no debe quedar tapando el escritorio. */
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-raised) - 1);
  background: color-mix(in srgb, var(--text-primary) 25%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (max-width: 1024px) {
  .topbar-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* El drawer y su backdrop deben quedar POR ENCIMA del header sticky
     (.layout-header/.navbar usan --z-sticky = 200). `.layout-main` es
     position:relative SIN z-index, asi que no crea contexto de apilamiento:
     header y sidebar compiten en el contexto raiz y ganaba el header, que se
     pintaba sobre el drawer y capturaba los taps de la cabecera del menu y de
     la primera opcion (a <=768px el header ocupa ~104-116px por el
     flex-wrap de .navbar-left/.navbar-right). Se sube el drawer a --z-overlay
     (300) y el backdrop a 299: siguen POR DEBAJO de --z-modal (400), asi que
     un modal abierto continua sobre el drawer. El z-index del header NO se
     toca: debe seguir sobre el contenido (es sticky por diseno). */
  .sidebar-backdrop { display: block; z-index: calc(var(--z-overlay) - 1); }
  .sidebar {
    transform: translateX(-100%);
    width: min(82vw, 300px);
    transition: transform var(--duration-normal) var(--ease-standard);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    /* Por encima del backdrop (299) y del header sticky (200) mientras esta
       abierto; por debajo de los modales (--z-modal = 400). */
    z-index: var(--z-overlay);
    box-shadow: 18px 0 45px -20px rgba(2, 6, 23, 0.75);
  }
  .sidebar.collapsed {
    width: min(82vw, 300px);
  }
  .layout-main { margin-left: 0; }
  .layout-content { padding: var(--space-4); }
  .navbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    backdrop-filter: blur(8px);
  }
  .page-title { font-size: var(--text-xl); }
  .page-header-bar { padding: var(--space-4); margin-bottom: var(--space-4); }
  .modal-content { max-width: min(94vw, 960px); }
  .dg-table { min-width: 640px; }
  .dg-card-header,
  .dg-card-footer { padding: var(--space-3) var(--space-4); }

  /* La paginacion es inline-flex sin wrap y renderiza hasta 7 botones
     (prev + 5 paginas + next; maxVisible=5 en components/data/index.tsx). Con
     los 44px tactiles de este mismo bloque mide 7*44 + 6*4 = 332px, mas que
     los ~302px utiles de un telefono de 360px: desbordaba y, como .dg-card
     pasa a overflow:visible en <=640px (necesario para el modo tarjeta), el
     desborde escapaba al documento y hacia scrollear TODA la pagina de lado.
     Se permite el salto de linea y se centra: mismo numero de botones, sin
     desborde. (No se usa overflow:hidden ni en .dg-card ni en html/body: eso
     taparia el sintoma y romperia el modo tarjeta y otros scrolls.) */
  .dg-pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-2);
  }
}
@media (max-width: 768px) {
  .layout-content { padding: var(--space-3); }
  .navbar {
    height: auto;
    min-height: 56px;
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .navbar-left,
  .navbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .topbar-user-info,
  .topbar-lang-label {
    display: none;
  }
  .page-header-bar { flex-direction: column; align-items: flex-start; }
  .page-header-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .page-header-stats { width: 100%; justify-content: space-between; }
  .toolbar { flex-wrap: wrap; }
  .toolbar-secondary { margin-left: 0; }
  .toolbar-search { min-width: 100%; }
  .btn { min-height: 38px; }
  .tabs-header { margin-bottom: var(--space-3); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard-stepper::before { display: none; }
  .wizard-step-label { max-width: 64px; }
  .filters { padding: var(--space-3); gap: var(--space-2); }
  .dg-header-row { flex-direction: column; align-items: stretch; }
  .dg-header-actions { margin-left: 0; justify-content: space-between; }
  .dg-export-buttons { order: 2; }
  .dg-btn-new { order: 1; }
  .dg-card-footer { flex-direction: column; align-items: stretch; }
  .dg-footer-right { justify-content: space-between; width: 100%; }
  .dg-pagination { width: 100%; justify-content: center; }
  /* 44px, no 40px: esta regla va DESPUES del bloque de ergonomia tactil y lo
     pisaria. Se alinea con Apple HIG (44) en vez de dejar los campos cortos. */
  .form-control { min-height: 44px; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .modal-overlay { padding: var(--space-2); align-items: flex-end; }
  .modal-content { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 90vh; }
  .page-title { font-size: var(--text-lg); }
  .page-subtitle { font-size: var(--text-xs); }
  .page-header-bar { padding: var(--space-3); }
  .btn { width: 100%; }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer > * { width: 100%; }
  .dg-th,
  .dg-td { padding: var(--space-2) var(--space-3); }
  .dg-filter-select,
  .dg-pagesize-select { width: 100%; }
  .wizard-step-circle { width: 34px; height: 34px; }
}

/* =========================================================================
   TABLA COMO TARJETAS (<=640px)

   En un telefono una tabla de varias columnas obliga a scroll horizontal: hay
   que arrastrar de lado para leer una fila y es facil perder de vista a que
   registro pertenece cada dato. Por debajo de 640px cada fila se re-dibuja
   como una tarjeta con pares "Etiqueta: valor" apilados.

   La etiqueta sale de `data-label`, que pone DataGrid en cada <td> con el
   `header` de su columna (ver components/data/index.tsx). Si algun dia una
   celda no trae data-label, simplemente no se muestra etiqueta: el valor
   sigue siendo legible, no se rompe nada.

   Nota WCAG: 1.4.10 (Reflow) exceptua las tablas de datos, asi que el scroll
   horizontal anterior NO era un incumplimiento; esto es mejora de comodidad.
   ========================================================================= */
@media (max-width: 640px) {
  /* El cuerpo de la tarjeta contenedora limita a `max-height: 65vh` con
     `overflow: auto`. Con filas-tabla compactas apenas se notaba, pero en modo
     tarjeta cada registro es ~4x mas alto y eso deja un SCROLL ANIDADO (una
     ventanita de ~550px dentro de la pagina) muy incomodo con el dedo. En
     movil se libera la altura y se deja que scrollee la pagina completa.
     Verificado en vivo: sin esto solo se alcanzaban ~2 de 5 registros sin
     entrar a scrollear dentro del marco interno. */
  .dg-card-body {
    max-height: none;
    overflow: visible;
  }

  .dg-card { overflow: visible; }

  /* Wrapper de scroll horizontal de la tabla: en modo tarjeta ya no hay nada
     que desplazar de lado y, si se deja, vuelve a recortar verticalmente. */
  .dg-card-body > .overflow-x-auto {
    overflow: visible;
  }

  /* Sin min-width ya no hay scroll lateral que forzar. */
  .dg-table,
  .dg-table thead,
  .dg-table tbody,
  .dg-table tr,
  .dg-table td {
    display: block;
    min-width: 0;
    width: auto;
  }

  /* El encabezado deja de tener sentido: cada valor lleva su etiqueta. Se
     oculta sin `display:none` para que siga anunciado a lectores de pantalla. */
  .dg-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .dg-table tr.dg-row {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .dg-table td.dg-td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    border: none;
    padding: var(--space-2) 0;
    text-align: right;
  }

  .dg-table td.dg-td + td.dg-td {
    border-top: 1px dashed var(--border-color);
  }

  .dg-table td.dg-td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 42%;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold, 600);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* Las acciones van al pie de la tarjeta, a lo ancho y sin etiqueta. */
  .dg-table td.dg-td-actions {
    justify-content: flex-end;
    padding-top: var(--space-3);
    margin-top: var(--space-1);
    border-top: 1px solid var(--border-color);
  }

  .dg-table td.dg-td-actions::before { content: none; }

  /* La celda del checkbox de seleccion tampoco necesita etiqueta. */
  .dg-table td.dg-td-checkbox {
    display: block;
    padding: 0 0 var(--space-2) 0;
    border: none;
  }
}

/* =========================================================================
   PRINT
   ========================================================================= */
@media print {
  .layout-sidebar, .layout-header, .toolbar, .btn { display: none !important; }
  .layout-main { margin-left: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* =========================================================================
   SCROLL
   ========================================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

/* =========================================================================
   CLASES DE COLOR DE BOOTSTRAP — REDIRIGIDAS AL CONTRATO
   =========================================================================
   El codigo generado usa clases de color de Bootstrap (bg-white, text-white,
   btn-secondary...). Con la hoja original de Bootstrap esas clases traen el
   color FIJO: una tarjeta .bg-white se queda blanca en modo oscuro y no cambia
   con ninguno de los 8 temas. En vez de reescribir cada sitio de llamada, se
   redefinen aqui contra los tokens del tema, con lo que el marcado existente
   pasa a ser tematizable sin tocarlo.
   ========================================================================= */
.bg-white      { background-color: var(--surface-raised) !important; }
.bg-light      { background-color: var(--surface-inset) !important; }
.bg-body       { background-color: var(--surface-base) !important; }
.bg-dark       { background-color: var(--text-primary) !important; }
.bg-primary    { background-color: var(--color-primary) !important; }
.bg-secondary  { background-color: var(--color-secondary) !important; }
.bg-success    { background-color: var(--color-success) !important; }
.bg-danger     { background-color: var(--color-danger) !important; }
.bg-warning    { background-color: var(--color-warning) !important; }
.bg-info       { background-color: var(--color-info) !important; }

.text-white    { color: var(--color-primary-text) !important; }
.text-dark     { color: var(--text-primary) !important; }
.text-body     { color: var(--text-primary) !important; }
.text-muted    { color: var(--text-muted) !important; }
.text-primary  { color: var(--color-primary) !important; }
.text-secondary{ color: var(--text-secondary) !important; }
.text-success  { color: var(--color-success-on-surface) !important; }
.text-danger   { color: var(--color-danger-on-surface) !important; }
.text-warning  { color: var(--color-warning-on-surface) !important; }
.text-info     { color: var(--color-info-on-surface) !important; }

.border-primary   { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-success   { border-color: var(--color-success) !important; }
.border-danger    { border-color: var(--color-danger) !important; }
.border-warning   { border-color: var(--color-warning) !important; }
.border-info      { border-color: var(--color-info) !important; }
.border-light     { border-color: var(--border-color) !important; }
.border-dark      { border-color: var(--border-color-strong) !important; }

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}
.btn-primary:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn-secondary {
  background-color: var(--surface-raised);
  border-color: var(--border-color-strong);
  color: var(--text-primary);
}
.btn-secondary:hover:not(:disabled):not(:where([aria-disabled="true"])) { background-color: var(--surface-hover); }
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-primary-text);
}
.btn-danger:hover:not(:disabled):not(:where([aria-disabled="true"])) { background-color: var(--color-danger-hover); }
.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-primary-text);
}
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline-primary:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
}

/* =========================================================================
   PRIMITIVAS DE ANATOMIA (F1) — docs/PLAN-REDISENO-UI-GENERADOR.md
   =========================================================================
   Las piezas que el sistema de diseno da por supuestas y que hoy cada tipo de
   pantalla resolvia a su manera: un solo bloque de filtros, el buscador, el
   campo de formulario con su error, la franja de alerta, el paginador y las
   acciones por fila.

   Viven aqui y no en estilos en linea para que las gobierne el tema: todo sale
   de tokens. Se prefijan con ui- para no chocar con las clases existentes
   (.card, .modal-*, .dg-page-*).
   ========================================================================= */

/* ── Bloque de filtros: UNO por pantalla ─────────────────────────────────── */
.ui-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  /* Sin margen inferior: es el ultimo hijo de su tarjeta y el padding de esta ya
     aporta el aire de abajo. El margen dejaba un hueco muerto de 12px. */
  margin-bottom: 0;
}
/* Rejilla de graficas del tablero: si solo queda una, ocupa toda la fila.
   Las columnas las fija el generador, asi que un hijo omitido en runtime
   dejaba su columna vacia y la grafica superviviente a media anchura. */
/* La rejilla se adapta al numero REAL de graficas que sobreviven. El generador
   fija las columnas al emitir (2 o 3 segun el layout), pero una grafica omitida
   por no tener datos (R3) dejaba su columna reservada: dos graficas en una
   rejilla de tres columnas dejaban el tercio derecho vacio. Con auto-fit, N
   graficas siempre llenan la fila. Doble clase para ganar a las utilidades
   de Tailwind sin recurrir a !important. */
.charts-fluida.charts-fluida {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.charts-fluida > *:only-child { grid-column: 1 / -1; }

.ui-filters-sep { flex: 1 1 auto; }
.ui-filters-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ── Campo compacto de filtro ────────────────────────────────────────────── */
.ui-field {
  height: var(--control-h);
  border: 1px solid var(--border-color);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 11px;
  font-size: var(--text-sm); color: var(--text-secondary);
}
.ui-field > label { color: var(--text-muted); white-space: nowrap; }
.ui-field select, .ui-field input {
  border: 0; background: transparent; color: var(--text-primary);
  font: inherit; outline: none; min-width: 90px;
}

/* ── Buscador ────────────────────────────────────────────────────────────── */
.ui-search {
  flex: 1 1 260px; max-width: 620px; height: var(--control-h);
  border: 1px solid var(--border-color);
  background: var(--surface-inset);
  border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 9px; padding: 0 12px;
  color: var(--text-muted); font-size: var(--text-sm);
}
.ui-search input {
  flex: 1; border: 0; background: transparent; color: var(--text-primary);
  font: inherit; outline: none;
}
.ui-search:focus-within {
  border-color: var(--border-color-focus, var(--color-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ── Segmentos: filtro rapido con conteo ─────────────────────────────────── */
.ui-segs { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: var(--space-3); }
.ui-seg {
  height: 30px; padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--surface-raised);
  font-size: var(--text-sm); color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.ui-seg .ui-seg-n { font-weight: var(--weight-bold); color: var(--text-primary); }
.ui-seg.is-on {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-primary-text);
}
.ui-seg.is-on .ui-seg-n { color: var(--color-primary-text); }
.ui-seg.is-critical {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--border-color));
  background: var(--color-danger-muted); color: var(--color-danger-text);
}
.ui-seg.is-critical .ui-seg-n { color: var(--color-danger-text); }

/* Variante APILADA del filtro por segmentos, para las charolas de BANDEJA.
   El componente se penso como barra horizontal, y las charolas son una columna lateral: sin
   esta variante, adoptarlo obligaba a mover el filtro de sitio en la maqueta. Con ella, BANDEJA
   reutiliza el MISMO componente —y con el gana lo que le faltaba: son botones de verdad, no
   divs con onClick, asi que se alcanzan con el tabulador y anuncian su estado (role="group" +
   aria-pressed) en vez de ser invisibles para el teclado y el lector de pantalla.
   El conteo se empuja a la derecha, que es donde ya estaba en las charolas. */
.ui-segs.is-stacked { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; }
.ui-segs.is-stacked .ui-seg { height: auto; min-height: 40px; justify-content: space-between; border-radius: var(--radius-md); text-align: left; }
.ui-segs.is-stacked .ui-seg .ui-seg-n { margin-left: auto; }

/* ── Campo de formulario con etiqueta y error ────────────────────────────── */
.ui-formfield { display: flex; flex-direction: column; gap: 6px; }
.ui-formfield-label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: var(--weight-medium); }
.ui-formfield-req { color: var(--color-danger-on-surface); margin-left: 2px; }
.ui-formfield-hint { font-size: var(--text-xs); color: var(--text-muted); }
.ui-formfield.has-error .form-control,
.ui-formfield.has-error .form-select { border-color: var(--border-color-error, var(--color-danger)); }

/* ── Error en linea: nunca un modal para decir que falta un dato ─────────── */
.ui-inline-error {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--color-danger-on-surface);
}

/* ── Franja de alerta operativa ──────────────────────────────────────────── */
.ui-alertbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  padding: 7px var(--space-5);
  background: var(--color-danger-muted);
  border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}
.ui-alertbar-tag {
  background: var(--color-danger); color: var(--color-primary-text);
  font-size: 10px; font-weight: var(--weight-extrabold); letter-spacing: .8px;
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.ui-alertbar-item { display: flex; gap: 7px; align-items: baseline; }
.ui-alertbar-item .ui-mono { font-family: var(--font-mono); font-weight: var(--weight-bold); }
/* Se pinta DENTRO de .ui-alertbar, cuyo fondo es --color-danger-muted: la tinta
   sale del token validado contra ESE fondo, no del rojo crudo (daba 2.41-4.03). */
.ui-alertbar-more { margin-left: auto; color: var(--color-danger-on-muted); font-weight: var(--weight-semibold); }

/* ── Boton de icono con contador ─────────────────────────────────────────── */
.ui-iconbtn {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  border: 1px solid var(--border-color); background: var(--surface-raised);
  display: grid; place-items: center; position: relative; color: var(--text-secondary);
}
.ui-iconbtn:hover:not(:disabled):not(:where([aria-disabled="true"])) { background: var(--surface-hover); }
.ui-iconbtn-dot {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
  border-radius: var(--radius-full); background: var(--color-danger);
  color: var(--color-primary-text); font-size: 10px; font-weight: var(--weight-bold);
  display: grid; place-items: center; padding: 0 4px;
}

/* ── Acciones por fila ───────────────────────────────────────────────────── */
.ui-rowacts { display: inline-flex; align-items: center; gap: 4px; }
.ui-rowacts > button {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-muted);
  display: grid; place-items: center;
}
.ui-rowacts > button:hover:not(:disabled):not(:where([aria-disabled="true"])) {
  background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-color);
}
.ui-rowacts > button:disabled { opacity: .45; cursor: not-allowed; }

/* =========================================================================
   CLASES DE COLOR DE TAILWIND — REDIRIGIDAS AL CONTRATO
   =========================================================================
   El codigo generado y la plantilla usan 1273 clases de color de Tailwind con
   tono numerico (text-gray-700, bg-gray-50, border-red-300...). Traen el color
   FIJO: no cambian con ninguno de los 8 temas ni con el modo oscuro, y son
   justo las que dejaban gris el texto de los formularios cuando todo lo demas
   ya seguia al tema.

   Se redefinen aqui contra tokens, igual que se hizo con las de Bootstrap: el
   marcado existente pasa a ser tematizable sin tocar un solo sitio de llamada.

   El mapeo es por SIGNIFICADO, no por tono exacto:
     50-100  fondo suave      200-300  borde
     400-500 texto atenuado   600-700  texto secundario   800-900 texto principal
   ========================================================================= */
.text-gray-50 { color: var(--surface-inset) !important; }
.text-gray-100 { color: var(--surface-inset) !important; }
.text-gray-200 { color: var(--border-color) !important; }
.text-gray-300 { color: var(--border-color-strong) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-500 { color: var(--text-muted) !important; }
.text-gray-600 { color: var(--text-secondary) !important; }
.text-gray-700 { color: var(--text-secondary) !important; }
.text-gray-800 { color: var(--text-primary) !important; }
.text-gray-900 { color: var(--text-primary) !important; }
.text-gray-950 { color: var(--text-primary) !important; }
.bg-gray-50 { background-color: var(--surface-inset) !important; }
.bg-gray-100 { background-color: var(--surface-inset) !important; }
.bg-gray-200 { background-color: var(--border-color) !important; }
.bg-gray-700 { background-color: var(--text-secondary) !important; }
.bg-gray-800 { background-color: var(--text-primary) !important; }
.bg-gray-900 { background-color: var(--text-primary) !important; }
.border-gray-200 { border-color: var(--border-color) !important; }
.border-gray-300 { border-color: var(--border-color-strong) !important; }
.border-gray-400 { border-color: var(--text-muted) !important; }
.text-slate-50 { color: var(--surface-inset) !important; }
.text-slate-100 { color: var(--surface-inset) !important; }
.text-slate-200 { color: var(--border-color) !important; }
.text-slate-300 { color: var(--border-color-strong) !important; }
.text-slate-400 { color: var(--text-muted) !important; }
.text-slate-500 { color: var(--text-muted) !important; }
.text-slate-600 { color: var(--text-secondary) !important; }
.text-slate-700 { color: var(--text-secondary) !important; }
.text-slate-800 { color: var(--text-primary) !important; }
.text-slate-900 { color: var(--text-primary) !important; }
.text-slate-950 { color: var(--text-primary) !important; }
.bg-slate-50 { background-color: var(--surface-inset) !important; }
.bg-slate-100 { background-color: var(--surface-inset) !important; }
.bg-slate-200 { background-color: var(--border-color) !important; }
.bg-slate-700 { background-color: var(--text-secondary) !important; }
.bg-slate-800 { background-color: var(--text-primary) !important; }
.bg-slate-900 { background-color: var(--text-primary) !important; }
.border-slate-200 { border-color: var(--border-color) !important; }
.border-slate-300 { border-color: var(--border-color-strong) !important; }
.border-slate-400 { border-color: var(--text-muted) !important; }
.text-zinc-50 { color: var(--surface-inset) !important; }
.text-zinc-100 { color: var(--surface-inset) !important; }
.text-zinc-200 { color: var(--border-color) !important; }
.text-zinc-300 { color: var(--border-color-strong) !important; }
.text-zinc-400 { color: var(--text-muted) !important; }
.text-zinc-500 { color: var(--text-muted) !important; }
.text-zinc-600 { color: var(--text-secondary) !important; }
.text-zinc-700 { color: var(--text-secondary) !important; }
.text-zinc-800 { color: var(--text-primary) !important; }
.text-zinc-900 { color: var(--text-primary) !important; }
.text-zinc-950 { color: var(--text-primary) !important; }
.bg-zinc-50 { background-color: var(--surface-inset) !important; }
.bg-zinc-100 { background-color: var(--surface-inset) !important; }
.bg-zinc-200 { background-color: var(--border-color) !important; }
.bg-zinc-700 { background-color: var(--text-secondary) !important; }
.bg-zinc-800 { background-color: var(--text-primary) !important; }
.bg-zinc-900 { background-color: var(--text-primary) !important; }
.border-zinc-200 { border-color: var(--border-color) !important; }
.border-zinc-300 { border-color: var(--border-color-strong) !important; }
.border-zinc-400 { border-color: var(--text-muted) !important; }
.text-neutral-50 { color: var(--surface-inset) !important; }
.text-neutral-100 { color: var(--surface-inset) !important; }
.text-neutral-200 { color: var(--border-color) !important; }
.text-neutral-300 { color: var(--border-color-strong) !important; }
.text-neutral-400 { color: var(--text-muted) !important; }
.text-neutral-500 { color: var(--text-muted) !important; }
.text-neutral-600 { color: var(--text-secondary) !important; }
.text-neutral-700 { color: var(--text-secondary) !important; }
.text-neutral-800 { color: var(--text-primary) !important; }
.text-neutral-900 { color: var(--text-primary) !important; }
.text-neutral-950 { color: var(--text-primary) !important; }
.bg-neutral-50 { background-color: var(--surface-inset) !important; }
.bg-neutral-100 { background-color: var(--surface-inset) !important; }
.bg-neutral-200 { background-color: var(--border-color) !important; }
.bg-neutral-700 { background-color: var(--text-secondary) !important; }
.bg-neutral-800 { background-color: var(--text-primary) !important; }
.bg-neutral-900 { background-color: var(--text-primary) !important; }
.border-neutral-200 { border-color: var(--border-color) !important; }
.border-neutral-300 { border-color: var(--border-color-strong) !important; }
.border-neutral-400 { border-color: var(--text-muted) !important; }
.text-stone-50 { color: var(--surface-inset) !important; }
.text-stone-100 { color: var(--surface-inset) !important; }
.text-stone-200 { color: var(--border-color) !important; }
.text-stone-300 { color: var(--border-color-strong) !important; }
.text-stone-400 { color: var(--text-muted) !important; }
.text-stone-500 { color: var(--text-muted) !important; }
.text-stone-600 { color: var(--text-secondary) !important; }
.text-stone-700 { color: var(--text-secondary) !important; }
.text-stone-800 { color: var(--text-primary) !important; }
.text-stone-900 { color: var(--text-primary) !important; }
.text-stone-950 { color: var(--text-primary) !important; }
.bg-stone-50 { background-color: var(--surface-inset) !important; }
.bg-stone-100 { background-color: var(--surface-inset) !important; }
.bg-stone-200 { background-color: var(--border-color) !important; }
.bg-stone-700 { background-color: var(--text-secondary) !important; }
.bg-stone-800 { background-color: var(--text-primary) !important; }
.bg-stone-900 { background-color: var(--text-primary) !important; }
.border-stone-200 { border-color: var(--border-color) !important; }
.border-stone-300 { border-color: var(--border-color-strong) !important; }
.border-stone-400 { border-color: var(--text-muted) !important; }

.bg-blue-50 { background-color: var(--color-primary-muted) !important; }
.text-blue-50 { color: var(--color-primary) !important; }
.bg-blue-100 { background-color: var(--color-primary-muted) !important; }
.text-blue-100 { color: var(--color-primary) !important; }
.bg-blue-200 { background-color: var(--color-primary-muted) !important; }
.border-blue-200 { border-color: var(--color-primary) !important; }
.text-blue-200 { color: var(--color-primary) !important; }
.bg-blue-300 { background-color: var(--color-primary-muted) !important; }
.border-blue-300 { border-color: var(--color-primary) !important; }
.text-blue-300 { color: var(--color-primary) !important; }
.bg-blue-400 { background-color: var(--color-primary) !important; }
.border-blue-400 { border-color: var(--color-primary) !important; }
.text-blue-400 { color: var(--color-primary) !important; }
.bg-blue-500 { background-color: var(--color-primary) !important; }
.border-blue-500 { border-color: var(--color-primary) !important; }
.text-blue-500 { color: var(--color-primary) !important; }
.bg-blue-600 { background-color: var(--color-primary) !important; }
.border-blue-600 { border-color: var(--color-primary) !important; }
.text-blue-600 { color: var(--color-primary) !important; }
.bg-blue-700 { background-color: var(--color-primary-hover) !important; }
.text-blue-700 { color: var(--color-primary-hover) !important; }
.bg-blue-800 { background-color: var(--color-primary-hover) !important; }
.text-blue-800 { color: var(--color-primary-hover) !important; }
.bg-blue-900 { background-color: var(--color-primary-hover) !important; }
.text-blue-900 { color: var(--color-primary-hover) !important; }
.bg-indigo-50 { background-color: var(--color-primary-muted) !important; }
.text-indigo-50 { color: var(--color-primary) !important; }
.bg-indigo-100 { background-color: var(--color-primary-muted) !important; }
.text-indigo-100 { color: var(--color-primary) !important; }
.bg-indigo-200 { background-color: var(--color-primary-muted) !important; }
.border-indigo-200 { border-color: var(--color-primary) !important; }
.text-indigo-200 { color: var(--color-primary) !important; }
.bg-indigo-300 { background-color: var(--color-primary-muted) !important; }
.border-indigo-300 { border-color: var(--color-primary) !important; }
.text-indigo-300 { color: var(--color-primary) !important; }
.bg-indigo-400 { background-color: var(--color-primary) !important; }
.border-indigo-400 { border-color: var(--color-primary) !important; }
.text-indigo-400 { color: var(--color-primary) !important; }
.bg-indigo-500 { background-color: var(--color-primary) !important; }
.border-indigo-500 { border-color: var(--color-primary) !important; }
.text-indigo-500 { color: var(--color-primary) !important; }
.bg-indigo-600 { background-color: var(--color-primary) !important; }
.border-indigo-600 { border-color: var(--color-primary) !important; }
.text-indigo-600 { color: var(--color-primary) !important; }
.bg-indigo-700 { background-color: var(--color-primary-hover) !important; }
.text-indigo-700 { color: var(--color-primary-hover) !important; }
.bg-indigo-800 { background-color: var(--color-primary-hover) !important; }
.text-indigo-800 { color: var(--color-primary-hover) !important; }
.bg-indigo-900 { background-color: var(--color-primary-hover) !important; }
.text-indigo-900 { color: var(--color-primary-hover) !important; }
.bg-violet-50 { background-color: var(--color-primary-muted) !important; }
.text-violet-50 { color: var(--color-primary) !important; }
.bg-violet-100 { background-color: var(--color-primary-muted) !important; }
.text-violet-100 { color: var(--color-primary) !important; }
.bg-violet-200 { background-color: var(--color-primary-muted) !important; }
.border-violet-200 { border-color: var(--color-primary) !important; }
.text-violet-200 { color: var(--color-primary) !important; }
.bg-violet-300 { background-color: var(--color-primary-muted) !important; }
.border-violet-300 { border-color: var(--color-primary) !important; }
.text-violet-300 { color: var(--color-primary) !important; }
.bg-violet-400 { background-color: var(--color-primary) !important; }
.border-violet-400 { border-color: var(--color-primary) !important; }
.text-violet-400 { color: var(--color-primary) !important; }
.bg-violet-500 { background-color: var(--color-primary) !important; }
.border-violet-500 { border-color: var(--color-primary) !important; }
.text-violet-500 { color: var(--color-primary) !important; }
.bg-violet-600 { background-color: var(--color-primary) !important; }
.border-violet-600 { border-color: var(--color-primary) !important; }
.text-violet-600 { color: var(--color-primary) !important; }
.bg-violet-700 { background-color: var(--color-primary-hover) !important; }
.text-violet-700 { color: var(--color-primary-hover) !important; }
.bg-violet-800 { background-color: var(--color-primary-hover) !important; }
.text-violet-800 { color: var(--color-primary-hover) !important; }
.bg-violet-900 { background-color: var(--color-primary-hover) !important; }
.text-violet-900 { color: var(--color-primary-hover) !important; }
.bg-purple-50 { background-color: var(--color-primary-muted) !important; }
.text-purple-50 { color: var(--color-primary) !important; }
.bg-purple-100 { background-color: var(--color-primary-muted) !important; }
.text-purple-100 { color: var(--color-primary) !important; }
.bg-purple-200 { background-color: var(--color-primary-muted) !important; }
.border-purple-200 { border-color: var(--color-primary) !important; }
.text-purple-200 { color: var(--color-primary) !important; }
.bg-purple-300 { background-color: var(--color-primary-muted) !important; }
.border-purple-300 { border-color: var(--color-primary) !important; }
.text-purple-300 { color: var(--color-primary) !important; }
.bg-purple-400 { background-color: var(--color-primary) !important; }
.border-purple-400 { border-color: var(--color-primary) !important; }
.text-purple-400 { color: var(--color-primary) !important; }
.bg-purple-500 { background-color: var(--color-primary) !important; }
.border-purple-500 { border-color: var(--color-primary) !important; }
.text-purple-500 { color: var(--color-primary) !important; }
.bg-purple-600 { background-color: var(--color-primary) !important; }
.border-purple-600 { border-color: var(--color-primary) !important; }
.text-purple-600 { color: var(--color-primary) !important; }
.bg-purple-700 { background-color: var(--color-primary-hover) !important; }
.text-purple-700 { color: var(--color-primary-hover) !important; }
.bg-purple-800 { background-color: var(--color-primary-hover) !important; }
.text-purple-800 { color: var(--color-primary-hover) !important; }
.bg-purple-900 { background-color: var(--color-primary-hover) !important; }
.text-purple-900 { color: var(--color-primary-hover) !important; }
.bg-red-50 { background-color: var(--color-danger-muted) !important; }
.text-red-50 { color: var(--color-danger-on-surface) !important; }
.bg-red-100 { background-color: var(--color-danger-muted) !important; }
.text-red-100 { color: var(--color-danger-on-surface) !important; }
.bg-red-200 { background-color: var(--color-danger-muted) !important; }
.border-red-200 { border-color: var(--color-danger) !important; }
.text-red-200 { color: var(--color-danger-on-surface) !important; }
.bg-red-300 { background-color: var(--color-danger-muted) !important; }
.border-red-300 { border-color: var(--color-danger) !important; }
.text-red-300 { color: var(--color-danger-on-surface) !important; }
.bg-red-400 { background-color: var(--color-danger) !important; }
.border-red-400 { border-color: var(--color-danger) !important; }
.text-red-400 { color: var(--color-danger-on-surface) !important; }
.bg-red-500 { background-color: var(--color-danger) !important; }
.border-red-500 { border-color: var(--color-danger) !important; }
.text-red-500 { color: var(--color-danger-on-surface) !important; }
.bg-red-600 { background-color: var(--color-danger) !important; }
.border-red-600 { border-color: var(--color-danger) !important; }
.text-red-600 { color: var(--color-danger-on-surface) !important; }
.bg-red-700 { background-color: var(--color-danger-hover) !important; }
.text-red-700 { color: var(--color-danger-text) !important; }
.bg-red-800 { background-color: var(--color-danger-hover) !important; }
.text-red-800 { color: var(--color-danger-text) !important; }
.bg-red-900 { background-color: var(--color-danger-hover) !important; }
.text-red-900 { color: var(--color-danger-text) !important; }
.bg-rose-50 { background-color: var(--color-danger-muted) !important; }
.text-rose-50 { color: var(--color-danger-on-surface) !important; }
.bg-rose-100 { background-color: var(--color-danger-muted) !important; }
.text-rose-100 { color: var(--color-danger-on-surface) !important; }
.bg-rose-200 { background-color: var(--color-danger-muted) !important; }
.border-rose-200 { border-color: var(--color-danger) !important; }
.text-rose-200 { color: var(--color-danger-on-surface) !important; }
.bg-rose-300 { background-color: var(--color-danger-muted) !important; }
.border-rose-300 { border-color: var(--color-danger) !important; }
.text-rose-300 { color: var(--color-danger-on-surface) !important; }
.bg-rose-400 { background-color: var(--color-danger) !important; }
.border-rose-400 { border-color: var(--color-danger) !important; }
.text-rose-400 { color: var(--color-danger-on-surface) !important; }
.bg-rose-500 { background-color: var(--color-danger) !important; }
.border-rose-500 { border-color: var(--color-danger) !important; }
.text-rose-500 { color: var(--color-danger-on-surface) !important; }
.bg-rose-600 { background-color: var(--color-danger) !important; }
.border-rose-600 { border-color: var(--color-danger) !important; }
.text-rose-600 { color: var(--color-danger-on-surface) !important; }
.bg-rose-700 { background-color: var(--color-danger-hover) !important; }
.text-rose-700 { color: var(--color-danger-text) !important; }
.bg-rose-800 { background-color: var(--color-danger-hover) !important; }
.text-rose-800 { color: var(--color-danger-text) !important; }
.bg-rose-900 { background-color: var(--color-danger-hover) !important; }
.text-rose-900 { color: var(--color-danger-text) !important; }
.bg-pink-50 { background-color: var(--color-danger-muted) !important; }
.text-pink-50 { color: var(--color-danger-on-surface) !important; }
.bg-pink-100 { background-color: var(--color-danger-muted) !important; }
.text-pink-100 { color: var(--color-danger-on-surface) !important; }
.bg-pink-200 { background-color: var(--color-danger-muted) !important; }
.border-pink-200 { border-color: var(--color-danger) !important; }
.text-pink-200 { color: var(--color-danger-on-surface) !important; }
.bg-pink-300 { background-color: var(--color-danger-muted) !important; }
.border-pink-300 { border-color: var(--color-danger) !important; }
.text-pink-300 { color: var(--color-danger-on-surface) !important; }
.bg-pink-400 { background-color: var(--color-danger) !important; }
.border-pink-400 { border-color: var(--color-danger) !important; }
.text-pink-400 { color: var(--color-danger-on-surface) !important; }
.bg-pink-500 { background-color: var(--color-danger) !important; }
.border-pink-500 { border-color: var(--color-danger) !important; }
.text-pink-500 { color: var(--color-danger-on-surface) !important; }
.bg-pink-600 { background-color: var(--color-danger) !important; }
.border-pink-600 { border-color: var(--color-danger) !important; }
.text-pink-600 { color: var(--color-danger-on-surface) !important; }
.bg-pink-700 { background-color: var(--color-danger-hover) !important; }
.text-pink-700 { color: var(--color-danger-text) !important; }
.bg-pink-800 { background-color: var(--color-danger-hover) !important; }
.text-pink-800 { color: var(--color-danger-text) !important; }
.bg-pink-900 { background-color: var(--color-danger-hover) !important; }
.text-pink-900 { color: var(--color-danger-text) !important; }
.bg-green-50 { background-color: var(--color-success-muted) !important; }
.text-green-50 { color: var(--color-success-on-surface) !important; }
.bg-green-100 { background-color: var(--color-success-muted) !important; }
.text-green-100 { color: var(--color-success-on-surface) !important; }
.bg-green-200 { background-color: var(--color-success-muted) !important; }
.border-green-200 { border-color: var(--color-success) !important; }
.text-green-200 { color: var(--color-success-on-surface) !important; }
.bg-green-300 { background-color: var(--color-success-muted) !important; }
.border-green-300 { border-color: var(--color-success) !important; }
.text-green-300 { color: var(--color-success-on-surface) !important; }
.bg-green-400 { background-color: var(--color-success) !important; }
.border-green-400 { border-color: var(--color-success) !important; }
.text-green-400 { color: var(--color-success-on-surface) !important; }
.bg-green-500 { background-color: var(--color-success) !important; }
.border-green-500 { border-color: var(--color-success) !important; }
.text-green-500 { color: var(--color-success-on-surface) !important; }
.bg-green-600 { background-color: var(--color-success) !important; }
.border-green-600 { border-color: var(--color-success) !important; }
.text-green-600 { color: var(--color-success-on-surface) !important; }
.bg-green-700 { background-color: var(--color-success-hover) !important; }
.text-green-700 { color: var(--color-success-text) !important; }
.bg-green-800 { background-color: var(--color-success-hover) !important; }
.text-green-800 { color: var(--color-success-text) !important; }
.bg-green-900 { background-color: var(--color-success-hover) !important; }
.text-green-900 { color: var(--color-success-text) !important; }
.bg-emerald-50 { background-color: var(--color-success-muted) !important; }
.text-emerald-50 { color: var(--color-success-on-surface) !important; }
.bg-emerald-100 { background-color: var(--color-success-muted) !important; }
.text-emerald-100 { color: var(--color-success-on-surface) !important; }
.bg-emerald-200 { background-color: var(--color-success-muted) !important; }
.border-emerald-200 { border-color: var(--color-success) !important; }
.text-emerald-200 { color: var(--color-success-on-surface) !important; }
.bg-emerald-300 { background-color: var(--color-success-muted) !important; }
.border-emerald-300 { border-color: var(--color-success) !important; }
.text-emerald-300 { color: var(--color-success-on-surface) !important; }
.bg-emerald-400 { background-color: var(--color-success) !important; }
.border-emerald-400 { border-color: var(--color-success) !important; }
.text-emerald-400 { color: var(--color-success-on-surface) !important; }
.bg-emerald-500 { background-color: var(--color-success) !important; }
.border-emerald-500 { border-color: var(--color-success) !important; }
.text-emerald-500 { color: var(--color-success-on-surface) !important; }
.bg-emerald-600 { background-color: var(--color-success) !important; }
.border-emerald-600 { border-color: var(--color-success) !important; }
.text-emerald-600 { color: var(--color-success-on-surface) !important; }
.bg-emerald-700 { background-color: var(--color-success-hover) !important; }
.text-emerald-700 { color: var(--color-success-text) !important; }
.bg-emerald-800 { background-color: var(--color-success-hover) !important; }
.text-emerald-800 { color: var(--color-success-text) !important; }
.bg-emerald-900 { background-color: var(--color-success-hover) !important; }
.text-emerald-900 { color: var(--color-success-text) !important; }
.bg-teal-50 { background-color: var(--color-success-muted) !important; }
.text-teal-50 { color: var(--color-success-on-surface) !important; }
.bg-teal-100 { background-color: var(--color-success-muted) !important; }
.text-teal-100 { color: var(--color-success-on-surface) !important; }
.bg-teal-200 { background-color: var(--color-success-muted) !important; }
.border-teal-200 { border-color: var(--color-success) !important; }
.text-teal-200 { color: var(--color-success-on-surface) !important; }
.bg-teal-300 { background-color: var(--color-success-muted) !important; }
.border-teal-300 { border-color: var(--color-success) !important; }
.text-teal-300 { color: var(--color-success-on-surface) !important; }
.bg-teal-400 { background-color: var(--color-success) !important; }
.border-teal-400 { border-color: var(--color-success) !important; }
.text-teal-400 { color: var(--color-success-on-surface) !important; }
.bg-teal-500 { background-color: var(--color-success) !important; }
.border-teal-500 { border-color: var(--color-success) !important; }
.text-teal-500 { color: var(--color-success-on-surface) !important; }
.bg-teal-600 { background-color: var(--color-success) !important; }
.border-teal-600 { border-color: var(--color-success) !important; }
.text-teal-600 { color: var(--color-success-on-surface) !important; }
.bg-teal-700 { background-color: var(--color-success-hover) !important; }
.text-teal-700 { color: var(--color-success-text) !important; }
.bg-teal-800 { background-color: var(--color-success-hover) !important; }
.text-teal-800 { color: var(--color-success-text) !important; }
.bg-teal-900 { background-color: var(--color-success-hover) !important; }
.text-teal-900 { color: var(--color-success-text) !important; }
.bg-lime-50 { background-color: var(--color-success-muted) !important; }
.text-lime-50 { color: var(--color-success-on-surface) !important; }
.bg-lime-100 { background-color: var(--color-success-muted) !important; }
.text-lime-100 { color: var(--color-success-on-surface) !important; }
.bg-lime-200 { background-color: var(--color-success-muted) !important; }
.border-lime-200 { border-color: var(--color-success) !important; }
.text-lime-200 { color: var(--color-success-on-surface) !important; }
.bg-lime-300 { background-color: var(--color-success-muted) !important; }
.border-lime-300 { border-color: var(--color-success) !important; }
.text-lime-300 { color: var(--color-success-on-surface) !important; }
.bg-lime-400 { background-color: var(--color-success) !important; }
.border-lime-400 { border-color: var(--color-success) !important; }
.text-lime-400 { color: var(--color-success-on-surface) !important; }
.bg-lime-500 { background-color: var(--color-success) !important; }
.border-lime-500 { border-color: var(--color-success) !important; }
.text-lime-500 { color: var(--color-success-on-surface) !important; }
.bg-lime-600 { background-color: var(--color-success) !important; }
.border-lime-600 { border-color: var(--color-success) !important; }
.text-lime-600 { color: var(--color-success-on-surface) !important; }
.bg-lime-700 { background-color: var(--color-success-hover) !important; }
.text-lime-700 { color: var(--color-success-text) !important; }
.bg-lime-800 { background-color: var(--color-success-hover) !important; }
.text-lime-800 { color: var(--color-success-text) !important; }
.bg-lime-900 { background-color: var(--color-success-hover) !important; }
.text-lime-900 { color: var(--color-success-text) !important; }
.bg-amber-50 { background-color: var(--color-warning-muted) !important; }
.text-amber-50 { color: var(--color-warning-on-surface) !important; }
.bg-amber-100 { background-color: var(--color-warning-muted) !important; }
.text-amber-100 { color: var(--color-warning-on-surface) !important; }
.bg-amber-200 { background-color: var(--color-warning-muted) !important; }
.border-amber-200 { border-color: var(--color-warning) !important; }
.text-amber-200 { color: var(--color-warning-on-surface) !important; }
.bg-amber-300 { background-color: var(--color-warning-muted) !important; }
.border-amber-300 { border-color: var(--color-warning) !important; }
.text-amber-300 { color: var(--color-warning-on-surface) !important; }
.bg-amber-400 { background-color: var(--color-warning) !important; }
.border-amber-400 { border-color: var(--color-warning) !important; }
.text-amber-400 { color: var(--color-warning-on-surface) !important; }
.bg-amber-500 { background-color: var(--color-warning) !important; }
.border-amber-500 { border-color: var(--color-warning) !important; }
.text-amber-500 { color: var(--color-warning-on-surface) !important; }
.bg-amber-600 { background-color: var(--color-warning) !important; }
.border-amber-600 { border-color: var(--color-warning) !important; }
.text-amber-600 { color: var(--color-warning-on-surface) !important; }
.bg-amber-700 { background-color: var(--color-warning-hover) !important; }
.text-amber-700 { color: var(--color-warning-text) !important; }
.bg-amber-800 { background-color: var(--color-warning-hover) !important; }
.text-amber-800 { color: var(--color-warning-text) !important; }
.bg-amber-900 { background-color: var(--color-warning-hover) !important; }
.text-amber-900 { color: var(--color-warning-text) !important; }
.bg-yellow-50 { background-color: var(--color-warning-muted) !important; }
.text-yellow-50 { color: var(--color-warning-on-surface) !important; }
.bg-yellow-100 { background-color: var(--color-warning-muted) !important; }
.text-yellow-100 { color: var(--color-warning-on-surface) !important; }
.bg-yellow-200 { background-color: var(--color-warning-muted) !important; }
.border-yellow-200 { border-color: var(--color-warning) !important; }
.text-yellow-200 { color: var(--color-warning-on-surface) !important; }
.bg-yellow-300 { background-color: var(--color-warning-muted) !important; }
.border-yellow-300 { border-color: var(--color-warning) !important; }
.text-yellow-300 { color: var(--color-warning-on-surface) !important; }
.bg-yellow-400 { background-color: var(--color-warning) !important; }
.border-yellow-400 { border-color: var(--color-warning) !important; }
.text-yellow-400 { color: var(--color-warning-on-surface) !important; }
.bg-yellow-500 { background-color: var(--color-warning) !important; }
.border-yellow-500 { border-color: var(--color-warning) !important; }
.text-yellow-500 { color: var(--color-warning-on-surface) !important; }
.bg-yellow-600 { background-color: var(--color-warning) !important; }
.border-yellow-600 { border-color: var(--color-warning) !important; }
.text-yellow-600 { color: var(--color-warning-on-surface) !important; }
.bg-yellow-700 { background-color: var(--color-warning-hover) !important; }
.text-yellow-700 { color: var(--color-warning-text) !important; }
.bg-yellow-800 { background-color: var(--color-warning-hover) !important; }
.text-yellow-800 { color: var(--color-warning-text) !important; }
.bg-yellow-900 { background-color: var(--color-warning-hover) !important; }
.text-yellow-900 { color: var(--color-warning-text) !important; }
.bg-orange-50 { background-color: var(--color-warning-muted) !important; }
.text-orange-50 { color: var(--color-warning-on-surface) !important; }
.bg-orange-100 { background-color: var(--color-warning-muted) !important; }
.text-orange-100 { color: var(--color-warning-on-surface) !important; }
.bg-orange-200 { background-color: var(--color-warning-muted) !important; }
.border-orange-200 { border-color: var(--color-warning) !important; }
.text-orange-200 { color: var(--color-warning-on-surface) !important; }
.bg-orange-300 { background-color: var(--color-warning-muted) !important; }
.border-orange-300 { border-color: var(--color-warning) !important; }
.text-orange-300 { color: var(--color-warning-on-surface) !important; }
.bg-orange-400 { background-color: var(--color-warning) !important; }
.border-orange-400 { border-color: var(--color-warning) !important; }
.text-orange-400 { color: var(--color-warning-on-surface) !important; }
.bg-orange-500 { background-color: var(--color-warning) !important; }
.border-orange-500 { border-color: var(--color-warning) !important; }
.text-orange-500 { color: var(--color-warning-on-surface) !important; }
.bg-orange-600 { background-color: var(--color-warning) !important; }
.border-orange-600 { border-color: var(--color-warning) !important; }
.text-orange-600 { color: var(--color-warning-on-surface) !important; }
.bg-orange-700 { background-color: var(--color-warning-hover) !important; }
.text-orange-700 { color: var(--color-warning-text) !important; }
.bg-orange-800 { background-color: var(--color-warning-hover) !important; }
.text-orange-800 { color: var(--color-warning-text) !important; }
.bg-orange-900 { background-color: var(--color-warning-hover) !important; }
.text-orange-900 { color: var(--color-warning-text) !important; }
.bg-cyan-50 { background-color: var(--color-info-muted) !important; }
.text-cyan-50 { color: var(--color-info-on-surface) !important; }
.bg-cyan-100 { background-color: var(--color-info-muted) !important; }
.text-cyan-100 { color: var(--color-info-on-surface) !important; }
.bg-cyan-200 { background-color: var(--color-info-muted) !important; }
.border-cyan-200 { border-color: var(--color-info) !important; }
.text-cyan-200 { color: var(--color-info-on-surface) !important; }
.bg-cyan-300 { background-color: var(--color-info-muted) !important; }
.border-cyan-300 { border-color: var(--color-info) !important; }
.text-cyan-300 { color: var(--color-info-on-surface) !important; }
.bg-cyan-400 { background-color: var(--color-info) !important; }
.border-cyan-400 { border-color: var(--color-info) !important; }
.text-cyan-400 { color: var(--color-info-on-surface) !important; }
.bg-cyan-500 { background-color: var(--color-info) !important; }
.border-cyan-500 { border-color: var(--color-info) !important; }
.text-cyan-500 { color: var(--color-info-on-surface) !important; }
.bg-cyan-600 { background-color: var(--color-info) !important; }
.border-cyan-600 { border-color: var(--color-info) !important; }
.text-cyan-600 { color: var(--color-info-on-surface) !important; }
.bg-cyan-700 { background-color: var(--color-info-hover) !important; }
.text-cyan-700 { color: var(--color-info-text) !important; }
.bg-cyan-800 { background-color: var(--color-info-hover) !important; }
.text-cyan-800 { color: var(--color-info-text) !important; }
.bg-cyan-900 { background-color: var(--color-info-hover) !important; }
.text-cyan-900 { color: var(--color-info-text) !important; }
.bg-sky-50 { background-color: var(--color-info-muted) !important; }
.text-sky-50 { color: var(--color-info-on-surface) !important; }
.bg-sky-100 { background-color: var(--color-info-muted) !important; }
.text-sky-100 { color: var(--color-info-on-surface) !important; }
.bg-sky-200 { background-color: var(--color-info-muted) !important; }
.border-sky-200 { border-color: var(--color-info) !important; }
.text-sky-200 { color: var(--color-info-on-surface) !important; }
.bg-sky-300 { background-color: var(--color-info-muted) !important; }
.border-sky-300 { border-color: var(--color-info) !important; }
.text-sky-300 { color: var(--color-info-on-surface) !important; }
.bg-sky-400 { background-color: var(--color-info) !important; }
.border-sky-400 { border-color: var(--color-info) !important; }
.text-sky-400 { color: var(--color-info-on-surface) !important; }
.bg-sky-500 { background-color: var(--color-info) !important; }
.border-sky-500 { border-color: var(--color-info) !important; }
.text-sky-500 { color: var(--color-info-on-surface) !important; }
.bg-sky-600 { background-color: var(--color-info) !important; }
.border-sky-600 { border-color: var(--color-info) !important; }
.text-sky-600 { color: var(--color-info-on-surface) !important; }
.bg-sky-700 { background-color: var(--color-info-hover) !important; }
.text-sky-700 { color: var(--color-info-text) !important; }
.bg-sky-800 { background-color: var(--color-info-hover) !important; }
.text-sky-800 { color: var(--color-info-text) !important; }
.bg-sky-900 { background-color: var(--color-info-hover) !important; }
.text-sky-900 { color: var(--color-info-text) !important; }

/* Tonos restantes de la redireccion de Tailwind (bordes oscuros, fondos de
   gris medio, anillo de foco y divisores). */
.border-gray-100 { border-color: var(--border-color) !important; }
.border-gray-400 { border-color: var(--border-color-strong) !important; }
.border-gray-500 { border-color: var(--border-color-strong) !important; }
.border-gray-600 { border-color: var(--text-secondary) !important; }
.border-gray-700 { border-color: var(--text-secondary) !important; }
.border-gray-800 { border-color: var(--text-primary) !important; }
.border-gray-900 { border-color: var(--text-primary) !important; }
.bg-gray-300 { background-color: var(--border-color-strong) !important; }
.bg-gray-400 { background-color: var(--text-muted) !important; }
.bg-gray-500 { background-color: var(--text-muted) !important; }
.bg-gray-600 { background-color: var(--text-secondary) !important; }
.divide-gray-100 > * + * { border-color: var(--border-color) !important; }
.divide-gray-200 > * + * { border-color: var(--border-color) !important; }
.divide-gray-300 > * + * { border-color: var(--border-color-strong) !important; }
.border-slate-100 { border-color: var(--border-color) !important; }
.border-slate-400 { border-color: var(--border-color-strong) !important; }
.border-slate-500 { border-color: var(--border-color-strong) !important; }
.border-slate-600 { border-color: var(--text-secondary) !important; }
.border-slate-700 { border-color: var(--text-secondary) !important; }
.border-slate-800 { border-color: var(--text-primary) !important; }
.border-slate-900 { border-color: var(--text-primary) !important; }
.bg-slate-300 { background-color: var(--border-color-strong) !important; }
.bg-slate-400 { background-color: var(--text-muted) !important; }
.bg-slate-500 { background-color: var(--text-muted) !important; }
.bg-slate-600 { background-color: var(--text-secondary) !important; }
.divide-slate-100 > * + * { border-color: var(--border-color) !important; }
.divide-slate-200 > * + * { border-color: var(--border-color) !important; }
.divide-slate-300 > * + * { border-color: var(--border-color-strong) !important; }
.border-zinc-100 { border-color: var(--border-color) !important; }
.border-zinc-400 { border-color: var(--border-color-strong) !important; }
.border-zinc-500 { border-color: var(--border-color-strong) !important; }
.border-zinc-600 { border-color: var(--text-secondary) !important; }
.border-zinc-700 { border-color: var(--text-secondary) !important; }
.border-zinc-800 { border-color: var(--text-primary) !important; }
.border-zinc-900 { border-color: var(--text-primary) !important; }
.bg-zinc-300 { background-color: var(--border-color-strong) !important; }
.bg-zinc-400 { background-color: var(--text-muted) !important; }
.bg-zinc-500 { background-color: var(--text-muted) !important; }
.bg-zinc-600 { background-color: var(--text-secondary) !important; }
.divide-zinc-100 > * + * { border-color: var(--border-color) !important; }
.divide-zinc-200 > * + * { border-color: var(--border-color) !important; }
.divide-zinc-300 > * + * { border-color: var(--border-color-strong) !important; }
.border-neutral-100 { border-color: var(--border-color) !important; }
.border-neutral-400 { border-color: var(--border-color-strong) !important; }
.border-neutral-500 { border-color: var(--border-color-strong) !important; }
.border-neutral-600 { border-color: var(--text-secondary) !important; }
.border-neutral-700 { border-color: var(--text-secondary) !important; }
.border-neutral-800 { border-color: var(--text-primary) !important; }
.border-neutral-900 { border-color: var(--text-primary) !important; }
.bg-neutral-300 { background-color: var(--border-color-strong) !important; }
.bg-neutral-400 { background-color: var(--text-muted) !important; }
.bg-neutral-500 { background-color: var(--text-muted) !important; }
.bg-neutral-600 { background-color: var(--text-secondary) !important; }
.divide-neutral-100 > * + * { border-color: var(--border-color) !important; }
.divide-neutral-200 > * + * { border-color: var(--border-color) !important; }
.divide-neutral-300 > * + * { border-color: var(--border-color-strong) !important; }
.border-stone-100 { border-color: var(--border-color) !important; }
.border-stone-400 { border-color: var(--border-color-strong) !important; }
.border-stone-500 { border-color: var(--border-color-strong) !important; }
.border-stone-600 { border-color: var(--text-secondary) !important; }
.border-stone-700 { border-color: var(--text-secondary) !important; }
.border-stone-800 { border-color: var(--text-primary) !important; }
.border-stone-900 { border-color: var(--text-primary) !important; }
.bg-stone-300 { background-color: var(--border-color-strong) !important; }
.bg-stone-400 { background-color: var(--text-muted) !important; }
.bg-stone-500 { background-color: var(--text-muted) !important; }
.bg-stone-600 { background-color: var(--text-secondary) !important; }
.divide-stone-100 > * + * { border-color: var(--border-color) !important; }
.divide-stone-200 > * + * { border-color: var(--border-color) !important; }
.divide-stone-300 > * + * { border-color: var(--border-color-strong) !important; }
.ring-blue-300 { --tw-ring-color: var(--color-primary) !important; }
.ring-blue-400 { --tw-ring-color: var(--color-primary) !important; }
.ring-blue-500 { --tw-ring-color: var(--color-primary) !important; }
.ring-blue-600 { --tw-ring-color: var(--color-primary) !important; }
.ring-indigo-300 { --tw-ring-color: var(--color-primary) !important; }
.ring-indigo-400 { --tw-ring-color: var(--color-primary) !important; }
.ring-indigo-500 { --tw-ring-color: var(--color-primary) !important; }
.ring-indigo-600 { --tw-ring-color: var(--color-primary) !important; }
.ring-red-300 { --tw-ring-color: var(--color-danger) !important; }
.ring-red-400 { --tw-ring-color: var(--color-danger) !important; }
.ring-red-500 { --tw-ring-color: var(--color-danger) !important; }
.ring-red-600 { --tw-ring-color: var(--color-danger) !important; }
.ring-green-300 { --tw-ring-color: var(--color-success) !important; }
.ring-green-400 { --tw-ring-color: var(--color-success) !important; }
.ring-green-500 { --tw-ring-color: var(--color-success) !important; }
.ring-green-600 { --tw-ring-color: var(--color-success) !important; }
.ring-amber-300 { --tw-ring-color: var(--color-warning) !important; }
.ring-amber-400 { --tw-ring-color: var(--color-warning) !important; }
.ring-amber-500 { --tw-ring-color: var(--color-warning) !important; }
.ring-amber-600 { --tw-ring-color: var(--color-warning) !important; }
.ring-sky-300 { --tw-ring-color: var(--color-info) !important; }
.ring-sky-400 { --tw-ring-color: var(--color-info) !important; }
.ring-sky-500 { --tw-ring-color: var(--color-info) !important; }
.ring-sky-600 { --tw-ring-color: var(--color-info) !important; }
.ring-violet-300 { --tw-ring-color: var(--color-primary) !important; }
.ring-violet-400 { --tw-ring-color: var(--color-primary) !important; }
.ring-violet-500 { --tw-ring-color: var(--color-primary) !important; }
.ring-violet-600 { --tw-ring-color: var(--color-primary) !important; }
.ring-purple-300 { --tw-ring-color: var(--color-primary) !important; }
.ring-purple-400 { --tw-ring-color: var(--color-primary) !important; }
.ring-purple-500 { --tw-ring-color: var(--color-primary) !important; }
.ring-purple-600 { --tw-ring-color: var(--color-primary) !important; }
.ring-rose-300 { --tw-ring-color: var(--color-danger) !important; }
.ring-rose-400 { --tw-ring-color: var(--color-danger) !important; }
.ring-rose-500 { --tw-ring-color: var(--color-danger) !important; }
.ring-rose-600 { --tw-ring-color: var(--color-danger) !important; }
.ring-pink-300 { --tw-ring-color: var(--color-danger) !important; }
.ring-pink-400 { --tw-ring-color: var(--color-danger) !important; }
.ring-pink-500 { --tw-ring-color: var(--color-danger) !important; }
.ring-pink-600 { --tw-ring-color: var(--color-danger) !important; }
.ring-emerald-300 { --tw-ring-color: var(--color-success) !important; }
.ring-emerald-400 { --tw-ring-color: var(--color-success) !important; }
.ring-emerald-500 { --tw-ring-color: var(--color-success) !important; }
.ring-emerald-600 { --tw-ring-color: var(--color-success) !important; }
.ring-teal-300 { --tw-ring-color: var(--color-success) !important; }
.ring-teal-400 { --tw-ring-color: var(--color-success) !important; }
.ring-teal-500 { --tw-ring-color: var(--color-success) !important; }
.ring-teal-600 { --tw-ring-color: var(--color-success) !important; }
.ring-cyan-300 { --tw-ring-color: var(--color-info) !important; }
.ring-cyan-400 { --tw-ring-color: var(--color-info) !important; }
.ring-cyan-500 { --tw-ring-color: var(--color-info) !important; }
.ring-cyan-600 { --tw-ring-color: var(--color-info) !important; }
.ring-yellow-300 { --tw-ring-color: var(--color-warning) !important; }
.ring-yellow-400 { --tw-ring-color: var(--color-warning) !important; }
.ring-yellow-500 { --tw-ring-color: var(--color-warning) !important; }
.ring-yellow-600 { --tw-ring-color: var(--color-warning) !important; }
.ring-orange-300 { --tw-ring-color: var(--color-warning) !important; }
.ring-orange-400 { --tw-ring-color: var(--color-warning) !important; }
.ring-orange-500 { --tw-ring-color: var(--color-warning) !important; }
.ring-orange-600 { --tw-ring-color: var(--color-warning) !important; }
.ring-lime-300 { --tw-ring-color: var(--color-success) !important; }
.ring-lime-400 { --tw-ring-color: var(--color-success) !important; }
.ring-lime-500 { --tw-ring-color: var(--color-success) !important; }
.ring-lime-600 { --tw-ring-color: var(--color-success) !important; }

/* =========================================================================
   LAS MISMAS REDIRECCIONES, PERO PARA LAS VARIANTES DE TAILWIND
   =========================================================================
   Las reglas de arriba redirigen la clase BASE (.text-gray-700). No alcanzan
   a las variantes: la clase que Tailwind emite para hover:text-gray-700 es
   .hover\:text-gray-700:hover, con la barra invertida escapada, y el selector
   .text-gray-700 no la toca. Eso dejaba dos averias reales:

     1. Color FIJO que reaparece al interactuar: focus:ring-blue-500 pintaba el
        anillo azul con los 8 temas; hover:bg-gray-200 y dark:bg-emerald-900
        igual.
     2. Interaccion MUERTA: cuando la clase base SI estaba redirigida, su
        !important le ganaba a la variante -- que no lo llevaba -- y un
        "bg-gray-200 hover:bg-gray-300" se quedaba sin hover.

   Aqui se replica la MISMA tabla de mapeo por significado de arriba (misma
   familia, mismo tono, mismo token) para cada variante. Los selectores van
   agrupados por declaracion para no multiplicar por ocho el peso del archivo.

   ORDEN: las variantes se emiten hover, focus, focus-visible, active,
   disabled, group-hover, dark y dark:hover, y en ese orden importa. dark:
   compila a :where(...), que NO suma especificidad, asi que empata con la
   regla base y solo gana por venir despues; y dark:hover: empata con hover:
   y tambien gana por orden.

   El selector de dark: no se invento: es el que emite Tailwind 3.4.1 con el
   tailwind.config.js de esta plantilla, que declara
   darkMode: ['selector', '[data-bs-theme="dark"]'] y compila a
   .dark\:X:where([data-bs-theme="dark"], [data-bs-theme="dark"] *).
   Si algun dia cambia esa clave del config, ESTE bloque hay que regenerarlo.

   LIMITACION CONOCIDA -- OPACIDAD (bg-slate-700/30, dark:bg-blue-900/20...):
   NO quedan cubiertas, ni aqui ni en el bloque base. Tailwind emite para ellas
   una clase distinta (.bg-slate-700\/30) que ningun selector de este archivo
   alcanza, y ademas su valor no es un color plano: es el color al 30% sobre lo
   que haya debajo. Un token opaco no puede representarlo, asi que redirigirlas
   a var(--token) las dejaria SOLIDAS -- taparia el fondo en vez de tenirlo.
   Son 9 usos hoy (8 con dark:, 1 con hover:). Se dejan a proposito con su color
   fijo y documentadas, en vez de fingir que estan tematizadas.
   ========================================================================= */

/* ---- hover: ---- */
.hover\:text-gray-50:hover,
.hover\:text-gray-100:hover,
.hover\:text-slate-50:hover,
.hover\:text-slate-100:hover,
.hover\:text-zinc-50:hover,
.hover\:text-zinc-100:hover,
.hover\:text-neutral-50:hover,
.hover\:text-neutral-100:hover,
.hover\:text-stone-50:hover,
.hover\:text-stone-100:hover { color: var(--surface-inset) !important; }
.hover\:text-gray-200:hover,
.hover\:text-slate-200:hover,
.hover\:text-zinc-200:hover,
.hover\:text-neutral-200:hover,
.hover\:text-stone-200:hover { color: var(--border-color) !important; }
.hover\:text-gray-300:hover,
.hover\:text-slate-300:hover,
.hover\:text-zinc-300:hover,
.hover\:text-neutral-300:hover,
.hover\:text-stone-300:hover { color: var(--border-color-strong) !important; }
.hover\:text-gray-400:hover,
.hover\:text-gray-500:hover,
.hover\:text-slate-400:hover,
.hover\:text-slate-500:hover,
.hover\:text-zinc-400:hover,
.hover\:text-zinc-500:hover,
.hover\:text-neutral-400:hover,
.hover\:text-neutral-500:hover,
.hover\:text-stone-400:hover,
.hover\:text-stone-500:hover { color: var(--text-muted) !important; }
.hover\:text-gray-600:hover,
.hover\:text-gray-700:hover,
.hover\:text-slate-600:hover,
.hover\:text-slate-700:hover,
.hover\:text-zinc-600:hover,
.hover\:text-zinc-700:hover,
.hover\:text-neutral-600:hover,
.hover\:text-neutral-700:hover,
.hover\:text-stone-600:hover,
.hover\:text-stone-700:hover { color: var(--text-secondary) !important; }
.hover\:text-gray-800:hover,
.hover\:text-gray-900:hover,
.hover\:text-gray-950:hover,
.hover\:text-slate-800:hover,
.hover\:text-slate-900:hover,
.hover\:text-slate-950:hover,
.hover\:text-zinc-800:hover,
.hover\:text-zinc-900:hover,
.hover\:text-zinc-950:hover,
.hover\:text-neutral-800:hover,
.hover\:text-neutral-900:hover,
.hover\:text-neutral-950:hover,
.hover\:text-stone-800:hover,
.hover\:text-stone-900:hover,
.hover\:text-stone-950:hover { color: var(--text-primary) !important; }
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover,
.hover\:bg-zinc-50:hover,
.hover\:bg-zinc-100:hover,
.hover\:bg-neutral-50:hover,
.hover\:bg-neutral-100:hover,
.hover\:bg-stone-50:hover,
.hover\:bg-stone-100:hover { background-color: var(--surface-inset) !important; }
.hover\:bg-gray-200:hover,
.hover\:bg-slate-200:hover,
.hover\:bg-zinc-200:hover,
.hover\:bg-neutral-200:hover,
.hover\:bg-stone-200:hover { background-color: var(--border-color) !important; }
.hover\:bg-gray-700:hover,
.hover\:bg-slate-700:hover,
.hover\:bg-zinc-700:hover,
.hover\:bg-neutral-700:hover,
.hover\:bg-stone-700:hover,
.hover\:bg-gray-600:hover,
.hover\:bg-slate-600:hover,
.hover\:bg-zinc-600:hover,
.hover\:bg-neutral-600:hover,
.hover\:bg-stone-600:hover { background-color: var(--text-secondary) !important; }
.hover\:bg-gray-800:hover,
.hover\:bg-gray-900:hover,
.hover\:bg-slate-800:hover,
.hover\:bg-slate-900:hover,
.hover\:bg-zinc-800:hover,
.hover\:bg-zinc-900:hover,
.hover\:bg-neutral-800:hover,
.hover\:bg-neutral-900:hover,
.hover\:bg-stone-800:hover,
.hover\:bg-stone-900:hover { background-color: var(--text-primary) !important; }
.hover\:border-gray-200:hover,
.hover\:border-slate-200:hover,
.hover\:border-zinc-200:hover,
.hover\:border-neutral-200:hover,
.hover\:border-stone-200:hover,
.hover\:border-gray-100:hover,
.hover\:border-slate-100:hover,
.hover\:border-zinc-100:hover,
.hover\:border-neutral-100:hover,
.hover\:border-stone-100:hover { border-color: var(--border-color) !important; }
.hover\:border-gray-300:hover,
.hover\:border-slate-300:hover,
.hover\:border-zinc-300:hover,
.hover\:border-neutral-300:hover,
.hover\:border-stone-300:hover,
.hover\:border-gray-400:hover,
.hover\:border-gray-500:hover,
.hover\:border-slate-400:hover,
.hover\:border-slate-500:hover,
.hover\:border-zinc-400:hover,
.hover\:border-zinc-500:hover,
.hover\:border-neutral-400:hover,
.hover\:border-neutral-500:hover,
.hover\:border-stone-400:hover,
.hover\:border-stone-500:hover { border-color: var(--border-color-strong) !important; }
.hover\:border-gray-400:hover,
.hover\:border-slate-400:hover,
.hover\:border-zinc-400:hover,
.hover\:border-neutral-400:hover,
.hover\:border-stone-400:hover { border-color: var(--text-muted) !important; }
.hover\:bg-blue-50:hover,
.hover\:bg-blue-100:hover,
.hover\:bg-blue-200:hover,
.hover\:bg-blue-300:hover,
.hover\:bg-indigo-50:hover,
.hover\:bg-indigo-100:hover,
.hover\:bg-indigo-200:hover,
.hover\:bg-indigo-300:hover,
.hover\:bg-violet-50:hover,
.hover\:bg-violet-100:hover,
.hover\:bg-violet-200:hover,
.hover\:bg-violet-300:hover,
.hover\:bg-purple-50:hover,
.hover\:bg-purple-100:hover,
.hover\:bg-purple-200:hover,
.hover\:bg-purple-300:hover { background-color: var(--color-primary-muted) !important; }
.hover\:text-blue-50:hover,
.hover\:text-blue-100:hover,
.hover\:text-blue-200:hover,
.hover\:text-blue-300:hover,
.hover\:text-blue-400:hover,
.hover\:text-blue-500:hover,
.hover\:text-blue-600:hover,
.hover\:text-indigo-50:hover,
.hover\:text-indigo-100:hover,
.hover\:text-indigo-200:hover,
.hover\:text-indigo-300:hover,
.hover\:text-indigo-400:hover,
.hover\:text-indigo-500:hover,
.hover\:text-indigo-600:hover,
.hover\:text-violet-50:hover,
.hover\:text-violet-100:hover,
.hover\:text-violet-200:hover,
.hover\:text-violet-300:hover,
.hover\:text-violet-400:hover,
.hover\:text-violet-500:hover,
.hover\:text-violet-600:hover,
.hover\:text-purple-50:hover,
.hover\:text-purple-100:hover,
.hover\:text-purple-200:hover,
.hover\:text-purple-300:hover,
.hover\:text-purple-400:hover,
.hover\:text-purple-500:hover,
.hover\:text-purple-600:hover { color: var(--color-primary) !important; }
.hover\:border-blue-200:hover,
.hover\:border-blue-300:hover,
.hover\:border-blue-400:hover,
.hover\:border-blue-500:hover,
.hover\:border-blue-600:hover,
.hover\:border-indigo-200:hover,
.hover\:border-indigo-300:hover,
.hover\:border-indigo-400:hover,
.hover\:border-indigo-500:hover,
.hover\:border-indigo-600:hover,
.hover\:border-violet-200:hover,
.hover\:border-violet-300:hover,
.hover\:border-violet-400:hover,
.hover\:border-violet-500:hover,
.hover\:border-violet-600:hover,
.hover\:border-purple-200:hover,
.hover\:border-purple-300:hover,
.hover\:border-purple-400:hover,
.hover\:border-purple-500:hover,
.hover\:border-purple-600:hover { border-color: var(--color-primary) !important; }
.hover\:bg-blue-400:hover,
.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-indigo-400:hover,
.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-600:hover,
.hover\:bg-violet-400:hover,
.hover\:bg-violet-500:hover,
.hover\:bg-violet-600:hover,
.hover\:bg-purple-400:hover,
.hover\:bg-purple-500:hover,
.hover\:bg-purple-600:hover { background-color: var(--color-primary) !important; }
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover,
.hover\:bg-blue-900:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-800:hover,
.hover\:bg-indigo-900:hover,
.hover\:bg-violet-700:hover,
.hover\:bg-violet-800:hover,
.hover\:bg-violet-900:hover,
.hover\:bg-purple-700:hover,
.hover\:bg-purple-800:hover,
.hover\:bg-purple-900:hover { background-color: var(--color-primary-hover) !important; }
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover,
.hover\:text-blue-900:hover,
.hover\:text-indigo-700:hover,
.hover\:text-indigo-800:hover,
.hover\:text-indigo-900:hover,
.hover\:text-violet-700:hover,
.hover\:text-violet-800:hover,
.hover\:text-violet-900:hover,
.hover\:text-purple-700:hover,
.hover\:text-purple-800:hover,
.hover\:text-purple-900:hover { color: var(--color-primary-hover) !important; }
.hover\:bg-red-50:hover,
.hover\:bg-red-100:hover,
.hover\:bg-red-200:hover,
.hover\:bg-red-300:hover,
.hover\:bg-rose-50:hover,
.hover\:bg-rose-100:hover,
.hover\:bg-rose-200:hover,
.hover\:bg-rose-300:hover,
.hover\:bg-pink-50:hover,
.hover\:bg-pink-100:hover,
.hover\:bg-pink-200:hover,
.hover\:bg-pink-300:hover { background-color: var(--color-danger-muted) !important; }
.hover\:text-red-50:hover,
.hover\:text-red-100:hover,
.hover\:text-red-200:hover,
.hover\:text-red-300:hover,
.hover\:text-red-400:hover,
.hover\:text-red-500:hover,
.hover\:text-red-600:hover,
.hover\:text-rose-50:hover,
.hover\:text-rose-100:hover,
.hover\:text-rose-200:hover,
.hover\:text-rose-300:hover,
.hover\:text-rose-400:hover,
.hover\:text-rose-500:hover,
.hover\:text-rose-600:hover,
.hover\:text-pink-50:hover,
.hover\:text-pink-100:hover,
.hover\:text-pink-200:hover,
.hover\:text-pink-300:hover,
.hover\:text-pink-400:hover,
.hover\:text-pink-500:hover,
.hover\:text-pink-600:hover { color: var(--color-danger-on-surface) !important; }
.hover\:border-red-200:hover,
.hover\:border-red-300:hover,
.hover\:border-red-400:hover,
.hover\:border-red-500:hover,
.hover\:border-red-600:hover,
.hover\:border-rose-200:hover,
.hover\:border-rose-300:hover,
.hover\:border-rose-400:hover,
.hover\:border-rose-500:hover,
.hover\:border-rose-600:hover,
.hover\:border-pink-200:hover,
.hover\:border-pink-300:hover,
.hover\:border-pink-400:hover,
.hover\:border-pink-500:hover,
.hover\:border-pink-600:hover { border-color: var(--color-danger) !important; }
.hover\:bg-red-400:hover,
.hover\:bg-red-500:hover,
.hover\:bg-red-600:hover,
.hover\:bg-rose-400:hover,
.hover\:bg-rose-500:hover,
.hover\:bg-rose-600:hover,
.hover\:bg-pink-400:hover,
.hover\:bg-pink-500:hover,
.hover\:bg-pink-600:hover { background-color: var(--color-danger) !important; }
.hover\:bg-red-700:hover,
.hover\:bg-red-800:hover,
.hover\:bg-red-900:hover,
.hover\:bg-rose-700:hover,
.hover\:bg-rose-800:hover,
.hover\:bg-rose-900:hover,
.hover\:bg-pink-700:hover,
.hover\:bg-pink-800:hover,
.hover\:bg-pink-900:hover { background-color: var(--color-danger-hover) !important; }
.hover\:text-red-700:hover,
.hover\:text-red-800:hover,
.hover\:text-red-900:hover,
.hover\:text-rose-700:hover,
.hover\:text-rose-800:hover,
.hover\:text-rose-900:hover,
.hover\:text-pink-700:hover,
.hover\:text-pink-800:hover,
.hover\:text-pink-900:hover { color: var(--color-danger-text) !important; }
.hover\:bg-green-50:hover,
.hover\:bg-green-100:hover,
.hover\:bg-green-200:hover,
.hover\:bg-green-300:hover,
.hover\:bg-emerald-50:hover,
.hover\:bg-emerald-100:hover,
.hover\:bg-emerald-200:hover,
.hover\:bg-emerald-300:hover,
.hover\:bg-teal-50:hover,
.hover\:bg-teal-100:hover,
.hover\:bg-teal-200:hover,
.hover\:bg-teal-300:hover,
.hover\:bg-lime-50:hover,
.hover\:bg-lime-100:hover,
.hover\:bg-lime-200:hover,
.hover\:bg-lime-300:hover { background-color: var(--color-success-muted) !important; }
.hover\:text-green-50:hover,
.hover\:text-green-100:hover,
.hover\:text-green-200:hover,
.hover\:text-green-300:hover,
.hover\:text-green-400:hover,
.hover\:text-green-500:hover,
.hover\:text-green-600:hover,
.hover\:text-emerald-50:hover,
.hover\:text-emerald-100:hover,
.hover\:text-emerald-200:hover,
.hover\:text-emerald-300:hover,
.hover\:text-emerald-400:hover,
.hover\:text-emerald-500:hover,
.hover\:text-emerald-600:hover,
.hover\:text-teal-50:hover,
.hover\:text-teal-100:hover,
.hover\:text-teal-200:hover,
.hover\:text-teal-300:hover,
.hover\:text-teal-400:hover,
.hover\:text-teal-500:hover,
.hover\:text-teal-600:hover,
.hover\:text-lime-50:hover,
.hover\:text-lime-100:hover,
.hover\:text-lime-200:hover,
.hover\:text-lime-300:hover,
.hover\:text-lime-400:hover,
.hover\:text-lime-500:hover,
.hover\:text-lime-600:hover { color: var(--color-success-on-surface) !important; }
.hover\:border-green-200:hover,
.hover\:border-green-300:hover,
.hover\:border-green-400:hover,
.hover\:border-green-500:hover,
.hover\:border-green-600:hover,
.hover\:border-emerald-200:hover,
.hover\:border-emerald-300:hover,
.hover\:border-emerald-400:hover,
.hover\:border-emerald-500:hover,
.hover\:border-emerald-600:hover,
.hover\:border-teal-200:hover,
.hover\:border-teal-300:hover,
.hover\:border-teal-400:hover,
.hover\:border-teal-500:hover,
.hover\:border-teal-600:hover,
.hover\:border-lime-200:hover,
.hover\:border-lime-300:hover,
.hover\:border-lime-400:hover,
.hover\:border-lime-500:hover,
.hover\:border-lime-600:hover { border-color: var(--color-success) !important; }
.hover\:bg-green-400:hover,
.hover\:bg-green-500:hover,
.hover\:bg-green-600:hover,
.hover\:bg-emerald-400:hover,
.hover\:bg-emerald-500:hover,
.hover\:bg-emerald-600:hover,
.hover\:bg-teal-400:hover,
.hover\:bg-teal-500:hover,
.hover\:bg-teal-600:hover,
.hover\:bg-lime-400:hover,
.hover\:bg-lime-500:hover,
.hover\:bg-lime-600:hover { background-color: var(--color-success) !important; }
.hover\:bg-green-700:hover,
.hover\:bg-green-800:hover,
.hover\:bg-green-900:hover,
.hover\:bg-emerald-700:hover,
.hover\:bg-emerald-800:hover,
.hover\:bg-emerald-900:hover,
.hover\:bg-teal-700:hover,
.hover\:bg-teal-800:hover,
.hover\:bg-teal-900:hover,
.hover\:bg-lime-700:hover,
.hover\:bg-lime-800:hover,
.hover\:bg-lime-900:hover { background-color: var(--color-success-hover) !important; }
.hover\:text-green-700:hover,
.hover\:text-green-800:hover,
.hover\:text-green-900:hover,
.hover\:text-emerald-700:hover,
.hover\:text-emerald-800:hover,
.hover\:text-emerald-900:hover,
.hover\:text-teal-700:hover,
.hover\:text-teal-800:hover,
.hover\:text-teal-900:hover,
.hover\:text-lime-700:hover,
.hover\:text-lime-800:hover,
.hover\:text-lime-900:hover { color: var(--color-success-text) !important; }
.hover\:bg-amber-50:hover,
.hover\:bg-amber-100:hover,
.hover\:bg-amber-200:hover,
.hover\:bg-amber-300:hover,
.hover\:bg-yellow-50:hover,
.hover\:bg-yellow-100:hover,
.hover\:bg-yellow-200:hover,
.hover\:bg-yellow-300:hover,
.hover\:bg-orange-50:hover,
.hover\:bg-orange-100:hover,
.hover\:bg-orange-200:hover,
.hover\:bg-orange-300:hover { background-color: var(--color-warning-muted) !important; }
.hover\:text-amber-50:hover,
.hover\:text-amber-100:hover,
.hover\:text-amber-200:hover,
.hover\:text-amber-300:hover,
.hover\:text-amber-400:hover,
.hover\:text-amber-500:hover,
.hover\:text-amber-600:hover,
.hover\:text-yellow-50:hover,
.hover\:text-yellow-100:hover,
.hover\:text-yellow-200:hover,
.hover\:text-yellow-300:hover,
.hover\:text-yellow-400:hover,
.hover\:text-yellow-500:hover,
.hover\:text-yellow-600:hover,
.hover\:text-orange-50:hover,
.hover\:text-orange-100:hover,
.hover\:text-orange-200:hover,
.hover\:text-orange-300:hover,
.hover\:text-orange-400:hover,
.hover\:text-orange-500:hover,
.hover\:text-orange-600:hover { color: var(--color-warning-on-surface) !important; }
.hover\:border-amber-200:hover,
.hover\:border-amber-300:hover,
.hover\:border-amber-400:hover,
.hover\:border-amber-500:hover,
.hover\:border-amber-600:hover,
.hover\:border-yellow-200:hover,
.hover\:border-yellow-300:hover,
.hover\:border-yellow-400:hover,
.hover\:border-yellow-500:hover,
.hover\:border-yellow-600:hover,
.hover\:border-orange-200:hover,
.hover\:border-orange-300:hover,
.hover\:border-orange-400:hover,
.hover\:border-orange-500:hover,
.hover\:border-orange-600:hover { border-color: var(--color-warning) !important; }
.hover\:bg-amber-400:hover,
.hover\:bg-amber-500:hover,
.hover\:bg-amber-600:hover,
.hover\:bg-yellow-400:hover,
.hover\:bg-yellow-500:hover,
.hover\:bg-yellow-600:hover,
.hover\:bg-orange-400:hover,
.hover\:bg-orange-500:hover,
.hover\:bg-orange-600:hover { background-color: var(--color-warning) !important; }
.hover\:bg-amber-700:hover,
.hover\:bg-amber-800:hover,
.hover\:bg-amber-900:hover,
.hover\:bg-yellow-700:hover,
.hover\:bg-yellow-800:hover,
.hover\:bg-yellow-900:hover,
.hover\:bg-orange-700:hover,
.hover\:bg-orange-800:hover,
.hover\:bg-orange-900:hover { background-color: var(--color-warning-hover) !important; }
.hover\:text-amber-700:hover,
.hover\:text-amber-800:hover,
.hover\:text-amber-900:hover,
.hover\:text-yellow-700:hover,
.hover\:text-yellow-800:hover,
.hover\:text-yellow-900:hover,
.hover\:text-orange-700:hover,
.hover\:text-orange-800:hover,
.hover\:text-orange-900:hover { color: var(--color-warning-text) !important; }
.hover\:bg-cyan-50:hover,
.hover\:bg-cyan-100:hover,
.hover\:bg-cyan-200:hover,
.hover\:bg-cyan-300:hover,
.hover\:bg-sky-50:hover,
.hover\:bg-sky-100:hover,
.hover\:bg-sky-200:hover,
.hover\:bg-sky-300:hover { background-color: var(--color-info-muted) !important; }
.hover\:text-cyan-50:hover,
.hover\:text-cyan-100:hover,
.hover\:text-cyan-200:hover,
.hover\:text-cyan-300:hover,
.hover\:text-cyan-400:hover,
.hover\:text-cyan-500:hover,
.hover\:text-cyan-600:hover,
.hover\:text-sky-50:hover,
.hover\:text-sky-100:hover,
.hover\:text-sky-200:hover,
.hover\:text-sky-300:hover,
.hover\:text-sky-400:hover,
.hover\:text-sky-500:hover,
.hover\:text-sky-600:hover { color: var(--color-info-on-surface) !important; }
.hover\:border-cyan-200:hover,
.hover\:border-cyan-300:hover,
.hover\:border-cyan-400:hover,
.hover\:border-cyan-500:hover,
.hover\:border-cyan-600:hover,
.hover\:border-sky-200:hover,
.hover\:border-sky-300:hover,
.hover\:border-sky-400:hover,
.hover\:border-sky-500:hover,
.hover\:border-sky-600:hover { border-color: var(--color-info) !important; }
.hover\:bg-cyan-400:hover,
.hover\:bg-cyan-500:hover,
.hover\:bg-cyan-600:hover,
.hover\:bg-sky-400:hover,
.hover\:bg-sky-500:hover,
.hover\:bg-sky-600:hover { background-color: var(--color-info) !important; }
.hover\:bg-cyan-700:hover,
.hover\:bg-cyan-800:hover,
.hover\:bg-cyan-900:hover,
.hover\:bg-sky-700:hover,
.hover\:bg-sky-800:hover,
.hover\:bg-sky-900:hover { background-color: var(--color-info-hover) !important; }
.hover\:text-cyan-700:hover,
.hover\:text-cyan-800:hover,
.hover\:text-cyan-900:hover,
.hover\:text-sky-700:hover,
.hover\:text-sky-800:hover,
.hover\:text-sky-900:hover { color: var(--color-info-text) !important; }
.hover\:border-gray-600:hover,
.hover\:border-gray-700:hover,
.hover\:border-slate-600:hover,
.hover\:border-slate-700:hover,
.hover\:border-zinc-600:hover,
.hover\:border-zinc-700:hover,
.hover\:border-neutral-600:hover,
.hover\:border-neutral-700:hover,
.hover\:border-stone-600:hover,
.hover\:border-stone-700:hover { border-color: var(--text-secondary) !important; }
.hover\:border-gray-800:hover,
.hover\:border-gray-900:hover,
.hover\:border-slate-800:hover,
.hover\:border-slate-900:hover,
.hover\:border-zinc-800:hover,
.hover\:border-zinc-900:hover,
.hover\:border-neutral-800:hover,
.hover\:border-neutral-900:hover,
.hover\:border-stone-800:hover,
.hover\:border-stone-900:hover { border-color: var(--text-primary) !important; }
.hover\:bg-gray-300:hover,
.hover\:bg-slate-300:hover,
.hover\:bg-zinc-300:hover,
.hover\:bg-neutral-300:hover,
.hover\:bg-stone-300:hover { background-color: var(--border-color-strong) !important; }
.hover\:bg-gray-400:hover,
.hover\:bg-gray-500:hover,
.hover\:bg-slate-400:hover,
.hover\:bg-slate-500:hover,
.hover\:bg-zinc-400:hover,
.hover\:bg-zinc-500:hover,
.hover\:bg-neutral-400:hover,
.hover\:bg-neutral-500:hover,
.hover\:bg-stone-400:hover,
.hover\:bg-stone-500:hover { background-color: var(--text-muted) !important; }
.hover\:divide-gray-100:hover > * + *,
.hover\:divide-gray-200:hover > * + *,
.hover\:divide-slate-100:hover > * + *,
.hover\:divide-slate-200:hover > * + *,
.hover\:divide-zinc-100:hover > * + *,
.hover\:divide-zinc-200:hover > * + *,
.hover\:divide-neutral-100:hover > * + *,
.hover\:divide-neutral-200:hover > * + *,
.hover\:divide-stone-100:hover > * + *,
.hover\:divide-stone-200:hover > * + * { border-color: var(--border-color) !important; }
.hover\:divide-gray-300:hover > * + *,
.hover\:divide-slate-300:hover > * + *,
.hover\:divide-zinc-300:hover > * + *,
.hover\:divide-neutral-300:hover > * + *,
.hover\:divide-stone-300:hover > * + * { border-color: var(--border-color-strong) !important; }
.hover\:ring-blue-300:hover,
.hover\:ring-blue-400:hover,
.hover\:ring-blue-500:hover,
.hover\:ring-blue-600:hover,
.hover\:ring-indigo-300:hover,
.hover\:ring-indigo-400:hover,
.hover\:ring-indigo-500:hover,
.hover\:ring-indigo-600:hover,
.hover\:ring-violet-300:hover,
.hover\:ring-violet-400:hover,
.hover\:ring-violet-500:hover,
.hover\:ring-violet-600:hover,
.hover\:ring-purple-300:hover,
.hover\:ring-purple-400:hover,
.hover\:ring-purple-500:hover,
.hover\:ring-purple-600:hover { --tw-ring-color: var(--color-primary) !important; }
.hover\:ring-red-300:hover,
.hover\:ring-red-400:hover,
.hover\:ring-red-500:hover,
.hover\:ring-red-600:hover,
.hover\:ring-rose-300:hover,
.hover\:ring-rose-400:hover,
.hover\:ring-rose-500:hover,
.hover\:ring-rose-600:hover,
.hover\:ring-pink-300:hover,
.hover\:ring-pink-400:hover,
.hover\:ring-pink-500:hover,
.hover\:ring-pink-600:hover { --tw-ring-color: var(--color-danger) !important; }
.hover\:ring-green-300:hover,
.hover\:ring-green-400:hover,
.hover\:ring-green-500:hover,
.hover\:ring-green-600:hover,
.hover\:ring-emerald-300:hover,
.hover\:ring-emerald-400:hover,
.hover\:ring-emerald-500:hover,
.hover\:ring-emerald-600:hover,
.hover\:ring-teal-300:hover,
.hover\:ring-teal-400:hover,
.hover\:ring-teal-500:hover,
.hover\:ring-teal-600:hover,
.hover\:ring-lime-300:hover,
.hover\:ring-lime-400:hover,
.hover\:ring-lime-500:hover,
.hover\:ring-lime-600:hover { --tw-ring-color: var(--color-success) !important; }
.hover\:ring-amber-300:hover,
.hover\:ring-amber-400:hover,
.hover\:ring-amber-500:hover,
.hover\:ring-amber-600:hover,
.hover\:ring-yellow-300:hover,
.hover\:ring-yellow-400:hover,
.hover\:ring-yellow-500:hover,
.hover\:ring-yellow-600:hover,
.hover\:ring-orange-300:hover,
.hover\:ring-orange-400:hover,
.hover\:ring-orange-500:hover,
.hover\:ring-orange-600:hover { --tw-ring-color: var(--color-warning) !important; }
.hover\:ring-sky-300:hover,
.hover\:ring-sky-400:hover,
.hover\:ring-sky-500:hover,
.hover\:ring-sky-600:hover,
.hover\:ring-cyan-300:hover,
.hover\:ring-cyan-400:hover,
.hover\:ring-cyan-500:hover,
.hover\:ring-cyan-600:hover { --tw-ring-color: var(--color-info) !important; }

/* ---- focus: ---- */
.focus\:text-gray-50:focus,
.focus\:text-gray-100:focus,
.focus\:text-slate-50:focus,
.focus\:text-slate-100:focus,
.focus\:text-zinc-50:focus,
.focus\:text-zinc-100:focus,
.focus\:text-neutral-50:focus,
.focus\:text-neutral-100:focus,
.focus\:text-stone-50:focus,
.focus\:text-stone-100:focus { color: var(--surface-inset) !important; }
.focus\:text-gray-200:focus,
.focus\:text-slate-200:focus,
.focus\:text-zinc-200:focus,
.focus\:text-neutral-200:focus,
.focus\:text-stone-200:focus { color: var(--border-color) !important; }
.focus\:text-gray-300:focus,
.focus\:text-slate-300:focus,
.focus\:text-zinc-300:focus,
.focus\:text-neutral-300:focus,
.focus\:text-stone-300:focus { color: var(--border-color-strong) !important; }
.focus\:text-gray-400:focus,
.focus\:text-gray-500:focus,
.focus\:text-slate-400:focus,
.focus\:text-slate-500:focus,
.focus\:text-zinc-400:focus,
.focus\:text-zinc-500:focus,
.focus\:text-neutral-400:focus,
.focus\:text-neutral-500:focus,
.focus\:text-stone-400:focus,
.focus\:text-stone-500:focus { color: var(--text-muted) !important; }
.focus\:text-gray-600:focus,
.focus\:text-gray-700:focus,
.focus\:text-slate-600:focus,
.focus\:text-slate-700:focus,
.focus\:text-zinc-600:focus,
.focus\:text-zinc-700:focus,
.focus\:text-neutral-600:focus,
.focus\:text-neutral-700:focus,
.focus\:text-stone-600:focus,
.focus\:text-stone-700:focus { color: var(--text-secondary) !important; }
.focus\:text-gray-800:focus,
.focus\:text-gray-900:focus,
.focus\:text-gray-950:focus,
.focus\:text-slate-800:focus,
.focus\:text-slate-900:focus,
.focus\:text-slate-950:focus,
.focus\:text-zinc-800:focus,
.focus\:text-zinc-900:focus,
.focus\:text-zinc-950:focus,
.focus\:text-neutral-800:focus,
.focus\:text-neutral-900:focus,
.focus\:text-neutral-950:focus,
.focus\:text-stone-800:focus,
.focus\:text-stone-900:focus,
.focus\:text-stone-950:focus { color: var(--text-primary) !important; }
.focus\:bg-gray-50:focus,
.focus\:bg-gray-100:focus,
.focus\:bg-slate-50:focus,
.focus\:bg-slate-100:focus,
.focus\:bg-zinc-50:focus,
.focus\:bg-zinc-100:focus,
.focus\:bg-neutral-50:focus,
.focus\:bg-neutral-100:focus,
.focus\:bg-stone-50:focus,
.focus\:bg-stone-100:focus { background-color: var(--surface-inset) !important; }
.focus\:bg-gray-200:focus,
.focus\:bg-slate-200:focus,
.focus\:bg-zinc-200:focus,
.focus\:bg-neutral-200:focus,
.focus\:bg-stone-200:focus { background-color: var(--border-color) !important; }
.focus\:bg-gray-700:focus,
.focus\:bg-slate-700:focus,
.focus\:bg-zinc-700:focus,
.focus\:bg-neutral-700:focus,
.focus\:bg-stone-700:focus,
.focus\:bg-gray-600:focus,
.focus\:bg-slate-600:focus,
.focus\:bg-zinc-600:focus,
.focus\:bg-neutral-600:focus,
.focus\:bg-stone-600:focus { background-color: var(--text-secondary) !important; }
.focus\:bg-gray-800:focus,
.focus\:bg-gray-900:focus,
.focus\:bg-slate-800:focus,
.focus\:bg-slate-900:focus,
.focus\:bg-zinc-800:focus,
.focus\:bg-zinc-900:focus,
.focus\:bg-neutral-800:focus,
.focus\:bg-neutral-900:focus,
.focus\:bg-stone-800:focus,
.focus\:bg-stone-900:focus { background-color: var(--text-primary) !important; }
.focus\:border-gray-200:focus,
.focus\:border-slate-200:focus,
.focus\:border-zinc-200:focus,
.focus\:border-neutral-200:focus,
.focus\:border-stone-200:focus,
.focus\:border-gray-100:focus,
.focus\:border-slate-100:focus,
.focus\:border-zinc-100:focus,
.focus\:border-neutral-100:focus,
.focus\:border-stone-100:focus { border-color: var(--border-color) !important; }
.focus\:border-gray-300:focus,
.focus\:border-slate-300:focus,
.focus\:border-zinc-300:focus,
.focus\:border-neutral-300:focus,
.focus\:border-stone-300:focus,
.focus\:border-gray-400:focus,
.focus\:border-gray-500:focus,
.focus\:border-slate-400:focus,
.focus\:border-slate-500:focus,
.focus\:border-zinc-400:focus,
.focus\:border-zinc-500:focus,
.focus\:border-neutral-400:focus,
.focus\:border-neutral-500:focus,
.focus\:border-stone-400:focus,
.focus\:border-stone-500:focus { border-color: var(--border-color-strong) !important; }
.focus\:border-gray-400:focus,
.focus\:border-slate-400:focus,
.focus\:border-zinc-400:focus,
.focus\:border-neutral-400:focus,
.focus\:border-stone-400:focus { border-color: var(--text-muted) !important; }
.focus\:bg-blue-50:focus,
.focus\:bg-blue-100:focus,
.focus\:bg-blue-200:focus,
.focus\:bg-blue-300:focus,
.focus\:bg-indigo-50:focus,
.focus\:bg-indigo-100:focus,
.focus\:bg-indigo-200:focus,
.focus\:bg-indigo-300:focus,
.focus\:bg-violet-50:focus,
.focus\:bg-violet-100:focus,
.focus\:bg-violet-200:focus,
.focus\:bg-violet-300:focus,
.focus\:bg-purple-50:focus,
.focus\:bg-purple-100:focus,
.focus\:bg-purple-200:focus,
.focus\:bg-purple-300:focus { background-color: var(--color-primary-muted) !important; }
.focus\:text-blue-50:focus,
.focus\:text-blue-100:focus,
.focus\:text-blue-200:focus,
.focus\:text-blue-300:focus,
.focus\:text-blue-400:focus,
.focus\:text-blue-500:focus,
.focus\:text-blue-600:focus,
.focus\:text-indigo-50:focus,
.focus\:text-indigo-100:focus,
.focus\:text-indigo-200:focus,
.focus\:text-indigo-300:focus,
.focus\:text-indigo-400:focus,
.focus\:text-indigo-500:focus,
.focus\:text-indigo-600:focus,
.focus\:text-violet-50:focus,
.focus\:text-violet-100:focus,
.focus\:text-violet-200:focus,
.focus\:text-violet-300:focus,
.focus\:text-violet-400:focus,
.focus\:text-violet-500:focus,
.focus\:text-violet-600:focus,
.focus\:text-purple-50:focus,
.focus\:text-purple-100:focus,
.focus\:text-purple-200:focus,
.focus\:text-purple-300:focus,
.focus\:text-purple-400:focus,
.focus\:text-purple-500:focus,
.focus\:text-purple-600:focus { color: var(--color-primary) !important; }
.focus\:border-blue-200:focus,
.focus\:border-blue-300:focus,
.focus\:border-blue-400:focus,
.focus\:border-blue-500:focus,
.focus\:border-blue-600:focus,
.focus\:border-indigo-200:focus,
.focus\:border-indigo-300:focus,
.focus\:border-indigo-400:focus,
.focus\:border-indigo-500:focus,
.focus\:border-indigo-600:focus,
.focus\:border-violet-200:focus,
.focus\:border-violet-300:focus,
.focus\:border-violet-400:focus,
.focus\:border-violet-500:focus,
.focus\:border-violet-600:focus,
.focus\:border-purple-200:focus,
.focus\:border-purple-300:focus,
.focus\:border-purple-400:focus,
.focus\:border-purple-500:focus,
.focus\:border-purple-600:focus { border-color: var(--color-primary) !important; }
.focus\:bg-blue-400:focus,
.focus\:bg-blue-500:focus,
.focus\:bg-blue-600:focus,
.focus\:bg-indigo-400:focus,
.focus\:bg-indigo-500:focus,
.focus\:bg-indigo-600:focus,
.focus\:bg-violet-400:focus,
.focus\:bg-violet-500:focus,
.focus\:bg-violet-600:focus,
.focus\:bg-purple-400:focus,
.focus\:bg-purple-500:focus,
.focus\:bg-purple-600:focus { background-color: var(--color-primary) !important; }
.focus\:bg-blue-700:focus,
.focus\:bg-blue-800:focus,
.focus\:bg-blue-900:focus,
.focus\:bg-indigo-700:focus,
.focus\:bg-indigo-800:focus,
.focus\:bg-indigo-900:focus,
.focus\:bg-violet-700:focus,
.focus\:bg-violet-800:focus,
.focus\:bg-violet-900:focus,
.focus\:bg-purple-700:focus,
.focus\:bg-purple-800:focus,
.focus\:bg-purple-900:focus { background-color: var(--color-primary-hover) !important; }
.focus\:text-blue-700:focus,
.focus\:text-blue-800:focus,
.focus\:text-blue-900:focus,
.focus\:text-indigo-700:focus,
.focus\:text-indigo-800:focus,
.focus\:text-indigo-900:focus,
.focus\:text-violet-700:focus,
.focus\:text-violet-800:focus,
.focus\:text-violet-900:focus,
.focus\:text-purple-700:focus,
.focus\:text-purple-800:focus,
.focus\:text-purple-900:focus { color: var(--color-primary-hover) !important; }
.focus\:bg-red-50:focus,
.focus\:bg-red-100:focus,
.focus\:bg-red-200:focus,
.focus\:bg-red-300:focus,
.focus\:bg-rose-50:focus,
.focus\:bg-rose-100:focus,
.focus\:bg-rose-200:focus,
.focus\:bg-rose-300:focus,
.focus\:bg-pink-50:focus,
.focus\:bg-pink-100:focus,
.focus\:bg-pink-200:focus,
.focus\:bg-pink-300:focus { background-color: var(--color-danger-muted) !important; }
.focus\:text-red-50:focus,
.focus\:text-red-100:focus,
.focus\:text-red-200:focus,
.focus\:text-red-300:focus,
.focus\:text-red-400:focus,
.focus\:text-red-500:focus,
.focus\:text-red-600:focus,
.focus\:text-rose-50:focus,
.focus\:text-rose-100:focus,
.focus\:text-rose-200:focus,
.focus\:text-rose-300:focus,
.focus\:text-rose-400:focus,
.focus\:text-rose-500:focus,
.focus\:text-rose-600:focus,
.focus\:text-pink-50:focus,
.focus\:text-pink-100:focus,
.focus\:text-pink-200:focus,
.focus\:text-pink-300:focus,
.focus\:text-pink-400:focus,
.focus\:text-pink-500:focus,
.focus\:text-pink-600:focus { color: var(--color-danger-on-surface) !important; }
.focus\:border-red-200:focus,
.focus\:border-red-300:focus,
.focus\:border-red-400:focus,
.focus\:border-red-500:focus,
.focus\:border-red-600:focus,
.focus\:border-rose-200:focus,
.focus\:border-rose-300:focus,
.focus\:border-rose-400:focus,
.focus\:border-rose-500:focus,
.focus\:border-rose-600:focus,
.focus\:border-pink-200:focus,
.focus\:border-pink-300:focus,
.focus\:border-pink-400:focus,
.focus\:border-pink-500:focus,
.focus\:border-pink-600:focus { border-color: var(--color-danger) !important; }
.focus\:bg-red-400:focus,
.focus\:bg-red-500:focus,
.focus\:bg-red-600:focus,
.focus\:bg-rose-400:focus,
.focus\:bg-rose-500:focus,
.focus\:bg-rose-600:focus,
.focus\:bg-pink-400:focus,
.focus\:bg-pink-500:focus,
.focus\:bg-pink-600:focus { background-color: var(--color-danger) !important; }
.focus\:bg-red-700:focus,
.focus\:bg-red-800:focus,
.focus\:bg-red-900:focus,
.focus\:bg-rose-700:focus,
.focus\:bg-rose-800:focus,
.focus\:bg-rose-900:focus,
.focus\:bg-pink-700:focus,
.focus\:bg-pink-800:focus,
.focus\:bg-pink-900:focus { background-color: var(--color-danger-hover) !important; }
.focus\:text-red-700:focus,
.focus\:text-red-800:focus,
.focus\:text-red-900:focus,
.focus\:text-rose-700:focus,
.focus\:text-rose-800:focus,
.focus\:text-rose-900:focus,
.focus\:text-pink-700:focus,
.focus\:text-pink-800:focus,
.focus\:text-pink-900:focus { color: var(--color-danger-text) !important; }
.focus\:bg-green-50:focus,
.focus\:bg-green-100:focus,
.focus\:bg-green-200:focus,
.focus\:bg-green-300:focus,
.focus\:bg-emerald-50:focus,
.focus\:bg-emerald-100:focus,
.focus\:bg-emerald-200:focus,
.focus\:bg-emerald-300:focus,
.focus\:bg-teal-50:focus,
.focus\:bg-teal-100:focus,
.focus\:bg-teal-200:focus,
.focus\:bg-teal-300:focus,
.focus\:bg-lime-50:focus,
.focus\:bg-lime-100:focus,
.focus\:bg-lime-200:focus,
.focus\:bg-lime-300:focus { background-color: var(--color-success-muted) !important; }
.focus\:text-green-50:focus,
.focus\:text-green-100:focus,
.focus\:text-green-200:focus,
.focus\:text-green-300:focus,
.focus\:text-green-400:focus,
.focus\:text-green-500:focus,
.focus\:text-green-600:focus,
.focus\:text-emerald-50:focus,
.focus\:text-emerald-100:focus,
.focus\:text-emerald-200:focus,
.focus\:text-emerald-300:focus,
.focus\:text-emerald-400:focus,
.focus\:text-emerald-500:focus,
.focus\:text-emerald-600:focus,
.focus\:text-teal-50:focus,
.focus\:text-teal-100:focus,
.focus\:text-teal-200:focus,
.focus\:text-teal-300:focus,
.focus\:text-teal-400:focus,
.focus\:text-teal-500:focus,
.focus\:text-teal-600:focus,
.focus\:text-lime-50:focus,
.focus\:text-lime-100:focus,
.focus\:text-lime-200:focus,
.focus\:text-lime-300:focus,
.focus\:text-lime-400:focus,
.focus\:text-lime-500:focus,
.focus\:text-lime-600:focus { color: var(--color-success-on-surface) !important; }
.focus\:border-green-200:focus,
.focus\:border-green-300:focus,
.focus\:border-green-400:focus,
.focus\:border-green-500:focus,
.focus\:border-green-600:focus,
.focus\:border-emerald-200:focus,
.focus\:border-emerald-300:focus,
.focus\:border-emerald-400:focus,
.focus\:border-emerald-500:focus,
.focus\:border-emerald-600:focus,
.focus\:border-teal-200:focus,
.focus\:border-teal-300:focus,
.focus\:border-teal-400:focus,
.focus\:border-teal-500:focus,
.focus\:border-teal-600:focus,
.focus\:border-lime-200:focus,
.focus\:border-lime-300:focus,
.focus\:border-lime-400:focus,
.focus\:border-lime-500:focus,
.focus\:border-lime-600:focus { border-color: var(--color-success) !important; }
.focus\:bg-green-400:focus,
.focus\:bg-green-500:focus,
.focus\:bg-green-600:focus,
.focus\:bg-emerald-400:focus,
.focus\:bg-emerald-500:focus,
.focus\:bg-emerald-600:focus,
.focus\:bg-teal-400:focus,
.focus\:bg-teal-500:focus,
.focus\:bg-teal-600:focus,
.focus\:bg-lime-400:focus,
.focus\:bg-lime-500:focus,
.focus\:bg-lime-600:focus { background-color: var(--color-success) !important; }
.focus\:bg-green-700:focus,
.focus\:bg-green-800:focus,
.focus\:bg-green-900:focus,
.focus\:bg-emerald-700:focus,
.focus\:bg-emerald-800:focus,
.focus\:bg-emerald-900:focus,
.focus\:bg-teal-700:focus,
.focus\:bg-teal-800:focus,
.focus\:bg-teal-900:focus,
.focus\:bg-lime-700:focus,
.focus\:bg-lime-800:focus,
.focus\:bg-lime-900:focus { background-color: var(--color-success-hover) !important; }
.focus\:text-green-700:focus,
.focus\:text-green-800:focus,
.focus\:text-green-900:focus,
.focus\:text-emerald-700:focus,
.focus\:text-emerald-800:focus,
.focus\:text-emerald-900:focus,
.focus\:text-teal-700:focus,
.focus\:text-teal-800:focus,
.focus\:text-teal-900:focus,
.focus\:text-lime-700:focus,
.focus\:text-lime-800:focus,
.focus\:text-lime-900:focus { color: var(--color-success-text) !important; }
.focus\:bg-amber-50:focus,
.focus\:bg-amber-100:focus,
.focus\:bg-amber-200:focus,
.focus\:bg-amber-300:focus,
.focus\:bg-yellow-50:focus,
.focus\:bg-yellow-100:focus,
.focus\:bg-yellow-200:focus,
.focus\:bg-yellow-300:focus,
.focus\:bg-orange-50:focus,
.focus\:bg-orange-100:focus,
.focus\:bg-orange-200:focus,
.focus\:bg-orange-300:focus { background-color: var(--color-warning-muted) !important; }
.focus\:text-amber-50:focus,
.focus\:text-amber-100:focus,
.focus\:text-amber-200:focus,
.focus\:text-amber-300:focus,
.focus\:text-amber-400:focus,
.focus\:text-amber-500:focus,
.focus\:text-amber-600:focus,
.focus\:text-yellow-50:focus,
.focus\:text-yellow-100:focus,
.focus\:text-yellow-200:focus,
.focus\:text-yellow-300:focus,
.focus\:text-yellow-400:focus,
.focus\:text-yellow-500:focus,
.focus\:text-yellow-600:focus,
.focus\:text-orange-50:focus,
.focus\:text-orange-100:focus,
.focus\:text-orange-200:focus,
.focus\:text-orange-300:focus,
.focus\:text-orange-400:focus,
.focus\:text-orange-500:focus,
.focus\:text-orange-600:focus { color: var(--color-warning-on-surface) !important; }
.focus\:border-amber-200:focus,
.focus\:border-amber-300:focus,
.focus\:border-amber-400:focus,
.focus\:border-amber-500:focus,
.focus\:border-amber-600:focus,
.focus\:border-yellow-200:focus,
.focus\:border-yellow-300:focus,
.focus\:border-yellow-400:focus,
.focus\:border-yellow-500:focus,
.focus\:border-yellow-600:focus,
.focus\:border-orange-200:focus,
.focus\:border-orange-300:focus,
.focus\:border-orange-400:focus,
.focus\:border-orange-500:focus,
.focus\:border-orange-600:focus { border-color: var(--color-warning) !important; }
.focus\:bg-amber-400:focus,
.focus\:bg-amber-500:focus,
.focus\:bg-amber-600:focus,
.focus\:bg-yellow-400:focus,
.focus\:bg-yellow-500:focus,
.focus\:bg-yellow-600:focus,
.focus\:bg-orange-400:focus,
.focus\:bg-orange-500:focus,
.focus\:bg-orange-600:focus { background-color: var(--color-warning) !important; }
.focus\:bg-amber-700:focus,
.focus\:bg-amber-800:focus,
.focus\:bg-amber-900:focus,
.focus\:bg-yellow-700:focus,
.focus\:bg-yellow-800:focus,
.focus\:bg-yellow-900:focus,
.focus\:bg-orange-700:focus,
.focus\:bg-orange-800:focus,
.focus\:bg-orange-900:focus { background-color: var(--color-warning-hover) !important; }
.focus\:text-amber-700:focus,
.focus\:text-amber-800:focus,
.focus\:text-amber-900:focus,
.focus\:text-yellow-700:focus,
.focus\:text-yellow-800:focus,
.focus\:text-yellow-900:focus,
.focus\:text-orange-700:focus,
.focus\:text-orange-800:focus,
.focus\:text-orange-900:focus { color: var(--color-warning-text) !important; }
.focus\:bg-cyan-50:focus,
.focus\:bg-cyan-100:focus,
.focus\:bg-cyan-200:focus,
.focus\:bg-cyan-300:focus,
.focus\:bg-sky-50:focus,
.focus\:bg-sky-100:focus,
.focus\:bg-sky-200:focus,
.focus\:bg-sky-300:focus { background-color: var(--color-info-muted) !important; }
.focus\:text-cyan-50:focus,
.focus\:text-cyan-100:focus,
.focus\:text-cyan-200:focus,
.focus\:text-cyan-300:focus,
.focus\:text-cyan-400:focus,
.focus\:text-cyan-500:focus,
.focus\:text-cyan-600:focus,
.focus\:text-sky-50:focus,
.focus\:text-sky-100:focus,
.focus\:text-sky-200:focus,
.focus\:text-sky-300:focus,
.focus\:text-sky-400:focus,
.focus\:text-sky-500:focus,
.focus\:text-sky-600:focus { color: var(--color-info-on-surface) !important; }
.focus\:border-cyan-200:focus,
.focus\:border-cyan-300:focus,
.focus\:border-cyan-400:focus,
.focus\:border-cyan-500:focus,
.focus\:border-cyan-600:focus,
.focus\:border-sky-200:focus,
.focus\:border-sky-300:focus,
.focus\:border-sky-400:focus,
.focus\:border-sky-500:focus,
.focus\:border-sky-600:focus { border-color: var(--color-info) !important; }
.focus\:bg-cyan-400:focus,
.focus\:bg-cyan-500:focus,
.focus\:bg-cyan-600:focus,
.focus\:bg-sky-400:focus,
.focus\:bg-sky-500:focus,
.focus\:bg-sky-600:focus { background-color: var(--color-info) !important; }
.focus\:bg-cyan-700:focus,
.focus\:bg-cyan-800:focus,
.focus\:bg-cyan-900:focus,
.focus\:bg-sky-700:focus,
.focus\:bg-sky-800:focus,
.focus\:bg-sky-900:focus { background-color: var(--color-info-hover) !important; }
.focus\:text-cyan-700:focus,
.focus\:text-cyan-800:focus,
.focus\:text-cyan-900:focus,
.focus\:text-sky-700:focus,
.focus\:text-sky-800:focus,
.focus\:text-sky-900:focus { color: var(--color-info-text) !important; }
.focus\:border-gray-600:focus,
.focus\:border-gray-700:focus,
.focus\:border-slate-600:focus,
.focus\:border-slate-700:focus,
.focus\:border-zinc-600:focus,
.focus\:border-zinc-700:focus,
.focus\:border-neutral-600:focus,
.focus\:border-neutral-700:focus,
.focus\:border-stone-600:focus,
.focus\:border-stone-700:focus { border-color: var(--text-secondary) !important; }
.focus\:border-gray-800:focus,
.focus\:border-gray-900:focus,
.focus\:border-slate-800:focus,
.focus\:border-slate-900:focus,
.focus\:border-zinc-800:focus,
.focus\:border-zinc-900:focus,
.focus\:border-neutral-800:focus,
.focus\:border-neutral-900:focus,
.focus\:border-stone-800:focus,
.focus\:border-stone-900:focus { border-color: var(--text-primary) !important; }
.focus\:bg-gray-300:focus,
.focus\:bg-slate-300:focus,
.focus\:bg-zinc-300:focus,
.focus\:bg-neutral-300:focus,
.focus\:bg-stone-300:focus { background-color: var(--border-color-strong) !important; }
.focus\:bg-gray-400:focus,
.focus\:bg-gray-500:focus,
.focus\:bg-slate-400:focus,
.focus\:bg-slate-500:focus,
.focus\:bg-zinc-400:focus,
.focus\:bg-zinc-500:focus,
.focus\:bg-neutral-400:focus,
.focus\:bg-neutral-500:focus,
.focus\:bg-stone-400:focus,
.focus\:bg-stone-500:focus { background-color: var(--text-muted) !important; }
.focus\:divide-gray-100:focus > * + *,
.focus\:divide-gray-200:focus > * + *,
.focus\:divide-slate-100:focus > * + *,
.focus\:divide-slate-200:focus > * + *,
.focus\:divide-zinc-100:focus > * + *,
.focus\:divide-zinc-200:focus > * + *,
.focus\:divide-neutral-100:focus > * + *,
.focus\:divide-neutral-200:focus > * + *,
.focus\:divide-stone-100:focus > * + *,
.focus\:divide-stone-200:focus > * + * { border-color: var(--border-color) !important; }
.focus\:divide-gray-300:focus > * + *,
.focus\:divide-slate-300:focus > * + *,
.focus\:divide-zinc-300:focus > * + *,
.focus\:divide-neutral-300:focus > * + *,
.focus\:divide-stone-300:focus > * + * { border-color: var(--border-color-strong) !important; }
.focus\:ring-blue-300:focus,
.focus\:ring-blue-400:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-blue-600:focus,
.focus\:ring-indigo-300:focus,
.focus\:ring-indigo-400:focus,
.focus\:ring-indigo-500:focus,
.focus\:ring-indigo-600:focus,
.focus\:ring-violet-300:focus,
.focus\:ring-violet-400:focus,
.focus\:ring-violet-500:focus,
.focus\:ring-violet-600:focus,
.focus\:ring-purple-300:focus,
.focus\:ring-purple-400:focus,
.focus\:ring-purple-500:focus,
.focus\:ring-purple-600:focus { --tw-ring-color: var(--color-primary) !important; }
.focus\:ring-red-300:focus,
.focus\:ring-red-400:focus,
.focus\:ring-red-500:focus,
.focus\:ring-red-600:focus,
.focus\:ring-rose-300:focus,
.focus\:ring-rose-400:focus,
.focus\:ring-rose-500:focus,
.focus\:ring-rose-600:focus,
.focus\:ring-pink-300:focus,
.focus\:ring-pink-400:focus,
.focus\:ring-pink-500:focus,
.focus\:ring-pink-600:focus { --tw-ring-color: var(--color-danger) !important; }
.focus\:ring-green-300:focus,
.focus\:ring-green-400:focus,
.focus\:ring-green-500:focus,
.focus\:ring-green-600:focus,
.focus\:ring-emerald-300:focus,
.focus\:ring-emerald-400:focus,
.focus\:ring-emerald-500:focus,
.focus\:ring-emerald-600:focus,
.focus\:ring-teal-300:focus,
.focus\:ring-teal-400:focus,
.focus\:ring-teal-500:focus,
.focus\:ring-teal-600:focus,
.focus\:ring-lime-300:focus,
.focus\:ring-lime-400:focus,
.focus\:ring-lime-500:focus,
.focus\:ring-lime-600:focus { --tw-ring-color: var(--color-success) !important; }
.focus\:ring-amber-300:focus,
.focus\:ring-amber-400:focus,
.focus\:ring-amber-500:focus,
.focus\:ring-amber-600:focus,
.focus\:ring-yellow-300:focus,
.focus\:ring-yellow-400:focus,
.focus\:ring-yellow-500:focus,
.focus\:ring-yellow-600:focus,
.focus\:ring-orange-300:focus,
.focus\:ring-orange-400:focus,
.focus\:ring-orange-500:focus,
.focus\:ring-orange-600:focus { --tw-ring-color: var(--color-warning) !important; }
.focus\:ring-sky-300:focus,
.focus\:ring-sky-400:focus,
.focus\:ring-sky-500:focus,
.focus\:ring-sky-600:focus,
.focus\:ring-cyan-300:focus,
.focus\:ring-cyan-400:focus,
.focus\:ring-cyan-500:focus,
.focus\:ring-cyan-600:focus { --tw-ring-color: var(--color-info) !important; }

/* ---- focus-visible: ---- */
.focus-visible\:text-gray-50:focus-visible,
.focus-visible\:text-gray-100:focus-visible,
.focus-visible\:text-slate-50:focus-visible,
.focus-visible\:text-slate-100:focus-visible,
.focus-visible\:text-zinc-50:focus-visible,
.focus-visible\:text-zinc-100:focus-visible,
.focus-visible\:text-neutral-50:focus-visible,
.focus-visible\:text-neutral-100:focus-visible,
.focus-visible\:text-stone-50:focus-visible,
.focus-visible\:text-stone-100:focus-visible { color: var(--surface-inset) !important; }
.focus-visible\:text-gray-200:focus-visible,
.focus-visible\:text-slate-200:focus-visible,
.focus-visible\:text-zinc-200:focus-visible,
.focus-visible\:text-neutral-200:focus-visible,
.focus-visible\:text-stone-200:focus-visible { color: var(--border-color) !important; }
.focus-visible\:text-gray-300:focus-visible,
.focus-visible\:text-slate-300:focus-visible,
.focus-visible\:text-zinc-300:focus-visible,
.focus-visible\:text-neutral-300:focus-visible,
.focus-visible\:text-stone-300:focus-visible { color: var(--border-color-strong) !important; }
.focus-visible\:text-gray-400:focus-visible,
.focus-visible\:text-gray-500:focus-visible,
.focus-visible\:text-slate-400:focus-visible,
.focus-visible\:text-slate-500:focus-visible,
.focus-visible\:text-zinc-400:focus-visible,
.focus-visible\:text-zinc-500:focus-visible,
.focus-visible\:text-neutral-400:focus-visible,
.focus-visible\:text-neutral-500:focus-visible,
.focus-visible\:text-stone-400:focus-visible,
.focus-visible\:text-stone-500:focus-visible { color: var(--text-muted) !important; }
.focus-visible\:text-gray-600:focus-visible,
.focus-visible\:text-gray-700:focus-visible,
.focus-visible\:text-slate-600:focus-visible,
.focus-visible\:text-slate-700:focus-visible,
.focus-visible\:text-zinc-600:focus-visible,
.focus-visible\:text-zinc-700:focus-visible,
.focus-visible\:text-neutral-600:focus-visible,
.focus-visible\:text-neutral-700:focus-visible,
.focus-visible\:text-stone-600:focus-visible,
.focus-visible\:text-stone-700:focus-visible { color: var(--text-secondary) !important; }
.focus-visible\:text-gray-800:focus-visible,
.focus-visible\:text-gray-900:focus-visible,
.focus-visible\:text-gray-950:focus-visible,
.focus-visible\:text-slate-800:focus-visible,
.focus-visible\:text-slate-900:focus-visible,
.focus-visible\:text-slate-950:focus-visible,
.focus-visible\:text-zinc-800:focus-visible,
.focus-visible\:text-zinc-900:focus-visible,
.focus-visible\:text-zinc-950:focus-visible,
.focus-visible\:text-neutral-800:focus-visible,
.focus-visible\:text-neutral-900:focus-visible,
.focus-visible\:text-neutral-950:focus-visible,
.focus-visible\:text-stone-800:focus-visible,
.focus-visible\:text-stone-900:focus-visible,
.focus-visible\:text-stone-950:focus-visible { color: var(--text-primary) !important; }
.focus-visible\:bg-gray-50:focus-visible,
.focus-visible\:bg-gray-100:focus-visible,
.focus-visible\:bg-slate-50:focus-visible,
.focus-visible\:bg-slate-100:focus-visible,
.focus-visible\:bg-zinc-50:focus-visible,
.focus-visible\:bg-zinc-100:focus-visible,
.focus-visible\:bg-neutral-50:focus-visible,
.focus-visible\:bg-neutral-100:focus-visible,
.focus-visible\:bg-stone-50:focus-visible,
.focus-visible\:bg-stone-100:focus-visible { background-color: var(--surface-inset) !important; }
.focus-visible\:bg-gray-200:focus-visible,
.focus-visible\:bg-slate-200:focus-visible,
.focus-visible\:bg-zinc-200:focus-visible,
.focus-visible\:bg-neutral-200:focus-visible,
.focus-visible\:bg-stone-200:focus-visible { background-color: var(--border-color) !important; }
.focus-visible\:bg-gray-700:focus-visible,
.focus-visible\:bg-slate-700:focus-visible,
.focus-visible\:bg-zinc-700:focus-visible,
.focus-visible\:bg-neutral-700:focus-visible,
.focus-visible\:bg-stone-700:focus-visible,
.focus-visible\:bg-gray-600:focus-visible,
.focus-visible\:bg-slate-600:focus-visible,
.focus-visible\:bg-zinc-600:focus-visible,
.focus-visible\:bg-neutral-600:focus-visible,
.focus-visible\:bg-stone-600:focus-visible { background-color: var(--text-secondary) !important; }
.focus-visible\:bg-gray-800:focus-visible,
.focus-visible\:bg-gray-900:focus-visible,
.focus-visible\:bg-slate-800:focus-visible,
.focus-visible\:bg-slate-900:focus-visible,
.focus-visible\:bg-zinc-800:focus-visible,
.focus-visible\:bg-zinc-900:focus-visible,
.focus-visible\:bg-neutral-800:focus-visible,
.focus-visible\:bg-neutral-900:focus-visible,
.focus-visible\:bg-stone-800:focus-visible,
.focus-visible\:bg-stone-900:focus-visible { background-color: var(--text-primary) !important; }
.focus-visible\:border-gray-200:focus-visible,
.focus-visible\:border-slate-200:focus-visible,
.focus-visible\:border-zinc-200:focus-visible,
.focus-visible\:border-neutral-200:focus-visible,
.focus-visible\:border-stone-200:focus-visible,
.focus-visible\:border-gray-100:focus-visible,
.focus-visible\:border-slate-100:focus-visible,
.focus-visible\:border-zinc-100:focus-visible,
.focus-visible\:border-neutral-100:focus-visible,
.focus-visible\:border-stone-100:focus-visible { border-color: var(--border-color) !important; }
.focus-visible\:border-gray-300:focus-visible,
.focus-visible\:border-slate-300:focus-visible,
.focus-visible\:border-zinc-300:focus-visible,
.focus-visible\:border-neutral-300:focus-visible,
.focus-visible\:border-stone-300:focus-visible,
.focus-visible\:border-gray-400:focus-visible,
.focus-visible\:border-gray-500:focus-visible,
.focus-visible\:border-slate-400:focus-visible,
.focus-visible\:border-slate-500:focus-visible,
.focus-visible\:border-zinc-400:focus-visible,
.focus-visible\:border-zinc-500:focus-visible,
.focus-visible\:border-neutral-400:focus-visible,
.focus-visible\:border-neutral-500:focus-visible,
.focus-visible\:border-stone-400:focus-visible,
.focus-visible\:border-stone-500:focus-visible { border-color: var(--border-color-strong) !important; }
.focus-visible\:border-gray-400:focus-visible,
.focus-visible\:border-slate-400:focus-visible,
.focus-visible\:border-zinc-400:focus-visible,
.focus-visible\:border-neutral-400:focus-visible,
.focus-visible\:border-stone-400:focus-visible { border-color: var(--text-muted) !important; }
.focus-visible\:bg-blue-50:focus-visible,
.focus-visible\:bg-blue-100:focus-visible,
.focus-visible\:bg-blue-200:focus-visible,
.focus-visible\:bg-blue-300:focus-visible,
.focus-visible\:bg-indigo-50:focus-visible,
.focus-visible\:bg-indigo-100:focus-visible,
.focus-visible\:bg-indigo-200:focus-visible,
.focus-visible\:bg-indigo-300:focus-visible,
.focus-visible\:bg-violet-50:focus-visible,
.focus-visible\:bg-violet-100:focus-visible,
.focus-visible\:bg-violet-200:focus-visible,
.focus-visible\:bg-violet-300:focus-visible,
.focus-visible\:bg-purple-50:focus-visible,
.focus-visible\:bg-purple-100:focus-visible,
.focus-visible\:bg-purple-200:focus-visible,
.focus-visible\:bg-purple-300:focus-visible { background-color: var(--color-primary-muted) !important; }
.focus-visible\:text-blue-50:focus-visible,
.focus-visible\:text-blue-100:focus-visible,
.focus-visible\:text-blue-200:focus-visible,
.focus-visible\:text-blue-300:focus-visible,
.focus-visible\:text-blue-400:focus-visible,
.focus-visible\:text-blue-500:focus-visible,
.focus-visible\:text-blue-600:focus-visible,
.focus-visible\:text-indigo-50:focus-visible,
.focus-visible\:text-indigo-100:focus-visible,
.focus-visible\:text-indigo-200:focus-visible,
.focus-visible\:text-indigo-300:focus-visible,
.focus-visible\:text-indigo-400:focus-visible,
.focus-visible\:text-indigo-500:focus-visible,
.focus-visible\:text-indigo-600:focus-visible,
.focus-visible\:text-violet-50:focus-visible,
.focus-visible\:text-violet-100:focus-visible,
.focus-visible\:text-violet-200:focus-visible,
.focus-visible\:text-violet-300:focus-visible,
.focus-visible\:text-violet-400:focus-visible,
.focus-visible\:text-violet-500:focus-visible,
.focus-visible\:text-violet-600:focus-visible,
.focus-visible\:text-purple-50:focus-visible,
.focus-visible\:text-purple-100:focus-visible,
.focus-visible\:text-purple-200:focus-visible,
.focus-visible\:text-purple-300:focus-visible,
.focus-visible\:text-purple-400:focus-visible,
.focus-visible\:text-purple-500:focus-visible,
.focus-visible\:text-purple-600:focus-visible { color: var(--color-primary) !important; }
.focus-visible\:border-blue-200:focus-visible,
.focus-visible\:border-blue-300:focus-visible,
.focus-visible\:border-blue-400:focus-visible,
.focus-visible\:border-blue-500:focus-visible,
.focus-visible\:border-blue-600:focus-visible,
.focus-visible\:border-indigo-200:focus-visible,
.focus-visible\:border-indigo-300:focus-visible,
.focus-visible\:border-indigo-400:focus-visible,
.focus-visible\:border-indigo-500:focus-visible,
.focus-visible\:border-indigo-600:focus-visible,
.focus-visible\:border-violet-200:focus-visible,
.focus-visible\:border-violet-300:focus-visible,
.focus-visible\:border-violet-400:focus-visible,
.focus-visible\:border-violet-500:focus-visible,
.focus-visible\:border-violet-600:focus-visible,
.focus-visible\:border-purple-200:focus-visible,
.focus-visible\:border-purple-300:focus-visible,
.focus-visible\:border-purple-400:focus-visible,
.focus-visible\:border-purple-500:focus-visible,
.focus-visible\:border-purple-600:focus-visible { border-color: var(--color-primary) !important; }
.focus-visible\:bg-blue-400:focus-visible,
.focus-visible\:bg-blue-500:focus-visible,
.focus-visible\:bg-blue-600:focus-visible,
.focus-visible\:bg-indigo-400:focus-visible,
.focus-visible\:bg-indigo-500:focus-visible,
.focus-visible\:bg-indigo-600:focus-visible,
.focus-visible\:bg-violet-400:focus-visible,
.focus-visible\:bg-violet-500:focus-visible,
.focus-visible\:bg-violet-600:focus-visible,
.focus-visible\:bg-purple-400:focus-visible,
.focus-visible\:bg-purple-500:focus-visible,
.focus-visible\:bg-purple-600:focus-visible { background-color: var(--color-primary) !important; }
.focus-visible\:bg-blue-700:focus-visible,
.focus-visible\:bg-blue-800:focus-visible,
.focus-visible\:bg-blue-900:focus-visible,
.focus-visible\:bg-indigo-700:focus-visible,
.focus-visible\:bg-indigo-800:focus-visible,
.focus-visible\:bg-indigo-900:focus-visible,
.focus-visible\:bg-violet-700:focus-visible,
.focus-visible\:bg-violet-800:focus-visible,
.focus-visible\:bg-violet-900:focus-visible,
.focus-visible\:bg-purple-700:focus-visible,
.focus-visible\:bg-purple-800:focus-visible,
.focus-visible\:bg-purple-900:focus-visible { background-color: var(--color-primary-hover) !important; }
.focus-visible\:text-blue-700:focus-visible,
.focus-visible\:text-blue-800:focus-visible,
.focus-visible\:text-blue-900:focus-visible,
.focus-visible\:text-indigo-700:focus-visible,
.focus-visible\:text-indigo-800:focus-visible,
.focus-visible\:text-indigo-900:focus-visible,
.focus-visible\:text-violet-700:focus-visible,
.focus-visible\:text-violet-800:focus-visible,
.focus-visible\:text-violet-900:focus-visible,
.focus-visible\:text-purple-700:focus-visible,
.focus-visible\:text-purple-800:focus-visible,
.focus-visible\:text-purple-900:focus-visible { color: var(--color-primary-hover) !important; }
.focus-visible\:bg-red-50:focus-visible,
.focus-visible\:bg-red-100:focus-visible,
.focus-visible\:bg-red-200:focus-visible,
.focus-visible\:bg-red-300:focus-visible,
.focus-visible\:bg-rose-50:focus-visible,
.focus-visible\:bg-rose-100:focus-visible,
.focus-visible\:bg-rose-200:focus-visible,
.focus-visible\:bg-rose-300:focus-visible,
.focus-visible\:bg-pink-50:focus-visible,
.focus-visible\:bg-pink-100:focus-visible,
.focus-visible\:bg-pink-200:focus-visible,
.focus-visible\:bg-pink-300:focus-visible { background-color: var(--color-danger-muted) !important; }
.focus-visible\:text-red-50:focus-visible,
.focus-visible\:text-red-100:focus-visible,
.focus-visible\:text-red-200:focus-visible,
.focus-visible\:text-red-300:focus-visible,
.focus-visible\:text-red-400:focus-visible,
.focus-visible\:text-red-500:focus-visible,
.focus-visible\:text-red-600:focus-visible,
.focus-visible\:text-rose-50:focus-visible,
.focus-visible\:text-rose-100:focus-visible,
.focus-visible\:text-rose-200:focus-visible,
.focus-visible\:text-rose-300:focus-visible,
.focus-visible\:text-rose-400:focus-visible,
.focus-visible\:text-rose-500:focus-visible,
.focus-visible\:text-rose-600:focus-visible,
.focus-visible\:text-pink-50:focus-visible,
.focus-visible\:text-pink-100:focus-visible,
.focus-visible\:text-pink-200:focus-visible,
.focus-visible\:text-pink-300:focus-visible,
.focus-visible\:text-pink-400:focus-visible,
.focus-visible\:text-pink-500:focus-visible,
.focus-visible\:text-pink-600:focus-visible { color: var(--color-danger-on-surface) !important; }
.focus-visible\:border-red-200:focus-visible,
.focus-visible\:border-red-300:focus-visible,
.focus-visible\:border-red-400:focus-visible,
.focus-visible\:border-red-500:focus-visible,
.focus-visible\:border-red-600:focus-visible,
.focus-visible\:border-rose-200:focus-visible,
.focus-visible\:border-rose-300:focus-visible,
.focus-visible\:border-rose-400:focus-visible,
.focus-visible\:border-rose-500:focus-visible,
.focus-visible\:border-rose-600:focus-visible,
.focus-visible\:border-pink-200:focus-visible,
.focus-visible\:border-pink-300:focus-visible,
.focus-visible\:border-pink-400:focus-visible,
.focus-visible\:border-pink-500:focus-visible,
.focus-visible\:border-pink-600:focus-visible { border-color: var(--color-danger) !important; }
.focus-visible\:bg-red-400:focus-visible,
.focus-visible\:bg-red-500:focus-visible,
.focus-visible\:bg-red-600:focus-visible,
.focus-visible\:bg-rose-400:focus-visible,
.focus-visible\:bg-rose-500:focus-visible,
.focus-visible\:bg-rose-600:focus-visible,
.focus-visible\:bg-pink-400:focus-visible,
.focus-visible\:bg-pink-500:focus-visible,
.focus-visible\:bg-pink-600:focus-visible { background-color: var(--color-danger) !important; }
.focus-visible\:bg-red-700:focus-visible,
.focus-visible\:bg-red-800:focus-visible,
.focus-visible\:bg-red-900:focus-visible,
.focus-visible\:bg-rose-700:focus-visible,
.focus-visible\:bg-rose-800:focus-visible,
.focus-visible\:bg-rose-900:focus-visible,
.focus-visible\:bg-pink-700:focus-visible,
.focus-visible\:bg-pink-800:focus-visible,
.focus-visible\:bg-pink-900:focus-visible { background-color: var(--color-danger-hover) !important; }
.focus-visible\:text-red-700:focus-visible,
.focus-visible\:text-red-800:focus-visible,
.focus-visible\:text-red-900:focus-visible,
.focus-visible\:text-rose-700:focus-visible,
.focus-visible\:text-rose-800:focus-visible,
.focus-visible\:text-rose-900:focus-visible,
.focus-visible\:text-pink-700:focus-visible,
.focus-visible\:text-pink-800:focus-visible,
.focus-visible\:text-pink-900:focus-visible { color: var(--color-danger-text) !important; }
.focus-visible\:bg-green-50:focus-visible,
.focus-visible\:bg-green-100:focus-visible,
.focus-visible\:bg-green-200:focus-visible,
.focus-visible\:bg-green-300:focus-visible,
.focus-visible\:bg-emerald-50:focus-visible,
.focus-visible\:bg-emerald-100:focus-visible,
.focus-visible\:bg-emerald-200:focus-visible,
.focus-visible\:bg-emerald-300:focus-visible,
.focus-visible\:bg-teal-50:focus-visible,
.focus-visible\:bg-teal-100:focus-visible,
.focus-visible\:bg-teal-200:focus-visible,
.focus-visible\:bg-teal-300:focus-visible,
.focus-visible\:bg-lime-50:focus-visible,
.focus-visible\:bg-lime-100:focus-visible,
.focus-visible\:bg-lime-200:focus-visible,
.focus-visible\:bg-lime-300:focus-visible { background-color: var(--color-success-muted) !important; }
.focus-visible\:text-green-50:focus-visible,
.focus-visible\:text-green-100:focus-visible,
.focus-visible\:text-green-200:focus-visible,
.focus-visible\:text-green-300:focus-visible,
.focus-visible\:text-green-400:focus-visible,
.focus-visible\:text-green-500:focus-visible,
.focus-visible\:text-green-600:focus-visible,
.focus-visible\:text-emerald-50:focus-visible,
.focus-visible\:text-emerald-100:focus-visible,
.focus-visible\:text-emerald-200:focus-visible,
.focus-visible\:text-emerald-300:focus-visible,
.focus-visible\:text-emerald-400:focus-visible,
.focus-visible\:text-emerald-500:focus-visible,
.focus-visible\:text-emerald-600:focus-visible,
.focus-visible\:text-teal-50:focus-visible,
.focus-visible\:text-teal-100:focus-visible,
.focus-visible\:text-teal-200:focus-visible,
.focus-visible\:text-teal-300:focus-visible,
.focus-visible\:text-teal-400:focus-visible,
.focus-visible\:text-teal-500:focus-visible,
.focus-visible\:text-teal-600:focus-visible,
.focus-visible\:text-lime-50:focus-visible,
.focus-visible\:text-lime-100:focus-visible,
.focus-visible\:text-lime-200:focus-visible,
.focus-visible\:text-lime-300:focus-visible,
.focus-visible\:text-lime-400:focus-visible,
.focus-visible\:text-lime-500:focus-visible,
.focus-visible\:text-lime-600:focus-visible { color: var(--color-success-on-surface) !important; }
.focus-visible\:border-green-200:focus-visible,
.focus-visible\:border-green-300:focus-visible,
.focus-visible\:border-green-400:focus-visible,
.focus-visible\:border-green-500:focus-visible,
.focus-visible\:border-green-600:focus-visible,
.focus-visible\:border-emerald-200:focus-visible,
.focus-visible\:border-emerald-300:focus-visible,
.focus-visible\:border-emerald-400:focus-visible,
.focus-visible\:border-emerald-500:focus-visible,
.focus-visible\:border-emerald-600:focus-visible,
.focus-visible\:border-teal-200:focus-visible,
.focus-visible\:border-teal-300:focus-visible,
.focus-visible\:border-teal-400:focus-visible,
.focus-visible\:border-teal-500:focus-visible,
.focus-visible\:border-teal-600:focus-visible,
.focus-visible\:border-lime-200:focus-visible,
.focus-visible\:border-lime-300:focus-visible,
.focus-visible\:border-lime-400:focus-visible,
.focus-visible\:border-lime-500:focus-visible,
.focus-visible\:border-lime-600:focus-visible { border-color: var(--color-success) !important; }
.focus-visible\:bg-green-400:focus-visible,
.focus-visible\:bg-green-500:focus-visible,
.focus-visible\:bg-green-600:focus-visible,
.focus-visible\:bg-emerald-400:focus-visible,
.focus-visible\:bg-emerald-500:focus-visible,
.focus-visible\:bg-emerald-600:focus-visible,
.focus-visible\:bg-teal-400:focus-visible,
.focus-visible\:bg-teal-500:focus-visible,
.focus-visible\:bg-teal-600:focus-visible,
.focus-visible\:bg-lime-400:focus-visible,
.focus-visible\:bg-lime-500:focus-visible,
.focus-visible\:bg-lime-600:focus-visible { background-color: var(--color-success) !important; }
.focus-visible\:bg-green-700:focus-visible,
.focus-visible\:bg-green-800:focus-visible,
.focus-visible\:bg-green-900:focus-visible,
.focus-visible\:bg-emerald-700:focus-visible,
.focus-visible\:bg-emerald-800:focus-visible,
.focus-visible\:bg-emerald-900:focus-visible,
.focus-visible\:bg-teal-700:focus-visible,
.focus-visible\:bg-teal-800:focus-visible,
.focus-visible\:bg-teal-900:focus-visible,
.focus-visible\:bg-lime-700:focus-visible,
.focus-visible\:bg-lime-800:focus-visible,
.focus-visible\:bg-lime-900:focus-visible { background-color: var(--color-success-hover) !important; }
.focus-visible\:text-green-700:focus-visible,
.focus-visible\:text-green-800:focus-visible,
.focus-visible\:text-green-900:focus-visible,
.focus-visible\:text-emerald-700:focus-visible,
.focus-visible\:text-emerald-800:focus-visible,
.focus-visible\:text-emerald-900:focus-visible,
.focus-visible\:text-teal-700:focus-visible,
.focus-visible\:text-teal-800:focus-visible,
.focus-visible\:text-teal-900:focus-visible,
.focus-visible\:text-lime-700:focus-visible,
.focus-visible\:text-lime-800:focus-visible,
.focus-visible\:text-lime-900:focus-visible { color: var(--color-success-text) !important; }
.focus-visible\:bg-amber-50:focus-visible,
.focus-visible\:bg-amber-100:focus-visible,
.focus-visible\:bg-amber-200:focus-visible,
.focus-visible\:bg-amber-300:focus-visible,
.focus-visible\:bg-yellow-50:focus-visible,
.focus-visible\:bg-yellow-100:focus-visible,
.focus-visible\:bg-yellow-200:focus-visible,
.focus-visible\:bg-yellow-300:focus-visible,
.focus-visible\:bg-orange-50:focus-visible,
.focus-visible\:bg-orange-100:focus-visible,
.focus-visible\:bg-orange-200:focus-visible,
.focus-visible\:bg-orange-300:focus-visible { background-color: var(--color-warning-muted) !important; }
.focus-visible\:text-amber-50:focus-visible,
.focus-visible\:text-amber-100:focus-visible,
.focus-visible\:text-amber-200:focus-visible,
.focus-visible\:text-amber-300:focus-visible,
.focus-visible\:text-amber-400:focus-visible,
.focus-visible\:text-amber-500:focus-visible,
.focus-visible\:text-amber-600:focus-visible,
.focus-visible\:text-yellow-50:focus-visible,
.focus-visible\:text-yellow-100:focus-visible,
.focus-visible\:text-yellow-200:focus-visible,
.focus-visible\:text-yellow-300:focus-visible,
.focus-visible\:text-yellow-400:focus-visible,
.focus-visible\:text-yellow-500:focus-visible,
.focus-visible\:text-yellow-600:focus-visible,
.focus-visible\:text-orange-50:focus-visible,
.focus-visible\:text-orange-100:focus-visible,
.focus-visible\:text-orange-200:focus-visible,
.focus-visible\:text-orange-300:focus-visible,
.focus-visible\:text-orange-400:focus-visible,
.focus-visible\:text-orange-500:focus-visible,
.focus-visible\:text-orange-600:focus-visible { color: var(--color-warning-on-surface) !important; }
.focus-visible\:border-amber-200:focus-visible,
.focus-visible\:border-amber-300:focus-visible,
.focus-visible\:border-amber-400:focus-visible,
.focus-visible\:border-amber-500:focus-visible,
.focus-visible\:border-amber-600:focus-visible,
.focus-visible\:border-yellow-200:focus-visible,
.focus-visible\:border-yellow-300:focus-visible,
.focus-visible\:border-yellow-400:focus-visible,
.focus-visible\:border-yellow-500:focus-visible,
.focus-visible\:border-yellow-600:focus-visible,
.focus-visible\:border-orange-200:focus-visible,
.focus-visible\:border-orange-300:focus-visible,
.focus-visible\:border-orange-400:focus-visible,
.focus-visible\:border-orange-500:focus-visible,
.focus-visible\:border-orange-600:focus-visible { border-color: var(--color-warning) !important; }
.focus-visible\:bg-amber-400:focus-visible,
.focus-visible\:bg-amber-500:focus-visible,
.focus-visible\:bg-amber-600:focus-visible,
.focus-visible\:bg-yellow-400:focus-visible,
.focus-visible\:bg-yellow-500:focus-visible,
.focus-visible\:bg-yellow-600:focus-visible,
.focus-visible\:bg-orange-400:focus-visible,
.focus-visible\:bg-orange-500:focus-visible,
.focus-visible\:bg-orange-600:focus-visible { background-color: var(--color-warning) !important; }
.focus-visible\:bg-amber-700:focus-visible,
.focus-visible\:bg-amber-800:focus-visible,
.focus-visible\:bg-amber-900:focus-visible,
.focus-visible\:bg-yellow-700:focus-visible,
.focus-visible\:bg-yellow-800:focus-visible,
.focus-visible\:bg-yellow-900:focus-visible,
.focus-visible\:bg-orange-700:focus-visible,
.focus-visible\:bg-orange-800:focus-visible,
.focus-visible\:bg-orange-900:focus-visible { background-color: var(--color-warning-hover) !important; }
.focus-visible\:text-amber-700:focus-visible,
.focus-visible\:text-amber-800:focus-visible,
.focus-visible\:text-amber-900:focus-visible,
.focus-visible\:text-yellow-700:focus-visible,
.focus-visible\:text-yellow-800:focus-visible,
.focus-visible\:text-yellow-900:focus-visible,
.focus-visible\:text-orange-700:focus-visible,
.focus-visible\:text-orange-800:focus-visible,
.focus-visible\:text-orange-900:focus-visible { color: var(--color-warning-text) !important; }
.focus-visible\:bg-cyan-50:focus-visible,
.focus-visible\:bg-cyan-100:focus-visible,
.focus-visible\:bg-cyan-200:focus-visible,
.focus-visible\:bg-cyan-300:focus-visible,
.focus-visible\:bg-sky-50:focus-visible,
.focus-visible\:bg-sky-100:focus-visible,
.focus-visible\:bg-sky-200:focus-visible,
.focus-visible\:bg-sky-300:focus-visible { background-color: var(--color-info-muted) !important; }
.focus-visible\:text-cyan-50:focus-visible,
.focus-visible\:text-cyan-100:focus-visible,
.focus-visible\:text-cyan-200:focus-visible,
.focus-visible\:text-cyan-300:focus-visible,
.focus-visible\:text-cyan-400:focus-visible,
.focus-visible\:text-cyan-500:focus-visible,
.focus-visible\:text-cyan-600:focus-visible,
.focus-visible\:text-sky-50:focus-visible,
.focus-visible\:text-sky-100:focus-visible,
.focus-visible\:text-sky-200:focus-visible,
.focus-visible\:text-sky-300:focus-visible,
.focus-visible\:text-sky-400:focus-visible,
.focus-visible\:text-sky-500:focus-visible,
.focus-visible\:text-sky-600:focus-visible { color: var(--color-info-on-surface) !important; }
.focus-visible\:border-cyan-200:focus-visible,
.focus-visible\:border-cyan-300:focus-visible,
.focus-visible\:border-cyan-400:focus-visible,
.focus-visible\:border-cyan-500:focus-visible,
.focus-visible\:border-cyan-600:focus-visible,
.focus-visible\:border-sky-200:focus-visible,
.focus-visible\:border-sky-300:focus-visible,
.focus-visible\:border-sky-400:focus-visible,
.focus-visible\:border-sky-500:focus-visible,
.focus-visible\:border-sky-600:focus-visible { border-color: var(--color-info) !important; }
.focus-visible\:bg-cyan-400:focus-visible,
.focus-visible\:bg-cyan-500:focus-visible,
.focus-visible\:bg-cyan-600:focus-visible,
.focus-visible\:bg-sky-400:focus-visible,
.focus-visible\:bg-sky-500:focus-visible,
.focus-visible\:bg-sky-600:focus-visible { background-color: var(--color-info) !important; }
.focus-visible\:bg-cyan-700:focus-visible,
.focus-visible\:bg-cyan-800:focus-visible,
.focus-visible\:bg-cyan-900:focus-visible,
.focus-visible\:bg-sky-700:focus-visible,
.focus-visible\:bg-sky-800:focus-visible,
.focus-visible\:bg-sky-900:focus-visible { background-color: var(--color-info-hover) !important; }
.focus-visible\:text-cyan-700:focus-visible,
.focus-visible\:text-cyan-800:focus-visible,
.focus-visible\:text-cyan-900:focus-visible,
.focus-visible\:text-sky-700:focus-visible,
.focus-visible\:text-sky-800:focus-visible,
.focus-visible\:text-sky-900:focus-visible { color: var(--color-info-text) !important; }
.focus-visible\:border-gray-600:focus-visible,
.focus-visible\:border-gray-700:focus-visible,
.focus-visible\:border-slate-600:focus-visible,
.focus-visible\:border-slate-700:focus-visible,
.focus-visible\:border-zinc-600:focus-visible,
.focus-visible\:border-zinc-700:focus-visible,
.focus-visible\:border-neutral-600:focus-visible,
.focus-visible\:border-neutral-700:focus-visible,
.focus-visible\:border-stone-600:focus-visible,
.focus-visible\:border-stone-700:focus-visible { border-color: var(--text-secondary) !important; }
.focus-visible\:border-gray-800:focus-visible,
.focus-visible\:border-gray-900:focus-visible,
.focus-visible\:border-slate-800:focus-visible,
.focus-visible\:border-slate-900:focus-visible,
.focus-visible\:border-zinc-800:focus-visible,
.focus-visible\:border-zinc-900:focus-visible,
.focus-visible\:border-neutral-800:focus-visible,
.focus-visible\:border-neutral-900:focus-visible,
.focus-visible\:border-stone-800:focus-visible,
.focus-visible\:border-stone-900:focus-visible { border-color: var(--text-primary) !important; }
.focus-visible\:bg-gray-300:focus-visible,
.focus-visible\:bg-slate-300:focus-visible,
.focus-visible\:bg-zinc-300:focus-visible,
.focus-visible\:bg-neutral-300:focus-visible,
.focus-visible\:bg-stone-300:focus-visible { background-color: var(--border-color-strong) !important; }
.focus-visible\:bg-gray-400:focus-visible,
.focus-visible\:bg-gray-500:focus-visible,
.focus-visible\:bg-slate-400:focus-visible,
.focus-visible\:bg-slate-500:focus-visible,
.focus-visible\:bg-zinc-400:focus-visible,
.focus-visible\:bg-zinc-500:focus-visible,
.focus-visible\:bg-neutral-400:focus-visible,
.focus-visible\:bg-neutral-500:focus-visible,
.focus-visible\:bg-stone-400:focus-visible,
.focus-visible\:bg-stone-500:focus-visible { background-color: var(--text-muted) !important; }
.focus-visible\:divide-gray-100:focus-visible > * + *,
.focus-visible\:divide-gray-200:focus-visible > * + *,
.focus-visible\:divide-slate-100:focus-visible > * + *,
.focus-visible\:divide-slate-200:focus-visible > * + *,
.focus-visible\:divide-zinc-100:focus-visible > * + *,
.focus-visible\:divide-zinc-200:focus-visible > * + *,
.focus-visible\:divide-neutral-100:focus-visible > * + *,
.focus-visible\:divide-neutral-200:focus-visible > * + *,
.focus-visible\:divide-stone-100:focus-visible > * + *,
.focus-visible\:divide-stone-200:focus-visible > * + * { border-color: var(--border-color) !important; }
.focus-visible\:divide-gray-300:focus-visible > * + *,
.focus-visible\:divide-slate-300:focus-visible > * + *,
.focus-visible\:divide-zinc-300:focus-visible > * + *,
.focus-visible\:divide-neutral-300:focus-visible > * + *,
.focus-visible\:divide-stone-300:focus-visible > * + * { border-color: var(--border-color-strong) !important; }
.focus-visible\:ring-blue-300:focus-visible,
.focus-visible\:ring-blue-400:focus-visible,
.focus-visible\:ring-blue-500:focus-visible,
.focus-visible\:ring-blue-600:focus-visible,
.focus-visible\:ring-indigo-300:focus-visible,
.focus-visible\:ring-indigo-400:focus-visible,
.focus-visible\:ring-indigo-500:focus-visible,
.focus-visible\:ring-indigo-600:focus-visible,
.focus-visible\:ring-violet-300:focus-visible,
.focus-visible\:ring-violet-400:focus-visible,
.focus-visible\:ring-violet-500:focus-visible,
.focus-visible\:ring-violet-600:focus-visible,
.focus-visible\:ring-purple-300:focus-visible,
.focus-visible\:ring-purple-400:focus-visible,
.focus-visible\:ring-purple-500:focus-visible,
.focus-visible\:ring-purple-600:focus-visible { --tw-ring-color: var(--color-primary) !important; }
.focus-visible\:ring-red-300:focus-visible,
.focus-visible\:ring-red-400:focus-visible,
.focus-visible\:ring-red-500:focus-visible,
.focus-visible\:ring-red-600:focus-visible,
.focus-visible\:ring-rose-300:focus-visible,
.focus-visible\:ring-rose-400:focus-visible,
.focus-visible\:ring-rose-500:focus-visible,
.focus-visible\:ring-rose-600:focus-visible,
.focus-visible\:ring-pink-300:focus-visible,
.focus-visible\:ring-pink-400:focus-visible,
.focus-visible\:ring-pink-500:focus-visible,
.focus-visible\:ring-pink-600:focus-visible { --tw-ring-color: var(--color-danger) !important; }
.focus-visible\:ring-green-300:focus-visible,
.focus-visible\:ring-green-400:focus-visible,
.focus-visible\:ring-green-500:focus-visible,
.focus-visible\:ring-green-600:focus-visible,
.focus-visible\:ring-emerald-300:focus-visible,
.focus-visible\:ring-emerald-400:focus-visible,
.focus-visible\:ring-emerald-500:focus-visible,
.focus-visible\:ring-emerald-600:focus-visible,
.focus-visible\:ring-teal-300:focus-visible,
.focus-visible\:ring-teal-400:focus-visible,
.focus-visible\:ring-teal-500:focus-visible,
.focus-visible\:ring-teal-600:focus-visible,
.focus-visible\:ring-lime-300:focus-visible,
.focus-visible\:ring-lime-400:focus-visible,
.focus-visible\:ring-lime-500:focus-visible,
.focus-visible\:ring-lime-600:focus-visible { --tw-ring-color: var(--color-success) !important; }
.focus-visible\:ring-amber-300:focus-visible,
.focus-visible\:ring-amber-400:focus-visible,
.focus-visible\:ring-amber-500:focus-visible,
.focus-visible\:ring-amber-600:focus-visible,
.focus-visible\:ring-yellow-300:focus-visible,
.focus-visible\:ring-yellow-400:focus-visible,
.focus-visible\:ring-yellow-500:focus-visible,
.focus-visible\:ring-yellow-600:focus-visible,
.focus-visible\:ring-orange-300:focus-visible,
.focus-visible\:ring-orange-400:focus-visible,
.focus-visible\:ring-orange-500:focus-visible,
.focus-visible\:ring-orange-600:focus-visible { --tw-ring-color: var(--color-warning) !important; }
.focus-visible\:ring-sky-300:focus-visible,
.focus-visible\:ring-sky-400:focus-visible,
.focus-visible\:ring-sky-500:focus-visible,
.focus-visible\:ring-sky-600:focus-visible,
.focus-visible\:ring-cyan-300:focus-visible,
.focus-visible\:ring-cyan-400:focus-visible,
.focus-visible\:ring-cyan-500:focus-visible,
.focus-visible\:ring-cyan-600:focus-visible { --tw-ring-color: var(--color-info) !important; }

/* ---- active: ---- */
.active\:text-gray-50:active,
.active\:text-gray-100:active,
.active\:text-slate-50:active,
.active\:text-slate-100:active,
.active\:text-zinc-50:active,
.active\:text-zinc-100:active,
.active\:text-neutral-50:active,
.active\:text-neutral-100:active,
.active\:text-stone-50:active,
.active\:text-stone-100:active { color: var(--surface-inset) !important; }
.active\:text-gray-200:active,
.active\:text-slate-200:active,
.active\:text-zinc-200:active,
.active\:text-neutral-200:active,
.active\:text-stone-200:active { color: var(--border-color) !important; }
.active\:text-gray-300:active,
.active\:text-slate-300:active,
.active\:text-zinc-300:active,
.active\:text-neutral-300:active,
.active\:text-stone-300:active { color: var(--border-color-strong) !important; }
.active\:text-gray-400:active,
.active\:text-gray-500:active,
.active\:text-slate-400:active,
.active\:text-slate-500:active,
.active\:text-zinc-400:active,
.active\:text-zinc-500:active,
.active\:text-neutral-400:active,
.active\:text-neutral-500:active,
.active\:text-stone-400:active,
.active\:text-stone-500:active { color: var(--text-muted) !important; }
.active\:text-gray-600:active,
.active\:text-gray-700:active,
.active\:text-slate-600:active,
.active\:text-slate-700:active,
.active\:text-zinc-600:active,
.active\:text-zinc-700:active,
.active\:text-neutral-600:active,
.active\:text-neutral-700:active,
.active\:text-stone-600:active,
.active\:text-stone-700:active { color: var(--text-secondary) !important; }
.active\:text-gray-800:active,
.active\:text-gray-900:active,
.active\:text-gray-950:active,
.active\:text-slate-800:active,
.active\:text-slate-900:active,
.active\:text-slate-950:active,
.active\:text-zinc-800:active,
.active\:text-zinc-900:active,
.active\:text-zinc-950:active,
.active\:text-neutral-800:active,
.active\:text-neutral-900:active,
.active\:text-neutral-950:active,
.active\:text-stone-800:active,
.active\:text-stone-900:active,
.active\:text-stone-950:active { color: var(--text-primary) !important; }
.active\:bg-gray-50:active,
.active\:bg-gray-100:active,
.active\:bg-slate-50:active,
.active\:bg-slate-100:active,
.active\:bg-zinc-50:active,
.active\:bg-zinc-100:active,
.active\:bg-neutral-50:active,
.active\:bg-neutral-100:active,
.active\:bg-stone-50:active,
.active\:bg-stone-100:active { background-color: var(--surface-inset) !important; }
.active\:bg-gray-200:active,
.active\:bg-slate-200:active,
.active\:bg-zinc-200:active,
.active\:bg-neutral-200:active,
.active\:bg-stone-200:active { background-color: var(--border-color) !important; }
.active\:bg-gray-700:active,
.active\:bg-slate-700:active,
.active\:bg-zinc-700:active,
.active\:bg-neutral-700:active,
.active\:bg-stone-700:active,
.active\:bg-gray-600:active,
.active\:bg-slate-600:active,
.active\:bg-zinc-600:active,
.active\:bg-neutral-600:active,
.active\:bg-stone-600:active { background-color: var(--text-secondary) !important; }
.active\:bg-gray-800:active,
.active\:bg-gray-900:active,
.active\:bg-slate-800:active,
.active\:bg-slate-900:active,
.active\:bg-zinc-800:active,
.active\:bg-zinc-900:active,
.active\:bg-neutral-800:active,
.active\:bg-neutral-900:active,
.active\:bg-stone-800:active,
.active\:bg-stone-900:active { background-color: var(--text-primary) !important; }
.active\:border-gray-200:active,
.active\:border-slate-200:active,
.active\:border-zinc-200:active,
.active\:border-neutral-200:active,
.active\:border-stone-200:active,
.active\:border-gray-100:active,
.active\:border-slate-100:active,
.active\:border-zinc-100:active,
.active\:border-neutral-100:active,
.active\:border-stone-100:active { border-color: var(--border-color) !important; }
.active\:border-gray-300:active,
.active\:border-slate-300:active,
.active\:border-zinc-300:active,
.active\:border-neutral-300:active,
.active\:border-stone-300:active,
.active\:border-gray-400:active,
.active\:border-gray-500:active,
.active\:border-slate-400:active,
.active\:border-slate-500:active,
.active\:border-zinc-400:active,
.active\:border-zinc-500:active,
.active\:border-neutral-400:active,
.active\:border-neutral-500:active,
.active\:border-stone-400:active,
.active\:border-stone-500:active { border-color: var(--border-color-strong) !important; }
.active\:border-gray-400:active,
.active\:border-slate-400:active,
.active\:border-zinc-400:active,
.active\:border-neutral-400:active,
.active\:border-stone-400:active { border-color: var(--text-muted) !important; }
.active\:bg-blue-50:active,
.active\:bg-blue-100:active,
.active\:bg-blue-200:active,
.active\:bg-blue-300:active,
.active\:bg-indigo-50:active,
.active\:bg-indigo-100:active,
.active\:bg-indigo-200:active,
.active\:bg-indigo-300:active,
.active\:bg-violet-50:active,
.active\:bg-violet-100:active,
.active\:bg-violet-200:active,
.active\:bg-violet-300:active,
.active\:bg-purple-50:active,
.active\:bg-purple-100:active,
.active\:bg-purple-200:active,
.active\:bg-purple-300:active { background-color: var(--color-primary-muted) !important; }
.active\:text-blue-50:active,
.active\:text-blue-100:active,
.active\:text-blue-200:active,
.active\:text-blue-300:active,
.active\:text-blue-400:active,
.active\:text-blue-500:active,
.active\:text-blue-600:active,
.active\:text-indigo-50:active,
.active\:text-indigo-100:active,
.active\:text-indigo-200:active,
.active\:text-indigo-300:active,
.active\:text-indigo-400:active,
.active\:text-indigo-500:active,
.active\:text-indigo-600:active,
.active\:text-violet-50:active,
.active\:text-violet-100:active,
.active\:text-violet-200:active,
.active\:text-violet-300:active,
.active\:text-violet-400:active,
.active\:text-violet-500:active,
.active\:text-violet-600:active,
.active\:text-purple-50:active,
.active\:text-purple-100:active,
.active\:text-purple-200:active,
.active\:text-purple-300:active,
.active\:text-purple-400:active,
.active\:text-purple-500:active,
.active\:text-purple-600:active { color: var(--color-primary) !important; }
.active\:border-blue-200:active,
.active\:border-blue-300:active,
.active\:border-blue-400:active,
.active\:border-blue-500:active,
.active\:border-blue-600:active,
.active\:border-indigo-200:active,
.active\:border-indigo-300:active,
.active\:border-indigo-400:active,
.active\:border-indigo-500:active,
.active\:border-indigo-600:active,
.active\:border-violet-200:active,
.active\:border-violet-300:active,
.active\:border-violet-400:active,
.active\:border-violet-500:active,
.active\:border-violet-600:active,
.active\:border-purple-200:active,
.active\:border-purple-300:active,
.active\:border-purple-400:active,
.active\:border-purple-500:active,
.active\:border-purple-600:active { border-color: var(--color-primary) !important; }
.active\:bg-blue-400:active,
.active\:bg-blue-500:active,
.active\:bg-blue-600:active,
.active\:bg-indigo-400:active,
.active\:bg-indigo-500:active,
.active\:bg-indigo-600:active,
.active\:bg-violet-400:active,
.active\:bg-violet-500:active,
.active\:bg-violet-600:active,
.active\:bg-purple-400:active,
.active\:bg-purple-500:active,
.active\:bg-purple-600:active { background-color: var(--color-primary) !important; }
.active\:bg-blue-700:active,
.active\:bg-blue-800:active,
.active\:bg-blue-900:active,
.active\:bg-indigo-700:active,
.active\:bg-indigo-800:active,
.active\:bg-indigo-900:active,
.active\:bg-violet-700:active,
.active\:bg-violet-800:active,
.active\:bg-violet-900:active,
.active\:bg-purple-700:active,
.active\:bg-purple-800:active,
.active\:bg-purple-900:active { background-color: var(--color-primary-hover) !important; }
.active\:text-blue-700:active,
.active\:text-blue-800:active,
.active\:text-blue-900:active,
.active\:text-indigo-700:active,
.active\:text-indigo-800:active,
.active\:text-indigo-900:active,
.active\:text-violet-700:active,
.active\:text-violet-800:active,
.active\:text-violet-900:active,
.active\:text-purple-700:active,
.active\:text-purple-800:active,
.active\:text-purple-900:active { color: var(--color-primary-hover) !important; }
.active\:bg-red-50:active,
.active\:bg-red-100:active,
.active\:bg-red-200:active,
.active\:bg-red-300:active,
.active\:bg-rose-50:active,
.active\:bg-rose-100:active,
.active\:bg-rose-200:active,
.active\:bg-rose-300:active,
.active\:bg-pink-50:active,
.active\:bg-pink-100:active,
.active\:bg-pink-200:active,
.active\:bg-pink-300:active { background-color: var(--color-danger-muted) !important; }
.active\:text-red-50:active,
.active\:text-red-100:active,
.active\:text-red-200:active,
.active\:text-red-300:active,
.active\:text-red-400:active,
.active\:text-red-500:active,
.active\:text-red-600:active,
.active\:text-rose-50:active,
.active\:text-rose-100:active,
.active\:text-rose-200:active,
.active\:text-rose-300:active,
.active\:text-rose-400:active,
.active\:text-rose-500:active,
.active\:text-rose-600:active,
.active\:text-pink-50:active,
.active\:text-pink-100:active,
.active\:text-pink-200:active,
.active\:text-pink-300:active,
.active\:text-pink-400:active,
.active\:text-pink-500:active,
.active\:text-pink-600:active { color: var(--color-danger-on-surface) !important; }
.active\:border-red-200:active,
.active\:border-red-300:active,
.active\:border-red-400:active,
.active\:border-red-500:active,
.active\:border-red-600:active,
.active\:border-rose-200:active,
.active\:border-rose-300:active,
.active\:border-rose-400:active,
.active\:border-rose-500:active,
.active\:border-rose-600:active,
.active\:border-pink-200:active,
.active\:border-pink-300:active,
.active\:border-pink-400:active,
.active\:border-pink-500:active,
.active\:border-pink-600:active { border-color: var(--color-danger) !important; }
.active\:bg-red-400:active,
.active\:bg-red-500:active,
.active\:bg-red-600:active,
.active\:bg-rose-400:active,
.active\:bg-rose-500:active,
.active\:bg-rose-600:active,
.active\:bg-pink-400:active,
.active\:bg-pink-500:active,
.active\:bg-pink-600:active { background-color: var(--color-danger) !important; }
.active\:bg-red-700:active,
.active\:bg-red-800:active,
.active\:bg-red-900:active,
.active\:bg-rose-700:active,
.active\:bg-rose-800:active,
.active\:bg-rose-900:active,
.active\:bg-pink-700:active,
.active\:bg-pink-800:active,
.active\:bg-pink-900:active { background-color: var(--color-danger-hover) !important; }
.active\:text-red-700:active,
.active\:text-red-800:active,
.active\:text-red-900:active,
.active\:text-rose-700:active,
.active\:text-rose-800:active,
.active\:text-rose-900:active,
.active\:text-pink-700:active,
.active\:text-pink-800:active,
.active\:text-pink-900:active { color: var(--color-danger-text) !important; }
.active\:bg-green-50:active,
.active\:bg-green-100:active,
.active\:bg-green-200:active,
.active\:bg-green-300:active,
.active\:bg-emerald-50:active,
.active\:bg-emerald-100:active,
.active\:bg-emerald-200:active,
.active\:bg-emerald-300:active,
.active\:bg-teal-50:active,
.active\:bg-teal-100:active,
.active\:bg-teal-200:active,
.active\:bg-teal-300:active,
.active\:bg-lime-50:active,
.active\:bg-lime-100:active,
.active\:bg-lime-200:active,
.active\:bg-lime-300:active { background-color: var(--color-success-muted) !important; }
.active\:text-green-50:active,
.active\:text-green-100:active,
.active\:text-green-200:active,
.active\:text-green-300:active,
.active\:text-green-400:active,
.active\:text-green-500:active,
.active\:text-green-600:active,
.active\:text-emerald-50:active,
.active\:text-emerald-100:active,
.active\:text-emerald-200:active,
.active\:text-emerald-300:active,
.active\:text-emerald-400:active,
.active\:text-emerald-500:active,
.active\:text-emerald-600:active,
.active\:text-teal-50:active,
.active\:text-teal-100:active,
.active\:text-teal-200:active,
.active\:text-teal-300:active,
.active\:text-teal-400:active,
.active\:text-teal-500:active,
.active\:text-teal-600:active,
.active\:text-lime-50:active,
.active\:text-lime-100:active,
.active\:text-lime-200:active,
.active\:text-lime-300:active,
.active\:text-lime-400:active,
.active\:text-lime-500:active,
.active\:text-lime-600:active { color: var(--color-success-on-surface) !important; }
.active\:border-green-200:active,
.active\:border-green-300:active,
.active\:border-green-400:active,
.active\:border-green-500:active,
.active\:border-green-600:active,
.active\:border-emerald-200:active,
.active\:border-emerald-300:active,
.active\:border-emerald-400:active,
.active\:border-emerald-500:active,
.active\:border-emerald-600:active,
.active\:border-teal-200:active,
.active\:border-teal-300:active,
.active\:border-teal-400:active,
.active\:border-teal-500:active,
.active\:border-teal-600:active,
.active\:border-lime-200:active,
.active\:border-lime-300:active,
.active\:border-lime-400:active,
.active\:border-lime-500:active,
.active\:border-lime-600:active { border-color: var(--color-success) !important; }
.active\:bg-green-400:active,
.active\:bg-green-500:active,
.active\:bg-green-600:active,
.active\:bg-emerald-400:active,
.active\:bg-emerald-500:active,
.active\:bg-emerald-600:active,
.active\:bg-teal-400:active,
.active\:bg-teal-500:active,
.active\:bg-teal-600:active,
.active\:bg-lime-400:active,
.active\:bg-lime-500:active,
.active\:bg-lime-600:active { background-color: var(--color-success) !important; }
.active\:bg-green-700:active,
.active\:bg-green-800:active,
.active\:bg-green-900:active,
.active\:bg-emerald-700:active,
.active\:bg-emerald-800:active,
.active\:bg-emerald-900:active,
.active\:bg-teal-700:active,
.active\:bg-teal-800:active,
.active\:bg-teal-900:active,
.active\:bg-lime-700:active,
.active\:bg-lime-800:active,
.active\:bg-lime-900:active { background-color: var(--color-success-hover) !important; }
.active\:text-green-700:active,
.active\:text-green-800:active,
.active\:text-green-900:active,
.active\:text-emerald-700:active,
.active\:text-emerald-800:active,
.active\:text-emerald-900:active,
.active\:text-teal-700:active,
.active\:text-teal-800:active,
.active\:text-teal-900:active,
.active\:text-lime-700:active,
.active\:text-lime-800:active,
.active\:text-lime-900:active { color: var(--color-success-text) !important; }
.active\:bg-amber-50:active,
.active\:bg-amber-100:active,
.active\:bg-amber-200:active,
.active\:bg-amber-300:active,
.active\:bg-yellow-50:active,
.active\:bg-yellow-100:active,
.active\:bg-yellow-200:active,
.active\:bg-yellow-300:active,
.active\:bg-orange-50:active,
.active\:bg-orange-100:active,
.active\:bg-orange-200:active,
.active\:bg-orange-300:active { background-color: var(--color-warning-muted) !important; }
.active\:text-amber-50:active,
.active\:text-amber-100:active,
.active\:text-amber-200:active,
.active\:text-amber-300:active,
.active\:text-amber-400:active,
.active\:text-amber-500:active,
.active\:text-amber-600:active,
.active\:text-yellow-50:active,
.active\:text-yellow-100:active,
.active\:text-yellow-200:active,
.active\:text-yellow-300:active,
.active\:text-yellow-400:active,
.active\:text-yellow-500:active,
.active\:text-yellow-600:active,
.active\:text-orange-50:active,
.active\:text-orange-100:active,
.active\:text-orange-200:active,
.active\:text-orange-300:active,
.active\:text-orange-400:active,
.active\:text-orange-500:active,
.active\:text-orange-600:active { color: var(--color-warning-on-surface) !important; }
.active\:border-amber-200:active,
.active\:border-amber-300:active,
.active\:border-amber-400:active,
.active\:border-amber-500:active,
.active\:border-amber-600:active,
.active\:border-yellow-200:active,
.active\:border-yellow-300:active,
.active\:border-yellow-400:active,
.active\:border-yellow-500:active,
.active\:border-yellow-600:active,
.active\:border-orange-200:active,
.active\:border-orange-300:active,
.active\:border-orange-400:active,
.active\:border-orange-500:active,
.active\:border-orange-600:active { border-color: var(--color-warning) !important; }
.active\:bg-amber-400:active,
.active\:bg-amber-500:active,
.active\:bg-amber-600:active,
.active\:bg-yellow-400:active,
.active\:bg-yellow-500:active,
.active\:bg-yellow-600:active,
.active\:bg-orange-400:active,
.active\:bg-orange-500:active,
.active\:bg-orange-600:active { background-color: var(--color-warning) !important; }
.active\:bg-amber-700:active,
.active\:bg-amber-800:active,
.active\:bg-amber-900:active,
.active\:bg-yellow-700:active,
.active\:bg-yellow-800:active,
.active\:bg-yellow-900:active,
.active\:bg-orange-700:active,
.active\:bg-orange-800:active,
.active\:bg-orange-900:active { background-color: var(--color-warning-hover) !important; }
.active\:text-amber-700:active,
.active\:text-amber-800:active,
.active\:text-amber-900:active,
.active\:text-yellow-700:active,
.active\:text-yellow-800:active,
.active\:text-yellow-900:active,
.active\:text-orange-700:active,
.active\:text-orange-800:active,
.active\:text-orange-900:active { color: var(--color-warning-text) !important; }
.active\:bg-cyan-50:active,
.active\:bg-cyan-100:active,
.active\:bg-cyan-200:active,
.active\:bg-cyan-300:active,
.active\:bg-sky-50:active,
.active\:bg-sky-100:active,
.active\:bg-sky-200:active,
.active\:bg-sky-300:active { background-color: var(--color-info-muted) !important; }
.active\:text-cyan-50:active,
.active\:text-cyan-100:active,
.active\:text-cyan-200:active,
.active\:text-cyan-300:active,
.active\:text-cyan-400:active,
.active\:text-cyan-500:active,
.active\:text-cyan-600:active,
.active\:text-sky-50:active,
.active\:text-sky-100:active,
.active\:text-sky-200:active,
.active\:text-sky-300:active,
.active\:text-sky-400:active,
.active\:text-sky-500:active,
.active\:text-sky-600:active { color: var(--color-info-on-surface) !important; }
.active\:border-cyan-200:active,
.active\:border-cyan-300:active,
.active\:border-cyan-400:active,
.active\:border-cyan-500:active,
.active\:border-cyan-600:active,
.active\:border-sky-200:active,
.active\:border-sky-300:active,
.active\:border-sky-400:active,
.active\:border-sky-500:active,
.active\:border-sky-600:active { border-color: var(--color-info) !important; }
.active\:bg-cyan-400:active,
.active\:bg-cyan-500:active,
.active\:bg-cyan-600:active,
.active\:bg-sky-400:active,
.active\:bg-sky-500:active,
.active\:bg-sky-600:active { background-color: var(--color-info) !important; }
.active\:bg-cyan-700:active,
.active\:bg-cyan-800:active,
.active\:bg-cyan-900:active,
.active\:bg-sky-700:active,
.active\:bg-sky-800:active,
.active\:bg-sky-900:active { background-color: var(--color-info-hover) !important; }
.active\:text-cyan-700:active,
.active\:text-cyan-800:active,
.active\:text-cyan-900:active,
.active\:text-sky-700:active,
.active\:text-sky-800:active,
.active\:text-sky-900:active { color: var(--color-info-text) !important; }
.active\:border-gray-600:active,
.active\:border-gray-700:active,
.active\:border-slate-600:active,
.active\:border-slate-700:active,
.active\:border-zinc-600:active,
.active\:border-zinc-700:active,
.active\:border-neutral-600:active,
.active\:border-neutral-700:active,
.active\:border-stone-600:active,
.active\:border-stone-700:active { border-color: var(--text-secondary) !important; }
.active\:border-gray-800:active,
.active\:border-gray-900:active,
.active\:border-slate-800:active,
.active\:border-slate-900:active,
.active\:border-zinc-800:active,
.active\:border-zinc-900:active,
.active\:border-neutral-800:active,
.active\:border-neutral-900:active,
.active\:border-stone-800:active,
.active\:border-stone-900:active { border-color: var(--text-primary) !important; }
.active\:bg-gray-300:active,
.active\:bg-slate-300:active,
.active\:bg-zinc-300:active,
.active\:bg-neutral-300:active,
.active\:bg-stone-300:active { background-color: var(--border-color-strong) !important; }
.active\:bg-gray-400:active,
.active\:bg-gray-500:active,
.active\:bg-slate-400:active,
.active\:bg-slate-500:active,
.active\:bg-zinc-400:active,
.active\:bg-zinc-500:active,
.active\:bg-neutral-400:active,
.active\:bg-neutral-500:active,
.active\:bg-stone-400:active,
.active\:bg-stone-500:active { background-color: var(--text-muted) !important; }
.active\:divide-gray-100:active > * + *,
.active\:divide-gray-200:active > * + *,
.active\:divide-slate-100:active > * + *,
.active\:divide-slate-200:active > * + *,
.active\:divide-zinc-100:active > * + *,
.active\:divide-zinc-200:active > * + *,
.active\:divide-neutral-100:active > * + *,
.active\:divide-neutral-200:active > * + *,
.active\:divide-stone-100:active > * + *,
.active\:divide-stone-200:active > * + * { border-color: var(--border-color) !important; }
.active\:divide-gray-300:active > * + *,
.active\:divide-slate-300:active > * + *,
.active\:divide-zinc-300:active > * + *,
.active\:divide-neutral-300:active > * + *,
.active\:divide-stone-300:active > * + * { border-color: var(--border-color-strong) !important; }
.active\:ring-blue-300:active,
.active\:ring-blue-400:active,
.active\:ring-blue-500:active,
.active\:ring-blue-600:active,
.active\:ring-indigo-300:active,
.active\:ring-indigo-400:active,
.active\:ring-indigo-500:active,
.active\:ring-indigo-600:active,
.active\:ring-violet-300:active,
.active\:ring-violet-400:active,
.active\:ring-violet-500:active,
.active\:ring-violet-600:active,
.active\:ring-purple-300:active,
.active\:ring-purple-400:active,
.active\:ring-purple-500:active,
.active\:ring-purple-600:active { --tw-ring-color: var(--color-primary) !important; }
.active\:ring-red-300:active,
.active\:ring-red-400:active,
.active\:ring-red-500:active,
.active\:ring-red-600:active,
.active\:ring-rose-300:active,
.active\:ring-rose-400:active,
.active\:ring-rose-500:active,
.active\:ring-rose-600:active,
.active\:ring-pink-300:active,
.active\:ring-pink-400:active,
.active\:ring-pink-500:active,
.active\:ring-pink-600:active { --tw-ring-color: var(--color-danger) !important; }
.active\:ring-green-300:active,
.active\:ring-green-400:active,
.active\:ring-green-500:active,
.active\:ring-green-600:active,
.active\:ring-emerald-300:active,
.active\:ring-emerald-400:active,
.active\:ring-emerald-500:active,
.active\:ring-emerald-600:active,
.active\:ring-teal-300:active,
.active\:ring-teal-400:active,
.active\:ring-teal-500:active,
.active\:ring-teal-600:active,
.active\:ring-lime-300:active,
.active\:ring-lime-400:active,
.active\:ring-lime-500:active,
.active\:ring-lime-600:active { --tw-ring-color: var(--color-success) !important; }
.active\:ring-amber-300:active,
.active\:ring-amber-400:active,
.active\:ring-amber-500:active,
.active\:ring-amber-600:active,
.active\:ring-yellow-300:active,
.active\:ring-yellow-400:active,
.active\:ring-yellow-500:active,
.active\:ring-yellow-600:active,
.active\:ring-orange-300:active,
.active\:ring-orange-400:active,
.active\:ring-orange-500:active,
.active\:ring-orange-600:active { --tw-ring-color: var(--color-warning) !important; }
.active\:ring-sky-300:active,
.active\:ring-sky-400:active,
.active\:ring-sky-500:active,
.active\:ring-sky-600:active,
.active\:ring-cyan-300:active,
.active\:ring-cyan-400:active,
.active\:ring-cyan-500:active,
.active\:ring-cyan-600:active { --tw-ring-color: var(--color-info) !important; }

/* ---- disabled: ---- */
.disabled\:text-gray-50:disabled,
.disabled\:text-gray-100:disabled,
.disabled\:text-slate-50:disabled,
.disabled\:text-slate-100:disabled,
.disabled\:text-zinc-50:disabled,
.disabled\:text-zinc-100:disabled,
.disabled\:text-neutral-50:disabled,
.disabled\:text-neutral-100:disabled,
.disabled\:text-stone-50:disabled,
.disabled\:text-stone-100:disabled { color: var(--surface-inset) !important; }
.disabled\:text-gray-200:disabled,
.disabled\:text-slate-200:disabled,
.disabled\:text-zinc-200:disabled,
.disabled\:text-neutral-200:disabled,
.disabled\:text-stone-200:disabled { color: var(--border-color) !important; }
.disabled\:text-gray-300:disabled,
.disabled\:text-slate-300:disabled,
.disabled\:text-zinc-300:disabled,
.disabled\:text-neutral-300:disabled,
.disabled\:text-stone-300:disabled { color: var(--border-color-strong) !important; }
.disabled\:text-gray-400:disabled,
.disabled\:text-gray-500:disabled,
.disabled\:text-slate-400:disabled,
.disabled\:text-slate-500:disabled,
.disabled\:text-zinc-400:disabled,
.disabled\:text-zinc-500:disabled,
.disabled\:text-neutral-400:disabled,
.disabled\:text-neutral-500:disabled,
.disabled\:text-stone-400:disabled,
.disabled\:text-stone-500:disabled { color: var(--text-muted) !important; }
.disabled\:text-gray-600:disabled,
.disabled\:text-gray-700:disabled,
.disabled\:text-slate-600:disabled,
.disabled\:text-slate-700:disabled,
.disabled\:text-zinc-600:disabled,
.disabled\:text-zinc-700:disabled,
.disabled\:text-neutral-600:disabled,
.disabled\:text-neutral-700:disabled,
.disabled\:text-stone-600:disabled,
.disabled\:text-stone-700:disabled { color: var(--text-secondary) !important; }
.disabled\:text-gray-800:disabled,
.disabled\:text-gray-900:disabled,
.disabled\:text-gray-950:disabled,
.disabled\:text-slate-800:disabled,
.disabled\:text-slate-900:disabled,
.disabled\:text-slate-950:disabled,
.disabled\:text-zinc-800:disabled,
.disabled\:text-zinc-900:disabled,
.disabled\:text-zinc-950:disabled,
.disabled\:text-neutral-800:disabled,
.disabled\:text-neutral-900:disabled,
.disabled\:text-neutral-950:disabled,
.disabled\:text-stone-800:disabled,
.disabled\:text-stone-900:disabled,
.disabled\:text-stone-950:disabled { color: var(--text-primary) !important; }
.disabled\:bg-gray-50:disabled,
.disabled\:bg-gray-100:disabled,
.disabled\:bg-slate-50:disabled,
.disabled\:bg-slate-100:disabled,
.disabled\:bg-zinc-50:disabled,
.disabled\:bg-zinc-100:disabled,
.disabled\:bg-neutral-50:disabled,
.disabled\:bg-neutral-100:disabled,
.disabled\:bg-stone-50:disabled,
.disabled\:bg-stone-100:disabled { background-color: var(--surface-inset) !important; }
.disabled\:bg-gray-200:disabled,
.disabled\:bg-slate-200:disabled,
.disabled\:bg-zinc-200:disabled,
.disabled\:bg-neutral-200:disabled,
.disabled\:bg-stone-200:disabled { background-color: var(--border-color) !important; }
.disabled\:bg-gray-700:disabled,
.disabled\:bg-slate-700:disabled,
.disabled\:bg-zinc-700:disabled,
.disabled\:bg-neutral-700:disabled,
.disabled\:bg-stone-700:disabled,
.disabled\:bg-gray-600:disabled,
.disabled\:bg-slate-600:disabled,
.disabled\:bg-zinc-600:disabled,
.disabled\:bg-neutral-600:disabled,
.disabled\:bg-stone-600:disabled { background-color: var(--text-secondary) !important; }
.disabled\:bg-gray-800:disabled,
.disabled\:bg-gray-900:disabled,
.disabled\:bg-slate-800:disabled,
.disabled\:bg-slate-900:disabled,
.disabled\:bg-zinc-800:disabled,
.disabled\:bg-zinc-900:disabled,
.disabled\:bg-neutral-800:disabled,
.disabled\:bg-neutral-900:disabled,
.disabled\:bg-stone-800:disabled,
.disabled\:bg-stone-900:disabled { background-color: var(--text-primary) !important; }
.disabled\:border-gray-200:disabled,
.disabled\:border-slate-200:disabled,
.disabled\:border-zinc-200:disabled,
.disabled\:border-neutral-200:disabled,
.disabled\:border-stone-200:disabled,
.disabled\:border-gray-100:disabled,
.disabled\:border-slate-100:disabled,
.disabled\:border-zinc-100:disabled,
.disabled\:border-neutral-100:disabled,
.disabled\:border-stone-100:disabled { border-color: var(--border-color) !important; }
.disabled\:border-gray-300:disabled,
.disabled\:border-slate-300:disabled,
.disabled\:border-zinc-300:disabled,
.disabled\:border-neutral-300:disabled,
.disabled\:border-stone-300:disabled,
.disabled\:border-gray-400:disabled,
.disabled\:border-gray-500:disabled,
.disabled\:border-slate-400:disabled,
.disabled\:border-slate-500:disabled,
.disabled\:border-zinc-400:disabled,
.disabled\:border-zinc-500:disabled,
.disabled\:border-neutral-400:disabled,
.disabled\:border-neutral-500:disabled,
.disabled\:border-stone-400:disabled,
.disabled\:border-stone-500:disabled { border-color: var(--border-color-strong) !important; }
.disabled\:border-gray-400:disabled,
.disabled\:border-slate-400:disabled,
.disabled\:border-zinc-400:disabled,
.disabled\:border-neutral-400:disabled,
.disabled\:border-stone-400:disabled { border-color: var(--text-muted) !important; }
.disabled\:bg-blue-50:disabled,
.disabled\:bg-blue-100:disabled,
.disabled\:bg-blue-200:disabled,
.disabled\:bg-blue-300:disabled,
.disabled\:bg-indigo-50:disabled,
.disabled\:bg-indigo-100:disabled,
.disabled\:bg-indigo-200:disabled,
.disabled\:bg-indigo-300:disabled,
.disabled\:bg-violet-50:disabled,
.disabled\:bg-violet-100:disabled,
.disabled\:bg-violet-200:disabled,
.disabled\:bg-violet-300:disabled,
.disabled\:bg-purple-50:disabled,
.disabled\:bg-purple-100:disabled,
.disabled\:bg-purple-200:disabled,
.disabled\:bg-purple-300:disabled { background-color: var(--color-primary-muted) !important; }
.disabled\:text-blue-50:disabled,
.disabled\:text-blue-100:disabled,
.disabled\:text-blue-200:disabled,
.disabled\:text-blue-300:disabled,
.disabled\:text-blue-400:disabled,
.disabled\:text-blue-500:disabled,
.disabled\:text-blue-600:disabled,
.disabled\:text-indigo-50:disabled,
.disabled\:text-indigo-100:disabled,
.disabled\:text-indigo-200:disabled,
.disabled\:text-indigo-300:disabled,
.disabled\:text-indigo-400:disabled,
.disabled\:text-indigo-500:disabled,
.disabled\:text-indigo-600:disabled,
.disabled\:text-violet-50:disabled,
.disabled\:text-violet-100:disabled,
.disabled\:text-violet-200:disabled,
.disabled\:text-violet-300:disabled,
.disabled\:text-violet-400:disabled,
.disabled\:text-violet-500:disabled,
.disabled\:text-violet-600:disabled,
.disabled\:text-purple-50:disabled,
.disabled\:text-purple-100:disabled,
.disabled\:text-purple-200:disabled,
.disabled\:text-purple-300:disabled,
.disabled\:text-purple-400:disabled,
.disabled\:text-purple-500:disabled,
.disabled\:text-purple-600:disabled { color: var(--color-primary) !important; }
.disabled\:border-blue-200:disabled,
.disabled\:border-blue-300:disabled,
.disabled\:border-blue-400:disabled,
.disabled\:border-blue-500:disabled,
.disabled\:border-blue-600:disabled,
.disabled\:border-indigo-200:disabled,
.disabled\:border-indigo-300:disabled,
.disabled\:border-indigo-400:disabled,
.disabled\:border-indigo-500:disabled,
.disabled\:border-indigo-600:disabled,
.disabled\:border-violet-200:disabled,
.disabled\:border-violet-300:disabled,
.disabled\:border-violet-400:disabled,
.disabled\:border-violet-500:disabled,
.disabled\:border-violet-600:disabled,
.disabled\:border-purple-200:disabled,
.disabled\:border-purple-300:disabled,
.disabled\:border-purple-400:disabled,
.disabled\:border-purple-500:disabled,
.disabled\:border-purple-600:disabled { border-color: var(--color-primary) !important; }
.disabled\:bg-blue-400:disabled,
.disabled\:bg-blue-500:disabled,
.disabled\:bg-blue-600:disabled,
.disabled\:bg-indigo-400:disabled,
.disabled\:bg-indigo-500:disabled,
.disabled\:bg-indigo-600:disabled,
.disabled\:bg-violet-400:disabled,
.disabled\:bg-violet-500:disabled,
.disabled\:bg-violet-600:disabled,
.disabled\:bg-purple-400:disabled,
.disabled\:bg-purple-500:disabled,
.disabled\:bg-purple-600:disabled { background-color: var(--color-primary) !important; }
.disabled\:bg-blue-700:disabled,
.disabled\:bg-blue-800:disabled,
.disabled\:bg-blue-900:disabled,
.disabled\:bg-indigo-700:disabled,
.disabled\:bg-indigo-800:disabled,
.disabled\:bg-indigo-900:disabled,
.disabled\:bg-violet-700:disabled,
.disabled\:bg-violet-800:disabled,
.disabled\:bg-violet-900:disabled,
.disabled\:bg-purple-700:disabled,
.disabled\:bg-purple-800:disabled,
.disabled\:bg-purple-900:disabled { background-color: var(--color-primary-hover) !important; }
.disabled\:text-blue-700:disabled,
.disabled\:text-blue-800:disabled,
.disabled\:text-blue-900:disabled,
.disabled\:text-indigo-700:disabled,
.disabled\:text-indigo-800:disabled,
.disabled\:text-indigo-900:disabled,
.disabled\:text-violet-700:disabled,
.disabled\:text-violet-800:disabled,
.disabled\:text-violet-900:disabled,
.disabled\:text-purple-700:disabled,
.disabled\:text-purple-800:disabled,
.disabled\:text-purple-900:disabled { color: var(--color-primary-hover) !important; }
.disabled\:bg-red-50:disabled,
.disabled\:bg-red-100:disabled,
.disabled\:bg-red-200:disabled,
.disabled\:bg-red-300:disabled,
.disabled\:bg-rose-50:disabled,
.disabled\:bg-rose-100:disabled,
.disabled\:bg-rose-200:disabled,
.disabled\:bg-rose-300:disabled,
.disabled\:bg-pink-50:disabled,
.disabled\:bg-pink-100:disabled,
.disabled\:bg-pink-200:disabled,
.disabled\:bg-pink-300:disabled { background-color: var(--color-danger-muted) !important; }
.disabled\:text-red-50:disabled,
.disabled\:text-red-100:disabled,
.disabled\:text-red-200:disabled,
.disabled\:text-red-300:disabled,
.disabled\:text-red-400:disabled,
.disabled\:text-red-500:disabled,
.disabled\:text-red-600:disabled,
.disabled\:text-rose-50:disabled,
.disabled\:text-rose-100:disabled,
.disabled\:text-rose-200:disabled,
.disabled\:text-rose-300:disabled,
.disabled\:text-rose-400:disabled,
.disabled\:text-rose-500:disabled,
.disabled\:text-rose-600:disabled,
.disabled\:text-pink-50:disabled,
.disabled\:text-pink-100:disabled,
.disabled\:text-pink-200:disabled,
.disabled\:text-pink-300:disabled,
.disabled\:text-pink-400:disabled,
.disabled\:text-pink-500:disabled,
.disabled\:text-pink-600:disabled { color: var(--color-danger-on-surface) !important; }
.disabled\:border-red-200:disabled,
.disabled\:border-red-300:disabled,
.disabled\:border-red-400:disabled,
.disabled\:border-red-500:disabled,
.disabled\:border-red-600:disabled,
.disabled\:border-rose-200:disabled,
.disabled\:border-rose-300:disabled,
.disabled\:border-rose-400:disabled,
.disabled\:border-rose-500:disabled,
.disabled\:border-rose-600:disabled,
.disabled\:border-pink-200:disabled,
.disabled\:border-pink-300:disabled,
.disabled\:border-pink-400:disabled,
.disabled\:border-pink-500:disabled,
.disabled\:border-pink-600:disabled { border-color: var(--color-danger) !important; }
.disabled\:bg-red-400:disabled,
.disabled\:bg-red-500:disabled,
.disabled\:bg-red-600:disabled,
.disabled\:bg-rose-400:disabled,
.disabled\:bg-rose-500:disabled,
.disabled\:bg-rose-600:disabled,
.disabled\:bg-pink-400:disabled,
.disabled\:bg-pink-500:disabled,
.disabled\:bg-pink-600:disabled { background-color: var(--color-danger) !important; }
.disabled\:bg-red-700:disabled,
.disabled\:bg-red-800:disabled,
.disabled\:bg-red-900:disabled,
.disabled\:bg-rose-700:disabled,
.disabled\:bg-rose-800:disabled,
.disabled\:bg-rose-900:disabled,
.disabled\:bg-pink-700:disabled,
.disabled\:bg-pink-800:disabled,
.disabled\:bg-pink-900:disabled { background-color: var(--color-danger-hover) !important; }
.disabled\:text-red-700:disabled,
.disabled\:text-red-800:disabled,
.disabled\:text-red-900:disabled,
.disabled\:text-rose-700:disabled,
.disabled\:text-rose-800:disabled,
.disabled\:text-rose-900:disabled,
.disabled\:text-pink-700:disabled,
.disabled\:text-pink-800:disabled,
.disabled\:text-pink-900:disabled { color: var(--color-danger-text) !important; }
.disabled\:bg-green-50:disabled,
.disabled\:bg-green-100:disabled,
.disabled\:bg-green-200:disabled,
.disabled\:bg-green-300:disabled,
.disabled\:bg-emerald-50:disabled,
.disabled\:bg-emerald-100:disabled,
.disabled\:bg-emerald-200:disabled,
.disabled\:bg-emerald-300:disabled,
.disabled\:bg-teal-50:disabled,
.disabled\:bg-teal-100:disabled,
.disabled\:bg-teal-200:disabled,
.disabled\:bg-teal-300:disabled,
.disabled\:bg-lime-50:disabled,
.disabled\:bg-lime-100:disabled,
.disabled\:bg-lime-200:disabled,
.disabled\:bg-lime-300:disabled { background-color: var(--color-success-muted) !important; }
.disabled\:text-green-50:disabled,
.disabled\:text-green-100:disabled,
.disabled\:text-green-200:disabled,
.disabled\:text-green-300:disabled,
.disabled\:text-green-400:disabled,
.disabled\:text-green-500:disabled,
.disabled\:text-green-600:disabled,
.disabled\:text-emerald-50:disabled,
.disabled\:text-emerald-100:disabled,
.disabled\:text-emerald-200:disabled,
.disabled\:text-emerald-300:disabled,
.disabled\:text-emerald-400:disabled,
.disabled\:text-emerald-500:disabled,
.disabled\:text-emerald-600:disabled,
.disabled\:text-teal-50:disabled,
.disabled\:text-teal-100:disabled,
.disabled\:text-teal-200:disabled,
.disabled\:text-teal-300:disabled,
.disabled\:text-teal-400:disabled,
.disabled\:text-teal-500:disabled,
.disabled\:text-teal-600:disabled,
.disabled\:text-lime-50:disabled,
.disabled\:text-lime-100:disabled,
.disabled\:text-lime-200:disabled,
.disabled\:text-lime-300:disabled,
.disabled\:text-lime-400:disabled,
.disabled\:text-lime-500:disabled,
.disabled\:text-lime-600:disabled { color: var(--color-success-on-surface) !important; }
.disabled\:border-green-200:disabled,
.disabled\:border-green-300:disabled,
.disabled\:border-green-400:disabled,
.disabled\:border-green-500:disabled,
.disabled\:border-green-600:disabled,
.disabled\:border-emerald-200:disabled,
.disabled\:border-emerald-300:disabled,
.disabled\:border-emerald-400:disabled,
.disabled\:border-emerald-500:disabled,
.disabled\:border-emerald-600:disabled,
.disabled\:border-teal-200:disabled,
.disabled\:border-teal-300:disabled,
.disabled\:border-teal-400:disabled,
.disabled\:border-teal-500:disabled,
.disabled\:border-teal-600:disabled,
.disabled\:border-lime-200:disabled,
.disabled\:border-lime-300:disabled,
.disabled\:border-lime-400:disabled,
.disabled\:border-lime-500:disabled,
.disabled\:border-lime-600:disabled { border-color: var(--color-success) !important; }
.disabled\:bg-green-400:disabled,
.disabled\:bg-green-500:disabled,
.disabled\:bg-green-600:disabled,
.disabled\:bg-emerald-400:disabled,
.disabled\:bg-emerald-500:disabled,
.disabled\:bg-emerald-600:disabled,
.disabled\:bg-teal-400:disabled,
.disabled\:bg-teal-500:disabled,
.disabled\:bg-teal-600:disabled,
.disabled\:bg-lime-400:disabled,
.disabled\:bg-lime-500:disabled,
.disabled\:bg-lime-600:disabled { background-color: var(--color-success) !important; }
.disabled\:bg-green-700:disabled,
.disabled\:bg-green-800:disabled,
.disabled\:bg-green-900:disabled,
.disabled\:bg-emerald-700:disabled,
.disabled\:bg-emerald-800:disabled,
.disabled\:bg-emerald-900:disabled,
.disabled\:bg-teal-700:disabled,
.disabled\:bg-teal-800:disabled,
.disabled\:bg-teal-900:disabled,
.disabled\:bg-lime-700:disabled,
.disabled\:bg-lime-800:disabled,
.disabled\:bg-lime-900:disabled { background-color: var(--color-success-hover) !important; }
.disabled\:text-green-700:disabled,
.disabled\:text-green-800:disabled,
.disabled\:text-green-900:disabled,
.disabled\:text-emerald-700:disabled,
.disabled\:text-emerald-800:disabled,
.disabled\:text-emerald-900:disabled,
.disabled\:text-teal-700:disabled,
.disabled\:text-teal-800:disabled,
.disabled\:text-teal-900:disabled,
.disabled\:text-lime-700:disabled,
.disabled\:text-lime-800:disabled,
.disabled\:text-lime-900:disabled { color: var(--color-success-text) !important; }
.disabled\:bg-amber-50:disabled,
.disabled\:bg-amber-100:disabled,
.disabled\:bg-amber-200:disabled,
.disabled\:bg-amber-300:disabled,
.disabled\:bg-yellow-50:disabled,
.disabled\:bg-yellow-100:disabled,
.disabled\:bg-yellow-200:disabled,
.disabled\:bg-yellow-300:disabled,
.disabled\:bg-orange-50:disabled,
.disabled\:bg-orange-100:disabled,
.disabled\:bg-orange-200:disabled,
.disabled\:bg-orange-300:disabled { background-color: var(--color-warning-muted) !important; }
.disabled\:text-amber-50:disabled,
.disabled\:text-amber-100:disabled,
.disabled\:text-amber-200:disabled,
.disabled\:text-amber-300:disabled,
.disabled\:text-amber-400:disabled,
.disabled\:text-amber-500:disabled,
.disabled\:text-amber-600:disabled,
.disabled\:text-yellow-50:disabled,
.disabled\:text-yellow-100:disabled,
.disabled\:text-yellow-200:disabled,
.disabled\:text-yellow-300:disabled,
.disabled\:text-yellow-400:disabled,
.disabled\:text-yellow-500:disabled,
.disabled\:text-yellow-600:disabled,
.disabled\:text-orange-50:disabled,
.disabled\:text-orange-100:disabled,
.disabled\:text-orange-200:disabled,
.disabled\:text-orange-300:disabled,
.disabled\:text-orange-400:disabled,
.disabled\:text-orange-500:disabled,
.disabled\:text-orange-600:disabled { color: var(--color-warning-on-surface) !important; }
.disabled\:border-amber-200:disabled,
.disabled\:border-amber-300:disabled,
.disabled\:border-amber-400:disabled,
.disabled\:border-amber-500:disabled,
.disabled\:border-amber-600:disabled,
.disabled\:border-yellow-200:disabled,
.disabled\:border-yellow-300:disabled,
.disabled\:border-yellow-400:disabled,
.disabled\:border-yellow-500:disabled,
.disabled\:border-yellow-600:disabled,
.disabled\:border-orange-200:disabled,
.disabled\:border-orange-300:disabled,
.disabled\:border-orange-400:disabled,
.disabled\:border-orange-500:disabled,
.disabled\:border-orange-600:disabled { border-color: var(--color-warning) !important; }
.disabled\:bg-amber-400:disabled,
.disabled\:bg-amber-500:disabled,
.disabled\:bg-amber-600:disabled,
.disabled\:bg-yellow-400:disabled,
.disabled\:bg-yellow-500:disabled,
.disabled\:bg-yellow-600:disabled,
.disabled\:bg-orange-400:disabled,
.disabled\:bg-orange-500:disabled,
.disabled\:bg-orange-600:disabled { background-color: var(--color-warning) !important; }
.disabled\:bg-amber-700:disabled,
.disabled\:bg-amber-800:disabled,
.disabled\:bg-amber-900:disabled,
.disabled\:bg-yellow-700:disabled,
.disabled\:bg-yellow-800:disabled,
.disabled\:bg-yellow-900:disabled,
.disabled\:bg-orange-700:disabled,
.disabled\:bg-orange-800:disabled,
.disabled\:bg-orange-900:disabled { background-color: var(--color-warning-hover) !important; }
.disabled\:text-amber-700:disabled,
.disabled\:text-amber-800:disabled,
.disabled\:text-amber-900:disabled,
.disabled\:text-yellow-700:disabled,
.disabled\:text-yellow-800:disabled,
.disabled\:text-yellow-900:disabled,
.disabled\:text-orange-700:disabled,
.disabled\:text-orange-800:disabled,
.disabled\:text-orange-900:disabled { color: var(--color-warning-text) !important; }
.disabled\:bg-cyan-50:disabled,
.disabled\:bg-cyan-100:disabled,
.disabled\:bg-cyan-200:disabled,
.disabled\:bg-cyan-300:disabled,
.disabled\:bg-sky-50:disabled,
.disabled\:bg-sky-100:disabled,
.disabled\:bg-sky-200:disabled,
.disabled\:bg-sky-300:disabled { background-color: var(--color-info-muted) !important; }
.disabled\:text-cyan-50:disabled,
.disabled\:text-cyan-100:disabled,
.disabled\:text-cyan-200:disabled,
.disabled\:text-cyan-300:disabled,
.disabled\:text-cyan-400:disabled,
.disabled\:text-cyan-500:disabled,
.disabled\:text-cyan-600:disabled,
.disabled\:text-sky-50:disabled,
.disabled\:text-sky-100:disabled,
.disabled\:text-sky-200:disabled,
.disabled\:text-sky-300:disabled,
.disabled\:text-sky-400:disabled,
.disabled\:text-sky-500:disabled,
.disabled\:text-sky-600:disabled { color: var(--color-info-on-surface) !important; }
.disabled\:border-cyan-200:disabled,
.disabled\:border-cyan-300:disabled,
.disabled\:border-cyan-400:disabled,
.disabled\:border-cyan-500:disabled,
.disabled\:border-cyan-600:disabled,
.disabled\:border-sky-200:disabled,
.disabled\:border-sky-300:disabled,
.disabled\:border-sky-400:disabled,
.disabled\:border-sky-500:disabled,
.disabled\:border-sky-600:disabled { border-color: var(--color-info) !important; }
.disabled\:bg-cyan-400:disabled,
.disabled\:bg-cyan-500:disabled,
.disabled\:bg-cyan-600:disabled,
.disabled\:bg-sky-400:disabled,
.disabled\:bg-sky-500:disabled,
.disabled\:bg-sky-600:disabled { background-color: var(--color-info) !important; }
.disabled\:bg-cyan-700:disabled,
.disabled\:bg-cyan-800:disabled,
.disabled\:bg-cyan-900:disabled,
.disabled\:bg-sky-700:disabled,
.disabled\:bg-sky-800:disabled,
.disabled\:bg-sky-900:disabled { background-color: var(--color-info-hover) !important; }
.disabled\:text-cyan-700:disabled,
.disabled\:text-cyan-800:disabled,
.disabled\:text-cyan-900:disabled,
.disabled\:text-sky-700:disabled,
.disabled\:text-sky-800:disabled,
.disabled\:text-sky-900:disabled { color: var(--color-info-text) !important; }
.disabled\:border-gray-600:disabled,
.disabled\:border-gray-700:disabled,
.disabled\:border-slate-600:disabled,
.disabled\:border-slate-700:disabled,
.disabled\:border-zinc-600:disabled,
.disabled\:border-zinc-700:disabled,
.disabled\:border-neutral-600:disabled,
.disabled\:border-neutral-700:disabled,
.disabled\:border-stone-600:disabled,
.disabled\:border-stone-700:disabled { border-color: var(--text-secondary) !important; }
.disabled\:border-gray-800:disabled,
.disabled\:border-gray-900:disabled,
.disabled\:border-slate-800:disabled,
.disabled\:border-slate-900:disabled,
.disabled\:border-zinc-800:disabled,
.disabled\:border-zinc-900:disabled,
.disabled\:border-neutral-800:disabled,
.disabled\:border-neutral-900:disabled,
.disabled\:border-stone-800:disabled,
.disabled\:border-stone-900:disabled { border-color: var(--text-primary) !important; }
.disabled\:bg-gray-300:disabled,
.disabled\:bg-slate-300:disabled,
.disabled\:bg-zinc-300:disabled,
.disabled\:bg-neutral-300:disabled,
.disabled\:bg-stone-300:disabled { background-color: var(--border-color-strong) !important; }
.disabled\:bg-gray-400:disabled,
.disabled\:bg-gray-500:disabled,
.disabled\:bg-slate-400:disabled,
.disabled\:bg-slate-500:disabled,
.disabled\:bg-zinc-400:disabled,
.disabled\:bg-zinc-500:disabled,
.disabled\:bg-neutral-400:disabled,
.disabled\:bg-neutral-500:disabled,
.disabled\:bg-stone-400:disabled,
.disabled\:bg-stone-500:disabled { background-color: var(--text-muted) !important; }
.disabled\:divide-gray-100:disabled > * + *,
.disabled\:divide-gray-200:disabled > * + *,
.disabled\:divide-slate-100:disabled > * + *,
.disabled\:divide-slate-200:disabled > * + *,
.disabled\:divide-zinc-100:disabled > * + *,
.disabled\:divide-zinc-200:disabled > * + *,
.disabled\:divide-neutral-100:disabled > * + *,
.disabled\:divide-neutral-200:disabled > * + *,
.disabled\:divide-stone-100:disabled > * + *,
.disabled\:divide-stone-200:disabled > * + * { border-color: var(--border-color) !important; }
.disabled\:divide-gray-300:disabled > * + *,
.disabled\:divide-slate-300:disabled > * + *,
.disabled\:divide-zinc-300:disabled > * + *,
.disabled\:divide-neutral-300:disabled > * + *,
.disabled\:divide-stone-300:disabled > * + * { border-color: var(--border-color-strong) !important; }
.disabled\:ring-blue-300:disabled,
.disabled\:ring-blue-400:disabled,
.disabled\:ring-blue-500:disabled,
.disabled\:ring-blue-600:disabled,
.disabled\:ring-indigo-300:disabled,
.disabled\:ring-indigo-400:disabled,
.disabled\:ring-indigo-500:disabled,
.disabled\:ring-indigo-600:disabled,
.disabled\:ring-violet-300:disabled,
.disabled\:ring-violet-400:disabled,
.disabled\:ring-violet-500:disabled,
.disabled\:ring-violet-600:disabled,
.disabled\:ring-purple-300:disabled,
.disabled\:ring-purple-400:disabled,
.disabled\:ring-purple-500:disabled,
.disabled\:ring-purple-600:disabled { --tw-ring-color: var(--color-primary) !important; }
.disabled\:ring-red-300:disabled,
.disabled\:ring-red-400:disabled,
.disabled\:ring-red-500:disabled,
.disabled\:ring-red-600:disabled,
.disabled\:ring-rose-300:disabled,
.disabled\:ring-rose-400:disabled,
.disabled\:ring-rose-500:disabled,
.disabled\:ring-rose-600:disabled,
.disabled\:ring-pink-300:disabled,
.disabled\:ring-pink-400:disabled,
.disabled\:ring-pink-500:disabled,
.disabled\:ring-pink-600:disabled { --tw-ring-color: var(--color-danger) !important; }
.disabled\:ring-green-300:disabled,
.disabled\:ring-green-400:disabled,
.disabled\:ring-green-500:disabled,
.disabled\:ring-green-600:disabled,
.disabled\:ring-emerald-300:disabled,
.disabled\:ring-emerald-400:disabled,
.disabled\:ring-emerald-500:disabled,
.disabled\:ring-emerald-600:disabled,
.disabled\:ring-teal-300:disabled,
.disabled\:ring-teal-400:disabled,
.disabled\:ring-teal-500:disabled,
.disabled\:ring-teal-600:disabled,
.disabled\:ring-lime-300:disabled,
.disabled\:ring-lime-400:disabled,
.disabled\:ring-lime-500:disabled,
.disabled\:ring-lime-600:disabled { --tw-ring-color: var(--color-success) !important; }
.disabled\:ring-amber-300:disabled,
.disabled\:ring-amber-400:disabled,
.disabled\:ring-amber-500:disabled,
.disabled\:ring-amber-600:disabled,
.disabled\:ring-yellow-300:disabled,
.disabled\:ring-yellow-400:disabled,
.disabled\:ring-yellow-500:disabled,
.disabled\:ring-yellow-600:disabled,
.disabled\:ring-orange-300:disabled,
.disabled\:ring-orange-400:disabled,
.disabled\:ring-orange-500:disabled,
.disabled\:ring-orange-600:disabled { --tw-ring-color: var(--color-warning) !important; }
.disabled\:ring-sky-300:disabled,
.disabled\:ring-sky-400:disabled,
.disabled\:ring-sky-500:disabled,
.disabled\:ring-sky-600:disabled,
.disabled\:ring-cyan-300:disabled,
.disabled\:ring-cyan-400:disabled,
.disabled\:ring-cyan-500:disabled,
.disabled\:ring-cyan-600:disabled { --tw-ring-color: var(--color-info) !important; }

/* ---- group-hover: ---- */
.group:hover .group-hover\:text-gray-50,
.group:hover .group-hover\:text-gray-100,
.group:hover .group-hover\:text-slate-50,
.group:hover .group-hover\:text-slate-100,
.group:hover .group-hover\:text-zinc-50,
.group:hover .group-hover\:text-zinc-100,
.group:hover .group-hover\:text-neutral-50,
.group:hover .group-hover\:text-neutral-100,
.group:hover .group-hover\:text-stone-50,
.group:hover .group-hover\:text-stone-100 { color: var(--surface-inset) !important; }
.group:hover .group-hover\:text-gray-200,
.group:hover .group-hover\:text-slate-200,
.group:hover .group-hover\:text-zinc-200,
.group:hover .group-hover\:text-neutral-200,
.group:hover .group-hover\:text-stone-200 { color: var(--border-color) !important; }
.group:hover .group-hover\:text-gray-300,
.group:hover .group-hover\:text-slate-300,
.group:hover .group-hover\:text-zinc-300,
.group:hover .group-hover\:text-neutral-300,
.group:hover .group-hover\:text-stone-300 { color: var(--border-color-strong) !important; }
.group:hover .group-hover\:text-gray-400,
.group:hover .group-hover\:text-gray-500,
.group:hover .group-hover\:text-slate-400,
.group:hover .group-hover\:text-slate-500,
.group:hover .group-hover\:text-zinc-400,
.group:hover .group-hover\:text-zinc-500,
.group:hover .group-hover\:text-neutral-400,
.group:hover .group-hover\:text-neutral-500,
.group:hover .group-hover\:text-stone-400,
.group:hover .group-hover\:text-stone-500 { color: var(--text-muted) !important; }
.group:hover .group-hover\:text-gray-600,
.group:hover .group-hover\:text-gray-700,
.group:hover .group-hover\:text-slate-600,
.group:hover .group-hover\:text-slate-700,
.group:hover .group-hover\:text-zinc-600,
.group:hover .group-hover\:text-zinc-700,
.group:hover .group-hover\:text-neutral-600,
.group:hover .group-hover\:text-neutral-700,
.group:hover .group-hover\:text-stone-600,
.group:hover .group-hover\:text-stone-700 { color: var(--text-secondary) !important; }
.group:hover .group-hover\:text-gray-800,
.group:hover .group-hover\:text-gray-900,
.group:hover .group-hover\:text-gray-950,
.group:hover .group-hover\:text-slate-800,
.group:hover .group-hover\:text-slate-900,
.group:hover .group-hover\:text-slate-950,
.group:hover .group-hover\:text-zinc-800,
.group:hover .group-hover\:text-zinc-900,
.group:hover .group-hover\:text-zinc-950,
.group:hover .group-hover\:text-neutral-800,
.group:hover .group-hover\:text-neutral-900,
.group:hover .group-hover\:text-neutral-950,
.group:hover .group-hover\:text-stone-800,
.group:hover .group-hover\:text-stone-900,
.group:hover .group-hover\:text-stone-950 { color: var(--text-primary) !important; }
.group:hover .group-hover\:bg-gray-50,
.group:hover .group-hover\:bg-gray-100,
.group:hover .group-hover\:bg-slate-50,
.group:hover .group-hover\:bg-slate-100,
.group:hover .group-hover\:bg-zinc-50,
.group:hover .group-hover\:bg-zinc-100,
.group:hover .group-hover\:bg-neutral-50,
.group:hover .group-hover\:bg-neutral-100,
.group:hover .group-hover\:bg-stone-50,
.group:hover .group-hover\:bg-stone-100 { background-color: var(--surface-inset) !important; }
.group:hover .group-hover\:bg-gray-200,
.group:hover .group-hover\:bg-slate-200,
.group:hover .group-hover\:bg-zinc-200,
.group:hover .group-hover\:bg-neutral-200,
.group:hover .group-hover\:bg-stone-200 { background-color: var(--border-color) !important; }
.group:hover .group-hover\:bg-gray-700,
.group:hover .group-hover\:bg-slate-700,
.group:hover .group-hover\:bg-zinc-700,
.group:hover .group-hover\:bg-neutral-700,
.group:hover .group-hover\:bg-stone-700,
.group:hover .group-hover\:bg-gray-600,
.group:hover .group-hover\:bg-slate-600,
.group:hover .group-hover\:bg-zinc-600,
.group:hover .group-hover\:bg-neutral-600,
.group:hover .group-hover\:bg-stone-600 { background-color: var(--text-secondary) !important; }
.group:hover .group-hover\:bg-gray-800,
.group:hover .group-hover\:bg-gray-900,
.group:hover .group-hover\:bg-slate-800,
.group:hover .group-hover\:bg-slate-900,
.group:hover .group-hover\:bg-zinc-800,
.group:hover .group-hover\:bg-zinc-900,
.group:hover .group-hover\:bg-neutral-800,
.group:hover .group-hover\:bg-neutral-900,
.group:hover .group-hover\:bg-stone-800,
.group:hover .group-hover\:bg-stone-900 { background-color: var(--text-primary) !important; }
.group:hover .group-hover\:border-gray-200,
.group:hover .group-hover\:border-slate-200,
.group:hover .group-hover\:border-zinc-200,
.group:hover .group-hover\:border-neutral-200,
.group:hover .group-hover\:border-stone-200,
.group:hover .group-hover\:border-gray-100,
.group:hover .group-hover\:border-slate-100,
.group:hover .group-hover\:border-zinc-100,
.group:hover .group-hover\:border-neutral-100,
.group:hover .group-hover\:border-stone-100 { border-color: var(--border-color) !important; }
.group:hover .group-hover\:border-gray-300,
.group:hover .group-hover\:border-slate-300,
.group:hover .group-hover\:border-zinc-300,
.group:hover .group-hover\:border-neutral-300,
.group:hover .group-hover\:border-stone-300,
.group:hover .group-hover\:border-gray-400,
.group:hover .group-hover\:border-gray-500,
.group:hover .group-hover\:border-slate-400,
.group:hover .group-hover\:border-slate-500,
.group:hover .group-hover\:border-zinc-400,
.group:hover .group-hover\:border-zinc-500,
.group:hover .group-hover\:border-neutral-400,
.group:hover .group-hover\:border-neutral-500,
.group:hover .group-hover\:border-stone-400,
.group:hover .group-hover\:border-stone-500 { border-color: var(--border-color-strong) !important; }
.group:hover .group-hover\:border-gray-400,
.group:hover .group-hover\:border-slate-400,
.group:hover .group-hover\:border-zinc-400,
.group:hover .group-hover\:border-neutral-400,
.group:hover .group-hover\:border-stone-400 { border-color: var(--text-muted) !important; }
.group:hover .group-hover\:bg-blue-50,
.group:hover .group-hover\:bg-blue-100,
.group:hover .group-hover\:bg-blue-200,
.group:hover .group-hover\:bg-blue-300,
.group:hover .group-hover\:bg-indigo-50,
.group:hover .group-hover\:bg-indigo-100,
.group:hover .group-hover\:bg-indigo-200,
.group:hover .group-hover\:bg-indigo-300,
.group:hover .group-hover\:bg-violet-50,
.group:hover .group-hover\:bg-violet-100,
.group:hover .group-hover\:bg-violet-200,
.group:hover .group-hover\:bg-violet-300,
.group:hover .group-hover\:bg-purple-50,
.group:hover .group-hover\:bg-purple-100,
.group:hover .group-hover\:bg-purple-200,
.group:hover .group-hover\:bg-purple-300 { background-color: var(--color-primary-muted) !important; }
.group:hover .group-hover\:text-blue-50,
.group:hover .group-hover\:text-blue-100,
.group:hover .group-hover\:text-blue-200,
.group:hover .group-hover\:text-blue-300,
.group:hover .group-hover\:text-blue-400,
.group:hover .group-hover\:text-blue-500,
.group:hover .group-hover\:text-blue-600,
.group:hover .group-hover\:text-indigo-50,
.group:hover .group-hover\:text-indigo-100,
.group:hover .group-hover\:text-indigo-200,
.group:hover .group-hover\:text-indigo-300,
.group:hover .group-hover\:text-indigo-400,
.group:hover .group-hover\:text-indigo-500,
.group:hover .group-hover\:text-indigo-600,
.group:hover .group-hover\:text-violet-50,
.group:hover .group-hover\:text-violet-100,
.group:hover .group-hover\:text-violet-200,
.group:hover .group-hover\:text-violet-300,
.group:hover .group-hover\:text-violet-400,
.group:hover .group-hover\:text-violet-500,
.group:hover .group-hover\:text-violet-600,
.group:hover .group-hover\:text-purple-50,
.group:hover .group-hover\:text-purple-100,
.group:hover .group-hover\:text-purple-200,
.group:hover .group-hover\:text-purple-300,
.group:hover .group-hover\:text-purple-400,
.group:hover .group-hover\:text-purple-500,
.group:hover .group-hover\:text-purple-600 { color: var(--color-primary) !important; }
.group:hover .group-hover\:border-blue-200,
.group:hover .group-hover\:border-blue-300,
.group:hover .group-hover\:border-blue-400,
.group:hover .group-hover\:border-blue-500,
.group:hover .group-hover\:border-blue-600,
.group:hover .group-hover\:border-indigo-200,
.group:hover .group-hover\:border-indigo-300,
.group:hover .group-hover\:border-indigo-400,
.group:hover .group-hover\:border-indigo-500,
.group:hover .group-hover\:border-indigo-600,
.group:hover .group-hover\:border-violet-200,
.group:hover .group-hover\:border-violet-300,
.group:hover .group-hover\:border-violet-400,
.group:hover .group-hover\:border-violet-500,
.group:hover .group-hover\:border-violet-600,
.group:hover .group-hover\:border-purple-200,
.group:hover .group-hover\:border-purple-300,
.group:hover .group-hover\:border-purple-400,
.group:hover .group-hover\:border-purple-500,
.group:hover .group-hover\:border-purple-600 { border-color: var(--color-primary) !important; }
.group:hover .group-hover\:bg-blue-400,
.group:hover .group-hover\:bg-blue-500,
.group:hover .group-hover\:bg-blue-600,
.group:hover .group-hover\:bg-indigo-400,
.group:hover .group-hover\:bg-indigo-500,
.group:hover .group-hover\:bg-indigo-600,
.group:hover .group-hover\:bg-violet-400,
.group:hover .group-hover\:bg-violet-500,
.group:hover .group-hover\:bg-violet-600,
.group:hover .group-hover\:bg-purple-400,
.group:hover .group-hover\:bg-purple-500,
.group:hover .group-hover\:bg-purple-600 { background-color: var(--color-primary) !important; }
.group:hover .group-hover\:bg-blue-700,
.group:hover .group-hover\:bg-blue-800,
.group:hover .group-hover\:bg-blue-900,
.group:hover .group-hover\:bg-indigo-700,
.group:hover .group-hover\:bg-indigo-800,
.group:hover .group-hover\:bg-indigo-900,
.group:hover .group-hover\:bg-violet-700,
.group:hover .group-hover\:bg-violet-800,
.group:hover .group-hover\:bg-violet-900,
.group:hover .group-hover\:bg-purple-700,
.group:hover .group-hover\:bg-purple-800,
.group:hover .group-hover\:bg-purple-900 { background-color: var(--color-primary-hover) !important; }
.group:hover .group-hover\:text-blue-700,
.group:hover .group-hover\:text-blue-800,
.group:hover .group-hover\:text-blue-900,
.group:hover .group-hover\:text-indigo-700,
.group:hover .group-hover\:text-indigo-800,
.group:hover .group-hover\:text-indigo-900,
.group:hover .group-hover\:text-violet-700,
.group:hover .group-hover\:text-violet-800,
.group:hover .group-hover\:text-violet-900,
.group:hover .group-hover\:text-purple-700,
.group:hover .group-hover\:text-purple-800,
.group:hover .group-hover\:text-purple-900 { color: var(--color-primary-hover) !important; }
.group:hover .group-hover\:bg-red-50,
.group:hover .group-hover\:bg-red-100,
.group:hover .group-hover\:bg-red-200,
.group:hover .group-hover\:bg-red-300,
.group:hover .group-hover\:bg-rose-50,
.group:hover .group-hover\:bg-rose-100,
.group:hover .group-hover\:bg-rose-200,
.group:hover .group-hover\:bg-rose-300,
.group:hover .group-hover\:bg-pink-50,
.group:hover .group-hover\:bg-pink-100,
.group:hover .group-hover\:bg-pink-200,
.group:hover .group-hover\:bg-pink-300 { background-color: var(--color-danger-muted) !important; }
.group:hover .group-hover\:text-red-50,
.group:hover .group-hover\:text-red-100,
.group:hover .group-hover\:text-red-200,
.group:hover .group-hover\:text-red-300,
.group:hover .group-hover\:text-red-400,
.group:hover .group-hover\:text-red-500,
.group:hover .group-hover\:text-red-600,
.group:hover .group-hover\:text-rose-50,
.group:hover .group-hover\:text-rose-100,
.group:hover .group-hover\:text-rose-200,
.group:hover .group-hover\:text-rose-300,
.group:hover .group-hover\:text-rose-400,
.group:hover .group-hover\:text-rose-500,
.group:hover .group-hover\:text-rose-600,
.group:hover .group-hover\:text-pink-50,
.group:hover .group-hover\:text-pink-100,
.group:hover .group-hover\:text-pink-200,
.group:hover .group-hover\:text-pink-300,
.group:hover .group-hover\:text-pink-400,
.group:hover .group-hover\:text-pink-500,
.group:hover .group-hover\:text-pink-600 { color: var(--color-danger-on-surface) !important; }
.group:hover .group-hover\:border-red-200,
.group:hover .group-hover\:border-red-300,
.group:hover .group-hover\:border-red-400,
.group:hover .group-hover\:border-red-500,
.group:hover .group-hover\:border-red-600,
.group:hover .group-hover\:border-rose-200,
.group:hover .group-hover\:border-rose-300,
.group:hover .group-hover\:border-rose-400,
.group:hover .group-hover\:border-rose-500,
.group:hover .group-hover\:border-rose-600,
.group:hover .group-hover\:border-pink-200,
.group:hover .group-hover\:border-pink-300,
.group:hover .group-hover\:border-pink-400,
.group:hover .group-hover\:border-pink-500,
.group:hover .group-hover\:border-pink-600 { border-color: var(--color-danger) !important; }
.group:hover .group-hover\:bg-red-400,
.group:hover .group-hover\:bg-red-500,
.group:hover .group-hover\:bg-red-600,
.group:hover .group-hover\:bg-rose-400,
.group:hover .group-hover\:bg-rose-500,
.group:hover .group-hover\:bg-rose-600,
.group:hover .group-hover\:bg-pink-400,
.group:hover .group-hover\:bg-pink-500,
.group:hover .group-hover\:bg-pink-600 { background-color: var(--color-danger) !important; }
.group:hover .group-hover\:bg-red-700,
.group:hover .group-hover\:bg-red-800,
.group:hover .group-hover\:bg-red-900,
.group:hover .group-hover\:bg-rose-700,
.group:hover .group-hover\:bg-rose-800,
.group:hover .group-hover\:bg-rose-900,
.group:hover .group-hover\:bg-pink-700,
.group:hover .group-hover\:bg-pink-800,
.group:hover .group-hover\:bg-pink-900 { background-color: var(--color-danger-hover) !important; }
.group:hover .group-hover\:text-red-700,
.group:hover .group-hover\:text-red-800,
.group:hover .group-hover\:text-red-900,
.group:hover .group-hover\:text-rose-700,
.group:hover .group-hover\:text-rose-800,
.group:hover .group-hover\:text-rose-900,
.group:hover .group-hover\:text-pink-700,
.group:hover .group-hover\:text-pink-800,
.group:hover .group-hover\:text-pink-900 { color: var(--color-danger-text) !important; }
.group:hover .group-hover\:bg-green-50,
.group:hover .group-hover\:bg-green-100,
.group:hover .group-hover\:bg-green-200,
.group:hover .group-hover\:bg-green-300,
.group:hover .group-hover\:bg-emerald-50,
.group:hover .group-hover\:bg-emerald-100,
.group:hover .group-hover\:bg-emerald-200,
.group:hover .group-hover\:bg-emerald-300,
.group:hover .group-hover\:bg-teal-50,
.group:hover .group-hover\:bg-teal-100,
.group:hover .group-hover\:bg-teal-200,
.group:hover .group-hover\:bg-teal-300,
.group:hover .group-hover\:bg-lime-50,
.group:hover .group-hover\:bg-lime-100,
.group:hover .group-hover\:bg-lime-200,
.group:hover .group-hover\:bg-lime-300 { background-color: var(--color-success-muted) !important; }
.group:hover .group-hover\:text-green-50,
.group:hover .group-hover\:text-green-100,
.group:hover .group-hover\:text-green-200,
.group:hover .group-hover\:text-green-300,
.group:hover .group-hover\:text-green-400,
.group:hover .group-hover\:text-green-500,
.group:hover .group-hover\:text-green-600,
.group:hover .group-hover\:text-emerald-50,
.group:hover .group-hover\:text-emerald-100,
.group:hover .group-hover\:text-emerald-200,
.group:hover .group-hover\:text-emerald-300,
.group:hover .group-hover\:text-emerald-400,
.group:hover .group-hover\:text-emerald-500,
.group:hover .group-hover\:text-emerald-600,
.group:hover .group-hover\:text-teal-50,
.group:hover .group-hover\:text-teal-100,
.group:hover .group-hover\:text-teal-200,
.group:hover .group-hover\:text-teal-300,
.group:hover .group-hover\:text-teal-400,
.group:hover .group-hover\:text-teal-500,
.group:hover .group-hover\:text-teal-600,
.group:hover .group-hover\:text-lime-50,
.group:hover .group-hover\:text-lime-100,
.group:hover .group-hover\:text-lime-200,
.group:hover .group-hover\:text-lime-300,
.group:hover .group-hover\:text-lime-400,
.group:hover .group-hover\:text-lime-500,
.group:hover .group-hover\:text-lime-600 { color: var(--color-success-on-surface) !important; }
.group:hover .group-hover\:border-green-200,
.group:hover .group-hover\:border-green-300,
.group:hover .group-hover\:border-green-400,
.group:hover .group-hover\:border-green-500,
.group:hover .group-hover\:border-green-600,
.group:hover .group-hover\:border-emerald-200,
.group:hover .group-hover\:border-emerald-300,
.group:hover .group-hover\:border-emerald-400,
.group:hover .group-hover\:border-emerald-500,
.group:hover .group-hover\:border-emerald-600,
.group:hover .group-hover\:border-teal-200,
.group:hover .group-hover\:border-teal-300,
.group:hover .group-hover\:border-teal-400,
.group:hover .group-hover\:border-teal-500,
.group:hover .group-hover\:border-teal-600,
.group:hover .group-hover\:border-lime-200,
.group:hover .group-hover\:border-lime-300,
.group:hover .group-hover\:border-lime-400,
.group:hover .group-hover\:border-lime-500,
.group:hover .group-hover\:border-lime-600 { border-color: var(--color-success) !important; }
.group:hover .group-hover\:bg-green-400,
.group:hover .group-hover\:bg-green-500,
.group:hover .group-hover\:bg-green-600,
.group:hover .group-hover\:bg-emerald-400,
.group:hover .group-hover\:bg-emerald-500,
.group:hover .group-hover\:bg-emerald-600,
.group:hover .group-hover\:bg-teal-400,
.group:hover .group-hover\:bg-teal-500,
.group:hover .group-hover\:bg-teal-600,
.group:hover .group-hover\:bg-lime-400,
.group:hover .group-hover\:bg-lime-500,
.group:hover .group-hover\:bg-lime-600 { background-color: var(--color-success) !important; }
.group:hover .group-hover\:bg-green-700,
.group:hover .group-hover\:bg-green-800,
.group:hover .group-hover\:bg-green-900,
.group:hover .group-hover\:bg-emerald-700,
.group:hover .group-hover\:bg-emerald-800,
.group:hover .group-hover\:bg-emerald-900,
.group:hover .group-hover\:bg-teal-700,
.group:hover .group-hover\:bg-teal-800,
.group:hover .group-hover\:bg-teal-900,
.group:hover .group-hover\:bg-lime-700,
.group:hover .group-hover\:bg-lime-800,
.group:hover .group-hover\:bg-lime-900 { background-color: var(--color-success-hover) !important; }
.group:hover .group-hover\:text-green-700,
.group:hover .group-hover\:text-green-800,
.group:hover .group-hover\:text-green-900,
.group:hover .group-hover\:text-emerald-700,
.group:hover .group-hover\:text-emerald-800,
.group:hover .group-hover\:text-emerald-900,
.group:hover .group-hover\:text-teal-700,
.group:hover .group-hover\:text-teal-800,
.group:hover .group-hover\:text-teal-900,
.group:hover .group-hover\:text-lime-700,
.group:hover .group-hover\:text-lime-800,
.group:hover .group-hover\:text-lime-900 { color: var(--color-success-text) !important; }
.group:hover .group-hover\:bg-amber-50,
.group:hover .group-hover\:bg-amber-100,
.group:hover .group-hover\:bg-amber-200,
.group:hover .group-hover\:bg-amber-300,
.group:hover .group-hover\:bg-yellow-50,
.group:hover .group-hover\:bg-yellow-100,
.group:hover .group-hover\:bg-yellow-200,
.group:hover .group-hover\:bg-yellow-300,
.group:hover .group-hover\:bg-orange-50,
.group:hover .group-hover\:bg-orange-100,
.group:hover .group-hover\:bg-orange-200,
.group:hover .group-hover\:bg-orange-300 { background-color: var(--color-warning-muted) !important; }
.group:hover .group-hover\:text-amber-50,
.group:hover .group-hover\:text-amber-100,
.group:hover .group-hover\:text-amber-200,
.group:hover .group-hover\:text-amber-300,
.group:hover .group-hover\:text-amber-400,
.group:hover .group-hover\:text-amber-500,
.group:hover .group-hover\:text-amber-600,
.group:hover .group-hover\:text-yellow-50,
.group:hover .group-hover\:text-yellow-100,
.group:hover .group-hover\:text-yellow-200,
.group:hover .group-hover\:text-yellow-300,
.group:hover .group-hover\:text-yellow-400,
.group:hover .group-hover\:text-yellow-500,
.group:hover .group-hover\:text-yellow-600,
.group:hover .group-hover\:text-orange-50,
.group:hover .group-hover\:text-orange-100,
.group:hover .group-hover\:text-orange-200,
.group:hover .group-hover\:text-orange-300,
.group:hover .group-hover\:text-orange-400,
.group:hover .group-hover\:text-orange-500,
.group:hover .group-hover\:text-orange-600 { color: var(--color-warning-on-surface) !important; }
.group:hover .group-hover\:border-amber-200,
.group:hover .group-hover\:border-amber-300,
.group:hover .group-hover\:border-amber-400,
.group:hover .group-hover\:border-amber-500,
.group:hover .group-hover\:border-amber-600,
.group:hover .group-hover\:border-yellow-200,
.group:hover .group-hover\:border-yellow-300,
.group:hover .group-hover\:border-yellow-400,
.group:hover .group-hover\:border-yellow-500,
.group:hover .group-hover\:border-yellow-600,
.group:hover .group-hover\:border-orange-200,
.group:hover .group-hover\:border-orange-300,
.group:hover .group-hover\:border-orange-400,
.group:hover .group-hover\:border-orange-500,
.group:hover .group-hover\:border-orange-600 { border-color: var(--color-warning) !important; }
.group:hover .group-hover\:bg-amber-400,
.group:hover .group-hover\:bg-amber-500,
.group:hover .group-hover\:bg-amber-600,
.group:hover .group-hover\:bg-yellow-400,
.group:hover .group-hover\:bg-yellow-500,
.group:hover .group-hover\:bg-yellow-600,
.group:hover .group-hover\:bg-orange-400,
.group:hover .group-hover\:bg-orange-500,
.group:hover .group-hover\:bg-orange-600 { background-color: var(--color-warning) !important; }
.group:hover .group-hover\:bg-amber-700,
.group:hover .group-hover\:bg-amber-800,
.group:hover .group-hover\:bg-amber-900,
.group:hover .group-hover\:bg-yellow-700,
.group:hover .group-hover\:bg-yellow-800,
.group:hover .group-hover\:bg-yellow-900,
.group:hover .group-hover\:bg-orange-700,
.group:hover .group-hover\:bg-orange-800,
.group:hover .group-hover\:bg-orange-900 { background-color: var(--color-warning-hover) !important; }
.group:hover .group-hover\:text-amber-700,
.group:hover .group-hover\:text-amber-800,
.group:hover .group-hover\:text-amber-900,
.group:hover .group-hover\:text-yellow-700,
.group:hover .group-hover\:text-yellow-800,
.group:hover .group-hover\:text-yellow-900,
.group:hover .group-hover\:text-orange-700,
.group:hover .group-hover\:text-orange-800,
.group:hover .group-hover\:text-orange-900 { color: var(--color-warning-text) !important; }
.group:hover .group-hover\:bg-cyan-50,
.group:hover .group-hover\:bg-cyan-100,
.group:hover .group-hover\:bg-cyan-200,
.group:hover .group-hover\:bg-cyan-300,
.group:hover .group-hover\:bg-sky-50,
.group:hover .group-hover\:bg-sky-100,
.group:hover .group-hover\:bg-sky-200,
.group:hover .group-hover\:bg-sky-300 { background-color: var(--color-info-muted) !important; }
.group:hover .group-hover\:text-cyan-50,
.group:hover .group-hover\:text-cyan-100,
.group:hover .group-hover\:text-cyan-200,
.group:hover .group-hover\:text-cyan-300,
.group:hover .group-hover\:text-cyan-400,
.group:hover .group-hover\:text-cyan-500,
.group:hover .group-hover\:text-cyan-600,
.group:hover .group-hover\:text-sky-50,
.group:hover .group-hover\:text-sky-100,
.group:hover .group-hover\:text-sky-200,
.group:hover .group-hover\:text-sky-300,
.group:hover .group-hover\:text-sky-400,
.group:hover .group-hover\:text-sky-500,
.group:hover .group-hover\:text-sky-600 { color: var(--color-info-on-surface) !important; }
.group:hover .group-hover\:border-cyan-200,
.group:hover .group-hover\:border-cyan-300,
.group:hover .group-hover\:border-cyan-400,
.group:hover .group-hover\:border-cyan-500,
.group:hover .group-hover\:border-cyan-600,
.group:hover .group-hover\:border-sky-200,
.group:hover .group-hover\:border-sky-300,
.group:hover .group-hover\:border-sky-400,
.group:hover .group-hover\:border-sky-500,
.group:hover .group-hover\:border-sky-600 { border-color: var(--color-info) !important; }
.group:hover .group-hover\:bg-cyan-400,
.group:hover .group-hover\:bg-cyan-500,
.group:hover .group-hover\:bg-cyan-600,
.group:hover .group-hover\:bg-sky-400,
.group:hover .group-hover\:bg-sky-500,
.group:hover .group-hover\:bg-sky-600 { background-color: var(--color-info) !important; }
.group:hover .group-hover\:bg-cyan-700,
.group:hover .group-hover\:bg-cyan-800,
.group:hover .group-hover\:bg-cyan-900,
.group:hover .group-hover\:bg-sky-700,
.group:hover .group-hover\:bg-sky-800,
.group:hover .group-hover\:bg-sky-900 { background-color: var(--color-info-hover) !important; }
.group:hover .group-hover\:text-cyan-700,
.group:hover .group-hover\:text-cyan-800,
.group:hover .group-hover\:text-cyan-900,
.group:hover .group-hover\:text-sky-700,
.group:hover .group-hover\:text-sky-800,
.group:hover .group-hover\:text-sky-900 { color: var(--color-info-text) !important; }
.group:hover .group-hover\:border-gray-600,
.group:hover .group-hover\:border-gray-700,
.group:hover .group-hover\:border-slate-600,
.group:hover .group-hover\:border-slate-700,
.group:hover .group-hover\:border-zinc-600,
.group:hover .group-hover\:border-zinc-700,
.group:hover .group-hover\:border-neutral-600,
.group:hover .group-hover\:border-neutral-700,
.group:hover .group-hover\:border-stone-600,
.group:hover .group-hover\:border-stone-700 { border-color: var(--text-secondary) !important; }
.group:hover .group-hover\:border-gray-800,
.group:hover .group-hover\:border-gray-900,
.group:hover .group-hover\:border-slate-800,
.group:hover .group-hover\:border-slate-900,
.group:hover .group-hover\:border-zinc-800,
.group:hover .group-hover\:border-zinc-900,
.group:hover .group-hover\:border-neutral-800,
.group:hover .group-hover\:border-neutral-900,
.group:hover .group-hover\:border-stone-800,
.group:hover .group-hover\:border-stone-900 { border-color: var(--text-primary) !important; }
.group:hover .group-hover\:bg-gray-300,
.group:hover .group-hover\:bg-slate-300,
.group:hover .group-hover\:bg-zinc-300,
.group:hover .group-hover\:bg-neutral-300,
.group:hover .group-hover\:bg-stone-300 { background-color: var(--border-color-strong) !important; }
.group:hover .group-hover\:bg-gray-400,
.group:hover .group-hover\:bg-gray-500,
.group:hover .group-hover\:bg-slate-400,
.group:hover .group-hover\:bg-slate-500,
.group:hover .group-hover\:bg-zinc-400,
.group:hover .group-hover\:bg-zinc-500,
.group:hover .group-hover\:bg-neutral-400,
.group:hover .group-hover\:bg-neutral-500,
.group:hover .group-hover\:bg-stone-400,
.group:hover .group-hover\:bg-stone-500 { background-color: var(--text-muted) !important; }
.group:hover .group-hover\:divide-gray-100 > * + *,
.group:hover .group-hover\:divide-gray-200 > * + *,
.group:hover .group-hover\:divide-slate-100 > * + *,
.group:hover .group-hover\:divide-slate-200 > * + *,
.group:hover .group-hover\:divide-zinc-100 > * + *,
.group:hover .group-hover\:divide-zinc-200 > * + *,
.group:hover .group-hover\:divide-neutral-100 > * + *,
.group:hover .group-hover\:divide-neutral-200 > * + *,
.group:hover .group-hover\:divide-stone-100 > * + *,
.group:hover .group-hover\:divide-stone-200 > * + * { border-color: var(--border-color) !important; }
.group:hover .group-hover\:divide-gray-300 > * + *,
.group:hover .group-hover\:divide-slate-300 > * + *,
.group:hover .group-hover\:divide-zinc-300 > * + *,
.group:hover .group-hover\:divide-neutral-300 > * + *,
.group:hover .group-hover\:divide-stone-300 > * + * { border-color: var(--border-color-strong) !important; }
.group:hover .group-hover\:ring-blue-300,
.group:hover .group-hover\:ring-blue-400,
.group:hover .group-hover\:ring-blue-500,
.group:hover .group-hover\:ring-blue-600,
.group:hover .group-hover\:ring-indigo-300,
.group:hover .group-hover\:ring-indigo-400,
.group:hover .group-hover\:ring-indigo-500,
.group:hover .group-hover\:ring-indigo-600,
.group:hover .group-hover\:ring-violet-300,
.group:hover .group-hover\:ring-violet-400,
.group:hover .group-hover\:ring-violet-500,
.group:hover .group-hover\:ring-violet-600,
.group:hover .group-hover\:ring-purple-300,
.group:hover .group-hover\:ring-purple-400,
.group:hover .group-hover\:ring-purple-500,
.group:hover .group-hover\:ring-purple-600 { --tw-ring-color: var(--color-primary) !important; }
.group:hover .group-hover\:ring-red-300,
.group:hover .group-hover\:ring-red-400,
.group:hover .group-hover\:ring-red-500,
.group:hover .group-hover\:ring-red-600,
.group:hover .group-hover\:ring-rose-300,
.group:hover .group-hover\:ring-rose-400,
.group:hover .group-hover\:ring-rose-500,
.group:hover .group-hover\:ring-rose-600,
.group:hover .group-hover\:ring-pink-300,
.group:hover .group-hover\:ring-pink-400,
.group:hover .group-hover\:ring-pink-500,
.group:hover .group-hover\:ring-pink-600 { --tw-ring-color: var(--color-danger) !important; }
.group:hover .group-hover\:ring-green-300,
.group:hover .group-hover\:ring-green-400,
.group:hover .group-hover\:ring-green-500,
.group:hover .group-hover\:ring-green-600,
.group:hover .group-hover\:ring-emerald-300,
.group:hover .group-hover\:ring-emerald-400,
.group:hover .group-hover\:ring-emerald-500,
.group:hover .group-hover\:ring-emerald-600,
.group:hover .group-hover\:ring-teal-300,
.group:hover .group-hover\:ring-teal-400,
.group:hover .group-hover\:ring-teal-500,
.group:hover .group-hover\:ring-teal-600,
.group:hover .group-hover\:ring-lime-300,
.group:hover .group-hover\:ring-lime-400,
.group:hover .group-hover\:ring-lime-500,
.group:hover .group-hover\:ring-lime-600 { --tw-ring-color: var(--color-success) !important; }
.group:hover .group-hover\:ring-amber-300,
.group:hover .group-hover\:ring-amber-400,
.group:hover .group-hover\:ring-amber-500,
.group:hover .group-hover\:ring-amber-600,
.group:hover .group-hover\:ring-yellow-300,
.group:hover .group-hover\:ring-yellow-400,
.group:hover .group-hover\:ring-yellow-500,
.group:hover .group-hover\:ring-yellow-600,
.group:hover .group-hover\:ring-orange-300,
.group:hover .group-hover\:ring-orange-400,
.group:hover .group-hover\:ring-orange-500,
.group:hover .group-hover\:ring-orange-600 { --tw-ring-color: var(--color-warning) !important; }
.group:hover .group-hover\:ring-sky-300,
.group:hover .group-hover\:ring-sky-400,
.group:hover .group-hover\:ring-sky-500,
.group:hover .group-hover\:ring-sky-600,
.group:hover .group-hover\:ring-cyan-300,
.group:hover .group-hover\:ring-cyan-400,
.group:hover .group-hover\:ring-cyan-500,
.group:hover .group-hover\:ring-cyan-600 { --tw-ring-color: var(--color-info) !important; }

/* ---- dark: ---- */
.dark\:text-gray-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-gray-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--surface-inset) !important; }
.dark\:text-gray-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--border-color) !important; }
.dark\:text-gray-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--border-color-strong) !important; }
.dark\:text-gray-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-gray-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--text-muted) !important; }
.dark\:text-gray-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-gray-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--text-secondary) !important; }
.dark\:text-gray-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-gray-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-gray-950:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-slate-950:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-zinc-950:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-neutral-950:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-stone-950:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--text-primary) !important; }
.dark\:bg-gray-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-gray-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--surface-inset) !important; }
.dark\:bg-gray-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--border-color) !important; }
.dark\:bg-gray-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-gray-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--text-secondary) !important; }
.dark\:bg-gray-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-gray-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--text-primary) !important; }
.dark\:border-gray-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-gray-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--border-color) !important; }
.dark\:border-gray-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-gray-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-gray-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--border-color-strong) !important; }
.dark\:border-gray-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--text-muted) !important; }
.dark\:bg-blue-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-blue-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-blue-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-blue-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-primary-muted) !important; }
.dark\:text-blue-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-blue-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-blue-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-blue-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-blue-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-blue-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-blue-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-primary) !important; }
.dark\:border-blue-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-blue-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-blue-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-blue-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-blue-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-indigo-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-indigo-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-indigo-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-indigo-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-indigo-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-violet-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-violet-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-violet-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-violet-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-violet-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-purple-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-purple-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-purple-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-purple-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-purple-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-primary) !important; }
.dark\:bg-blue-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-blue-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-blue-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-primary) !important; }
.dark\:bg-blue-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-blue-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-blue-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-indigo-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-violet-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-purple-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-primary-hover) !important; }
.dark\:text-blue-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-blue-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-blue-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-indigo-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-violet-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-purple-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-primary-hover) !important; }
.dark\:bg-red-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-red-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-red-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-red-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-danger-muted) !important; }
.dark\:text-red-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-red-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-red-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-red-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-red-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-red-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-red-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-danger-on-surface) !important; }
.dark\:border-red-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-red-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-red-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-red-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-red-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-rose-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-rose-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-rose-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-rose-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-rose-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-pink-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-pink-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-pink-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-pink-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-pink-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-danger) !important; }
.dark\:bg-red-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-red-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-red-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-danger) !important; }
.dark\:bg-red-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-red-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-red-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-rose-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-pink-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-danger-hover) !important; }
.dark\:text-red-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-red-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-red-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-rose-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-pink-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-danger-text) !important; }
.dark\:bg-green-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-green-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-green-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-green-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-success-muted) !important; }
.dark\:text-green-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-green-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-green-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-green-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-green-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-green-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-green-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-success-on-surface) !important; }
.dark\:border-green-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-green-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-green-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-green-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-green-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-emerald-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-emerald-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-emerald-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-emerald-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-emerald-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-teal-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-teal-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-teal-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-teal-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-teal-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-lime-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-lime-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-lime-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-lime-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-lime-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-success) !important; }
.dark\:bg-green-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-green-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-green-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-success) !important; }
.dark\:bg-green-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-green-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-green-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-emerald-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-teal-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-lime-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-success-hover) !important; }
.dark\:text-green-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-green-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-green-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-emerald-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-teal-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-lime-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-success-text) !important; }
.dark\:bg-amber-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-amber-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-amber-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-amber-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-warning-muted) !important; }
.dark\:text-amber-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-amber-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-amber-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-amber-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-amber-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-amber-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-amber-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-warning-on-surface) !important; }
.dark\:border-amber-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-amber-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-amber-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-amber-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-amber-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-yellow-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-yellow-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-yellow-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-yellow-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-yellow-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-orange-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-orange-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-orange-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-orange-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-orange-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-warning) !important; }
.dark\:bg-amber-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-amber-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-amber-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-warning) !important; }
.dark\:bg-amber-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-amber-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-amber-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-yellow-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-orange-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-warning-hover) !important; }
.dark\:text-amber-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-amber-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-amber-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-yellow-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-orange-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-warning-text) !important; }
.dark\:bg-cyan-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-cyan-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-cyan-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-cyan-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-info-muted) !important; }
.dark\:text-cyan-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-cyan-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-cyan-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-cyan-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-cyan-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-cyan-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-cyan-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-info-on-surface) !important; }
.dark\:border-cyan-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-cyan-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-cyan-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-cyan-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-cyan-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-sky-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-sky-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-sky-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-sky-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-sky-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-info) !important; }
.dark\:bg-cyan-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-cyan-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-cyan-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-info) !important; }
.dark\:bg-cyan-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-cyan-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-cyan-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-sky-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-info-hover) !important; }
.dark\:text-cyan-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-cyan-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-cyan-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:text-sky-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-info-text) !important; }
.dark\:border-gray-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-gray-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--text-secondary) !important; }
.dark\:border-gray-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-gray-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-slate-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-zinc-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-neutral-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:border-stone-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--text-primary) !important; }
.dark\:bg-gray-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--border-color-strong) !important; }
.dark\:bg-gray-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-gray-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-slate-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-zinc-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-neutral-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:bg-stone-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--text-muted) !important; }
.dark\:divide-gray-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-gray-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-slate-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-slate-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-zinc-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-zinc-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-neutral-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-neutral-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-stone-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-stone-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + * { border-color: var(--border-color) !important; }
.dark\:divide-gray-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-slate-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-zinc-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-neutral-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:divide-stone-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + * { border-color: var(--border-color-strong) !important; }
.dark\:ring-blue-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-blue-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-blue-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-blue-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-indigo-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-indigo-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-indigo-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-indigo-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-violet-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-violet-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-violet-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-violet-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-purple-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-purple-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-purple-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-purple-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-primary) !important; }
.dark\:ring-red-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-red-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-red-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-red-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-rose-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-rose-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-rose-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-rose-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-pink-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-pink-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-pink-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-pink-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-danger) !important; }
.dark\:ring-green-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-green-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-green-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-green-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-emerald-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-emerald-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-emerald-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-emerald-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-teal-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-teal-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-teal-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-teal-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-lime-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-lime-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-lime-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-lime-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-success) !important; }
.dark\:ring-amber-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-amber-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-amber-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-amber-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-yellow-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-yellow-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-yellow-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-yellow-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-orange-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-orange-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-orange-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-orange-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-warning) !important; }
.dark\:ring-sky-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-sky-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-sky-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-sky-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-cyan-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-cyan-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-cyan-500:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:ring-cyan-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-info) !important; }

/* ---- dark:hover: ---- */
.dark\:hover\:text-gray-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-gray-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--surface-inset) !important; }
.dark\:hover\:text-gray-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--border-color) !important; }
.dark\:hover\:text-gray-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--border-color-strong) !important; }
.dark\:hover\:text-gray-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-gray-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--text-muted) !important; }
.dark\:hover\:text-gray-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-gray-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--text-secondary) !important; }
.dark\:hover\:text-gray-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-gray-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-gray-950:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-slate-950:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-zinc-950:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-neutral-950:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-stone-950:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--text-primary) !important; }
.dark\:hover\:bg-gray-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-gray-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--surface-inset) !important; }
.dark\:hover\:bg-gray-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--border-color) !important; }
.dark\:hover\:bg-gray-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-gray-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--text-secondary) !important; }
.dark\:hover\:bg-gray-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-gray-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--text-primary) !important; }
.dark\:hover\:border-gray-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-gray-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--border-color) !important; }
.dark\:hover\:border-gray-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-gray-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-gray-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--border-color-strong) !important; }
.dark\:hover\:border-gray-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--text-muted) !important; }
.dark\:hover\:bg-blue-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-blue-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-blue-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-blue-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-primary-muted) !important; }
.dark\:hover\:text-blue-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-blue-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-blue-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-blue-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-blue-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-blue-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-blue-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-primary) !important; }
.dark\:hover\:border-blue-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-blue-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-blue-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-blue-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-blue-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-indigo-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-indigo-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-indigo-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-indigo-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-indigo-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-violet-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-violet-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-violet-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-violet-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-violet-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-purple-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-purple-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-purple-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-purple-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-purple-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-primary) !important; }
.dark\:hover\:bg-blue-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-blue-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-blue-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-primary) !important; }
.dark\:hover\:bg-blue-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-blue-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-blue-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-indigo-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-violet-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-purple-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-primary-hover) !important; }
.dark\:hover\:text-blue-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-blue-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-blue-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-indigo-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-violet-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-purple-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-primary-hover) !important; }
.dark\:hover\:bg-red-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-red-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-red-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-red-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-danger-muted) !important; }
.dark\:hover\:text-red-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-red-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-red-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-red-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-red-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-red-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-red-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-danger-on-surface) !important; }
.dark\:hover\:border-red-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-red-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-red-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-red-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-red-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-rose-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-rose-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-rose-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-rose-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-rose-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-pink-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-pink-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-pink-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-pink-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-pink-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-danger) !important; }
.dark\:hover\:bg-red-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-red-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-red-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-danger) !important; }
.dark\:hover\:bg-red-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-red-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-red-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-rose-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-pink-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-danger-hover) !important; }
.dark\:hover\:text-red-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-red-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-red-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-rose-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-pink-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-danger-text) !important; }
.dark\:hover\:bg-green-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-green-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-green-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-green-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-success-muted) !important; }
.dark\:hover\:text-green-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-green-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-green-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-green-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-green-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-green-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-green-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-success-on-surface) !important; }
.dark\:hover\:border-green-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-green-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-green-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-green-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-green-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-emerald-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-emerald-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-emerald-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-emerald-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-emerald-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-teal-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-teal-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-teal-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-teal-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-teal-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-lime-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-lime-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-lime-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-lime-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-lime-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-success) !important; }
.dark\:hover\:bg-green-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-green-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-green-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-success) !important; }
.dark\:hover\:bg-green-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-green-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-green-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-emerald-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-teal-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-lime-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-success-hover) !important; }
.dark\:hover\:text-green-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-green-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-green-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-emerald-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-teal-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-lime-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-success-text) !important; }
.dark\:hover\:bg-amber-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-amber-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-amber-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-amber-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-warning-muted) !important; }
.dark\:hover\:text-amber-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-amber-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-amber-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-amber-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-amber-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-amber-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-amber-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-warning-on-surface) !important; }
.dark\:hover\:border-amber-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-amber-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-amber-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-amber-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-amber-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-yellow-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-yellow-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-yellow-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-yellow-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-yellow-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-orange-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-orange-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-orange-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-orange-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-orange-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-warning) !important; }
.dark\:hover\:bg-amber-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-amber-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-amber-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-warning) !important; }
.dark\:hover\:bg-amber-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-amber-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-amber-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-yellow-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-orange-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-warning-hover) !important; }
.dark\:hover\:text-amber-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-amber-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-amber-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-yellow-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-orange-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-warning-text) !important; }
.dark\:hover\:bg-cyan-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-cyan-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-cyan-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-cyan-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-info-muted) !important; }
.dark\:hover\:text-cyan-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-cyan-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-cyan-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-cyan-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-cyan-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-cyan-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-cyan-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-info-on-surface) !important; }
.dark\:hover\:border-cyan-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-cyan-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-cyan-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-cyan-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-cyan-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-sky-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-sky-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-sky-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-sky-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-sky-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--color-info) !important; }
.dark\:hover\:bg-cyan-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-cyan-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-cyan-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-info) !important; }
.dark\:hover\:bg-cyan-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-cyan-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-cyan-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-sky-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--color-info-hover) !important; }
.dark\:hover\:text-cyan-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-cyan-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-cyan-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:text-sky-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { color: var(--color-info-text) !important; }
.dark\:hover\:border-gray-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-gray-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--text-secondary) !important; }
.dark\:hover\:border-gray-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-gray-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-slate-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-zinc-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-neutral-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:border-stone-900:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { border-color: var(--text-primary) !important; }
.dark\:hover\:bg-gray-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--border-color-strong) !important; }
.dark\:hover\:bg-gray-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-gray-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-slate-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-zinc-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-neutral-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:bg-stone-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { background-color: var(--text-muted) !important; }
.dark\:hover\:divide-gray-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-gray-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-slate-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-slate-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-zinc-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-zinc-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-neutral-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-neutral-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-stone-100:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-stone-200:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + * { border-color: var(--border-color) !important; }
.dark\:hover\:divide-gray-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-slate-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-zinc-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-neutral-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + *,
.dark\:hover\:divide-stone-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) > * + * { border-color: var(--border-color-strong) !important; }
.dark\:hover\:ring-blue-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-blue-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-blue-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-blue-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-indigo-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-indigo-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-indigo-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-indigo-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-violet-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-violet-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-violet-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-violet-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-purple-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-purple-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-purple-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-purple-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-primary) !important; }
.dark\:hover\:ring-red-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-red-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-red-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-red-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-rose-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-rose-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-rose-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-rose-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-pink-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-pink-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-pink-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-pink-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-danger) !important; }
.dark\:hover\:ring-green-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-green-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-green-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-green-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-emerald-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-emerald-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-emerald-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-emerald-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-teal-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-teal-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-teal-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-teal-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-lime-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-lime-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-lime-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-lime-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-success) !important; }
.dark\:hover\:ring-amber-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-amber-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-amber-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-amber-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-yellow-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-yellow-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-yellow-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-yellow-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-orange-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-orange-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-orange-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-orange-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-warning) !important; }
.dark\:hover\:ring-sky-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-sky-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-sky-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-sky-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-cyan-300:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-cyan-400:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-cyan-500:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *),
.dark\:hover\:ring-cyan-600:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) { --tw-ring-color: var(--color-info) !important; }

/* Valor de un campo de solo lectura dentro de FormField. */
.ui-formfield-value {
  color: var(--text-primary);
  font-size: var(--text-sm);
}
/* Variante de una linea para cabeceras compactas (el panel de identidad de
   MASTER_DETAIL): recorta con puntos suspensivos en vez de desbordar. */
.ui-formfield-value.is-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Color semantico de las acciones de fila de RowActions.
   Sin esta regla habia que prestarle la clase .dg-btn-icon para que ganara el
   color, y con ella se colaba tambien su tipografia (15px) y su geometria, que
   no son las de .ui-rowacts. Aqui el color va con la especificidad justa
   (0,2,1) y la medida se queda en la del componente. */
.ui-rowacts > button.btn-icon-info    { color: var(--color-info-on-surface); }
.ui-rowacts > button.btn-icon-warning { color: var(--color-warning-on-surface); }
.ui-rowacts > button.btn-icon-danger  { color: var(--color-danger-on-surface); }
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.hover\:text-secondary:hover {
  color: var(--color-secondary, #3b82f6);
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.active\:opacity-70:active {
  opacity: 0.7;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-gray-100:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
@media (min-width: 640px) {

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:w-64 {
    width: 16rem;
  }

  .md\:w-\[30\%\] {
    width: 30%;
  }

  .md\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .md\:p-6 {
    padding: 1.5rem;
  }
}
@media (min-width: 1024px) {

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.dark\:border-gray-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dark\:bg-blue-900\/20:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/30:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-emerald-900\/40:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  background-color: rgb(6 78 59 / 0.4);
}
.dark\:bg-gray-700:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-800:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-900:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-900\/30:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  background-color: rgb(17 24 39 / 0.3);
}
.dark\:bg-gray-900\/40:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  background-color: rgb(17 24 39 / 0.4);
}
.dark\:bg-indigo-900\/30:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  background-color: rgb(49 46 129 / 0.3);
}
.dark\:bg-indigo-900\/50:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  background-color: rgb(49 46 129 / 0.5);
}
.dark\:text-blue-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-200:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-600:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-100:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-300:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-gray-700:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-700\/50:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  background-color: rgb(55 65 81 / 0.5);
}
.dark\:hover\:bg-gray-800:hover:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.\[\&\:\:-webkit-slider-thumb\]\:pointer-events-auto::-webkit-slider-thumb {
  pointer-events: auto;
}
.\[\&\:\:-webkit-slider-thumb\]\:h-4::-webkit-slider-thumb {
  height: 1rem;
}
.\[\&\:\:-webkit-slider-thumb\]\:w-4::-webkit-slider-thumb {
  width: 1rem;
}
.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
}
.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb {
  border-radius: 9999px;
}
.\[\&\:\:-webkit-slider-thumb\]\:bg-blue-600::-webkit-slider-thumb {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

/* Tema generado por Spartane DoIT — no editar manualmente */
:root {
  --color-primary: #1976D2;
  --color-primary-hover: #1565C0;
  --color-background: #FAFAFA;
  --color-text: #212121;
  --color-border: #E0E0E0;
  --color-accent: #FF9800;
  --color-card-bg: #FFFFFF;
  --color-text-muted: #737373;
  --color-heading: #212121;
  --color-label: #737373;
  --color-muted: #737373;
  --content-bg: #FAFAFA;
  --topbar-bg: #FFFFFF;
  --color-dropdown-bg: #FFFFFF;
  --color-dropdown-border: #E0E0E0;
  --color-dropdown-item: #212121;
  --color-dropdown-item-hover: #212121;
  --color-dropdown-item-hover-bg: #F5F5F5;
  --color-topbar-divider: #F5F5F5;
  --topbar-link-color: #757575;
  --sidebar-bg: #FFFFFF;
  --sidebar-width: 240px;
  --sidebar-menu-color: #757575;
  --sidebar-text: #757575;
  --sidebar-category-color: #757575FC;
  --sidebar-menu-active-bg: #E3F2FD;
  --sidebar-menu-active-color: #176EC4;
  --sidebar-toggle-bg: #C7C7C7;
  --sidebar-toggle-color: #535353;
  --font-family-primary: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --font-family-secondary: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --font-size-base: 14px;
  --border-radius: 12px;
  --border-radius-sm: 4px;
  --border-radius-lg: 16px;
  --border-radius-input: 4px;
  --card-border-radius: 12px;
  --shadow: 0 2px 1px -1px rgba(0,0,0,0.2);
  --shadow-sm: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
  --shadow-login: 0 2px 1px -1px rgba(0,0,0,0.2);
  --color-card-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
  --color-input-border: #BDBDBD;
  --color-form-control-border: #BDBDBD;
  --color-input-focus: #1976D2;
  --color-primary-active: color-mix(in srgb, #1976D2 86%, #000);
  --color-primary-muted: #E3F2FD;
  --color-primary-text: #FFFFFF;
  --color-primary-on-surface: #1976D2;
  --color-primary-on-muted: #176EC4;
  --text-secondary-on-tint: #6D6D6D;
  --color-accent-hover: color-mix(in srgb, #FF4081 86%, #000);
  --color-secondary: #9C27B0;
  --color-secondary-hover: #7B1FA2;
  --color-success: #2E7D32;
  --color-success-hover: color-mix(in srgb, #2E7D32 86%, #000);
  --color-success-muted: #E2EDE2;
  --color-success-text: #246227;
  --color-success-on-surface: #2E7D32;
  --color-success-on-muted: #2C7830;
  --color-success-solid: #2E7D32;
  --color-warning: #ED6C02;
  --color-warning-hover: color-mix(in srgb, #ED6C02 86%, #000);
  --color-warning-muted: #FCEADC;
  --color-warning-text: #AF4F02;
  --color-warning-on-surface: #BC5602;
  --color-warning-on-muted: #AF5001;
  --color-warning-solid: #C05802;
  --color-danger: #D32F2F;
  --color-danger-hover: color-mix(in srgb, #D32F2F 86%, #000);
  --color-danger-muted: #F9E2E2;
  --color-danger-text: #A52525;
  --color-danger-on-surface: #D32F2F;
  --color-danger-on-muted: #C62A2A;
  --color-danger-solid: #D32F2F;
  --color-info: #0288D1;
  --color-info-hover: color-mix(in srgb, #0288D1 86%, #000);
  --color-info-muted: #DCEEF9;
  --color-info-text: #026AA3;
  --color-info-on-surface: #0279BA;
  --color-info-on-muted: #0270AC;
  --avatar-ink: #FFFFFF;
  --avatar-scrim: #00000030;
  --surface-base: #FAFAFA;
  --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFF;
  --surface-inset: #FAFAFA;
  --surface-hover: #F5F5F5;
  --text-primary: #212121;
  --text-secondary: #737373;
  --text-muted: #737373;
  --text-disabled: #737373;
  --text-link: #1974CF;
  --text-link-hover: #1565C0;
  --control-strong-bg: #212121;
  --control-strong-ink: #FFFFFF;
  --chart-1: #4798E9;
  --chart-2: #1A79D8;
  --chart-3: #1460AC;
  --chart-4: #0F4981;
  --chart-5: #0A3157;
  --chart-6: #03101D;
  --border-color: #E0E0E0;
  --border-color-strong: color-mix(in srgb, #E0E0E0 86%, #000);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-xs: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  --shadow-md: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);
  --shadow-lg: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
  --shadow-xl: 0px 7px 8px -4px rgba(0,0,0,0.2), 0px 12px 17px 2px rgba(0,0,0,0.14), 0px 5px 22px 4px rgba(0,0,0,0.12);
  --font-sans: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --font-display: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --font-mono: Roboto Mono, ui-monospace, SFMono-Regular, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --control-h: 56px;
  --row-h: 56px;
  --border-color-focus: #1976D2;
  --card-pad: 16px;
  --modal-pad: 24px;
  --table-header-bg: transparent;
  --surface-sunken: #FAFAFA;
  --table-header-color: #767676;
  --color-primary-btn: #1976D2;
  --chart-color-1: #1976D2;
  --chart-color-2: #9C27B0;
  --chart-color-3: #FF9800;
  --chart-color-4: #2E7D32;
  --chart-color-5: #0288D1;
  --chart-color-6: #D32F2F;
  --sidebar-brand: #FFFFFF;
  --sidebar-brand-2: color-mix(in srgb, #FFFFFF 86%, #000);
  --sidebar-brand-3: color-mix(in srgb, #FFFFFF 70%, #000);
}

[data-bs-theme="dark"], [data-theme="dark"] {
  --color-background: #121212;
  --content-bg: #1E1E1E;
  --topbar-bg: #1E1E1E;
  --color-card-bg: #1E1E1E;
  --color-white: #1E1E1E;
  --color-text: #FFFFFF;
  --color-heading: #FFFFFF;
  --color-border: #333333;
  --color-dropdown-bg: #1E1E1E;
  --color-dropdown-border: #333333;
  --sidebar-bg: #1E1E1E;
  --surface-base: #121212;
  --surface-raised: #1E1E1E;
  --surface-overlay: #1E1E1E;
  --surface-inset: #1E1E1E;
  --surface-hover: #2C2C2C;
  --text-primary: #FFFFFF;
  --text-secondary: #FFFFFFB3;
  --text-muted: #FFFFFF80;
  --text-disabled: #FFFFFF80;
  --text-link: #90CAF9;
  --text-link-hover: #64B5F6;
  --control-strong-bg: #FFFFFF;
  --control-strong-ink: #1E1E1E;
  --chart-1: #0A6BB9;
  --chart-2: #0C81DF;
  --chart-3: #2D9BF4;
  --chart-4: #67B7F7;
  --chart-5: #A2D3FA;
  --chart-6: #DFF0FD;
  --topbar-link-color: #FFFFFFB3;
  --border-color: #333333;
  --border-color-strong: #2C2C2C;
  --color-primary: #90CAF9;
  --color-primary-on-surface: #90CAF9;
  --color-primary-text: #1E1E1E;
  --color-primary-on-muted: #90CAF9;
  --text-secondary-on-tint: #FFFFFFB3;
  --color-primary-hover: #64B5F6;
  --color-primary-muted: #0D2B45;
  --color-accent: #FF80AB;
  --color-success: #66BB6A;
  --color-success-hover: color-mix(in srgb, #66BB6A 82%, #000);
  --color-success-muted: #162917;
  --color-success-text: #94CF97;
  --color-success-on-surface: #66BB6A;
  --color-success-on-muted: #66BB6A;
  --color-success-solid: #66BB6A;
  --color-warning: #FFB74D;
  --color-warning-hover: color-mix(in srgb, #FFB74D 82%, #000);
  --color-warning-muted: #382811;
  --color-warning-text: #FFCD82;
  --color-warning-on-surface: #FFB74D;
  --color-warning-on-muted: #FFB74D;
  --color-warning-solid: #FFB74D;
  --color-danger: #F44336;
  --color-danger-hover: color-mix(in srgb, #F44336 82%, #000);
  --color-danger-muted: #360F0C;
  --color-danger-text: #F77B72;
  --color-danger-on-surface: #F66257;
  --color-danger-on-muted: #F44336;
  --color-danger-solid: #F44336;
  --color-info: #29B6F6;
  --color-info-hover: color-mix(in srgb, #29B6F6 82%, #000);
  --color-info-muted: #092836;
  --color-info-text: #69CCF9;
  --color-info-on-surface: #29B6F6;
  --color-info-on-muted: #29B6F6;
  --avatar-ink: #FFFFFF;
  --avatar-scrim: #00000066;
  --shadow-xs: 0px 2px 1px -1px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(0,0,0,0.42), 0px 1px 3px 0px rgba(0,0,0,0.36);
  --shadow-sm: 0px 3px 3px -2px rgba(0,0,0,0.5), 0px 3px 4px 0px rgba(0,0,0,0.42), 0px 1px 8px 0px rgba(0,0,0,0.36);
  --shadow-md: 0px 3px 5px -1px rgba(0,0,0,0.5), 0px 6px 10px 0px rgba(0,0,0,0.42), 0px 1px 18px 0px rgba(0,0,0,0.36);
  --shadow-lg: 0px 5px 5px -3px rgba(0,0,0,0.5), 0px 8px 10px 1px rgba(0,0,0,0.42), 0px 3px 14px 2px rgba(0,0,0,0.36);
  --shadow-xl: 0px 7px 8px -4px rgba(0,0,0,0.5), 0px 12px 17px 2px rgba(0,0,0,0.42), 0px 5px 22px 4px rgba(0,0,0,0.36);
  --shadow: 0px 3px 5px -1px rgba(0,0,0,0.5), 0px 6px 10px 0px rgba(0,0,0,0.42), 0px 1px 18px 0px rgba(0,0,0,0.36);
  --color-input-border: #5C5C5C;
  --color-form-control-border: #5C5C5C;
  --border-color-focus: #90CAF9;
  --table-header-bg: transparent;
  --surface-sunken: #242424;
  --table-header-color: #FFFFFF80;
  --sidebar-menu-active-bg: #0D2B45;
  --sidebar-menu-active-color: #90CAF9;
  --sidebar-menu-color: #FFFFFFB3;
  --sidebar-text: #FFFFFFB3;
  --sidebar-category-color: #FFFFFF81;
  --sidebar-toggle-bg: #565656;
  --sidebar-toggle-color: #FFFFFFB3;
}

/* Estructura morfológica de tema — generada por Spartane DoIT — no editar manualmente */
/* Complementa _theme.css (variables de color). Activa con data-theme en <html>. */


/* ===== MATERIAL ENTERPRISE — Material Design 3 ===== */
[data-theme-style="material"] *:not(.material-icons):not(.material-icons-outlined):not(.material-icons-round):not(.material-icons-sharp):not(.material-icons-two-tone):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*=" fa-"]):not([class^="fa-"]):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):not(.sp-root):not(.sp-root *) { font-family: 'Roboto', -apple-system, sans-serif; }

/* Botones — pill shape con elevación */
[data-theme-style="material"] .btn {
  border-radius: var(--radius-full) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 24px;
  min-height: 36px;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, background-color 0.2s;
}
[data-theme-style="material"] .btn:hover:not(:disabled) {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.12);
}
[data-theme-style="material"] .btn:active:not(:disabled) {
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transform: translateY(1px);
}
[data-theme-style="material"] .btn-outline-primary,
[data-theme-style="material"] .btn-outline-spartane {
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-full) !important;
  background: transparent;
  color: var(--color-primary);
}
[data-theme-style="material"] .btn-sm { border-radius: var(--radius-full) !important; padding: 4px 16px; min-height: 28px; }
[data-theme-style="material"] .btn-lg { border-radius: var(--radius-full) !important; padding: 12px 32px; min-height: 44px; }

/* Inputs — borde inferior estilo M3 Filled TextField */
[data-theme-style="material"] .form-control,
[data-theme-style="material"] .form-select {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 42%, transparent) !important;
  background-color: rgba(0,0,0,0.04) !important;
  height: 48px;
  padding: 12px 16px 4px 16px;
  transition: border-bottom-color 0.2s, background-color 0.2s;
  box-shadow: none !important;
}
[data-theme-style="material"] .form-control:focus,
[data-theme-style="material"] .form-select:focus {
  border-bottom: 2px solid var(--color-primary) !important;
  background-color: rgba(0,0,0,0.07) !important;
  outline: none;
}
[data-theme-style="material"] textarea.form-control { height: auto; padding-top: 16px; }

/* Cards — elevación M3 */
[data-theme-style="material"] .card {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 5px rgba(0,0,0,0.10) !important;
}
[data-theme-style="material"] .side-card {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.10) !important;
}

/* Modal — bordes más redondeados */
[data-theme-style="material"] .modal-content {
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16) !important;
  border: none !important;
}

/* Tabla */
[data-theme-style="material"] .table th {
  background-color: var(--surface-inset);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(0,0,0,0.6);
}
[data-theme-style="material"] .table tbody tr:hover { background-color: rgba(0,0,0,0.04); }

/* Badge/Chip */
[data-theme-style="material"] .badge, [data-theme-style="material"] .chip {
  border-radius: var(--radius-full);
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* Page header */
[data-theme-style="material"] .page-title { font-weight: 400; letter-spacing: -0.5px; }

/* ===== Guarda móvil: evita el zoom automático de Safari iOS al enfocar campos ===== */
@media (max-width: 1024px) {
  [data-theme-style] .form-control,
  [data-theme-style] .form-select,
  [data-theme-style] textarea.form-control,
  [data-theme-style] select.form-select {
    font-size: 16px;
  }
}

html{position:relative;min-height:100%;overflow-y:auto}body{min-height:100vh;overflow-y:auto}a:focus{outline:none}#wrapper{display:flex}#wrapper #content-wrapper{background-color:#f8f9fc;width:100%;overflow-x:hidden}#wrapper #content-wrapper #content{flex:1 0 auto}.container,.container-fluid{padding-left:30px;padding-right:30px}.scroll-to-top{position:fixed;right:1rem;bottom:1rem;display:none;width:2.75rem;height:2.75rem;text-align:center;color:#fff;background:rgba(58,59,69,.5);line-height:46px}.scroll-to-top:focus,.scroll-to-top:hover{color:var(--color-primary-text)}.scroll-to-top:hover{background:#3a3b45}.scroll-to-top i{font-weight:800}@keyframes growIn{0%{transform:scale(0.9);opacity:0}100%{transform:scale(1);opacity:1}}.animated--grow-in,.sidebar .nav-item .collapse{animation-name:growIn;animation-duration:200ms;animation-timing-function:transform cubic-bezier(0.18, 1.25, 0.4, 1),opacity cubic-bezier(0, 1, 0.4, 1)}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.animated--fade-in{animation-name:fadeIn;animation-duration:200ms;animation-timing-function:opacity cubic-bezier(0, 1, 0.4, 1)}.bg-gradient-primary{background-color:#1e3a5f;background-image:linear-gradient(180deg, #1e3a5f 10%, rgb(25.5, 49.3, 80.75) 100%);background-size:cover}.bg-gradient-secondary{background-color:#3b82f6;background-image:linear-gradient(180deg, #3b82f6 10%, rgb(50.15, 110.5, 209.1) 100%);background-size:cover}.bg-gradient-success{background-color:#22c55e;background-image:linear-gradient(180deg, #22c55e 10%, rgb(28.9, 167.45, 79.9) 100%);background-size:cover}.bg-gradient-info{background-color:#3b82f6;background-image:linear-gradient(180deg, #3b82f6 10%, rgb(50.15, 110.5, 209.1) 100%);background-size:cover}.bg-gradient-warning{background-color:#f59e0b;background-image:linear-gradient(180deg, #f59e0b 10%, rgb(208.25, 134.3, 9.35) 100%);background-size:cover}.bg-gradient-danger{background-color:#ef4444;background-image:linear-gradient(180deg, #ef4444 10%, rgb(203.15, 57.8, 57.8) 100%);background-size:cover}.bg-gradient-light{background-color:#f8f9fc;background-image:linear-gradient(180deg, #f8f9fc 10%, rgb(210.8, 211.65, 214.2) 100%);background-size:cover}.bg-gradient-dark{background-color:#3a3b45;background-image:linear-gradient(180deg, #3a3b45 10%, rgb(49.3, 50.15, 58.65) 100%);background-size:cover}.bg-gray-100{background-color:#f8f9fc !important}.bg-gray-200{background-color:#e3e6f0 !important}.bg-gray-300{background-color:#d1d3e2 !important}.bg-gray-400{background-color:#b7b9cc !important}.bg-gray-500{background-color:#858796 !important}.bg-gray-600{background-color:#6e707e !important}.bg-gray-700{background-color:#5a5c69 !important}.bg-gray-800{background-color:#3a3b45 !important}.bg-gray-900{background-color:#2e2f37 !important}.o-hidden{overflow:hidden !important}.text-xs{font-size:.7rem}.text-lg{font-size:1.2rem}.text-gray-100{color:#f8f9fc !important}.text-gray-200{color:#e3e6f0 !important}.text-gray-300{color:#d1d3e2 !important}.text-gray-400{color:#b7b9cc !important}.text-gray-500{color:var(--text-muted) !important}.text-gray-600{color:#6e707e !important}.text-gray-700{color:#5a5c69 !important}.text-gray-800{color:#3a3b45 !important}.text-gray-900{color:#2e2f37 !important}.icon-circle{height:2.5rem;width:2.5rem;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.border-left-primary{border-left:.25rem solid #1e3a5f !important}.border-bottom-primary{border-bottom:.25rem solid #1e3a5f !important}.border-left-secondary{border-left:.25rem solid #3b82f6 !important}.border-bottom-secondary{border-bottom:.25rem solid #3b82f6 !important}.border-left-success{border-left:.25rem solid #22c55e !important}.border-bottom-success{border-bottom:.25rem solid #22c55e !important}.border-left-info{border-left:.25rem solid #3b82f6 !important}.border-bottom-info{border-bottom:.25rem solid #3b82f6 !important}.border-left-warning{border-left:.25rem solid #f59e0b !important}.border-bottom-warning{border-bottom:.25rem solid #f59e0b !important}.border-left-danger{border-left:.25rem solid #ef4444 !important}.border-bottom-danger{border-bottom:.25rem solid #ef4444 !important}.border-left-light{border-left:.25rem solid #f8f9fc !important}.border-bottom-light{border-bottom:.25rem solid #f8f9fc !important}.border-left-dark{border-left:.25rem solid #3a3b45 !important}.border-bottom-dark{border-bottom:.25rem solid #3a3b45 !important}.progress-sm{height:.5rem}.rotate-15{transform:rotate(15deg)}.rotate-n-15{transform:rotate(-15deg)}.dropdown .dropdown-menu{font-size:.875rem}.dropdown .dropdown-menu .dropdown-header{text-transform:uppercase;font-weight:800;font-size:.65rem;color:#858796}.dropdown.no-arrow .dropdown-toggle::after{display:none}.sidebar .nav-item.dropdown .dropdown-toggle::after,.topbar .nav-item.dropdown .dropdown-toggle::after{width:1rem;text-align:center;float:right;vertical-align:0;border:0;font-weight:900;content:"";font-family:"Font Awesome 5 Free"}.sidebar .nav-item.dropdown.show .dropdown-toggle::after,.topbar .nav-item.dropdown.show .dropdown-toggle::after{content:""}.sidebar .nav-item .nav-link,.topbar .nav-item .nav-link{position:relative}.sidebar .nav-item .nav-link .badge-counter,.topbar .nav-item .nav-link .badge-counter{position:absolute;transform:scale(0.7);transform-origin:top right;right:.25rem;margin-top:-0.25rem}.sidebar .nav-item .nav-link .img-profile,.topbar .nav-item .nav-link .img-profile{height:2rem;width:2rem}.topbar{height:56px}.topbar #sidebarToggleTop{height:2.5rem;width:2.5rem}.topbar #sidebarToggleTop:hover{background-color:#e3e6f0}.topbar #sidebarToggleTop:active{background-color:#d1d3e2}.topbar .navbar-search{width:25rem}.topbar .navbar-search input{font-size:.85rem;height:auto}.topbar .topbar-divider{width:0;border-right:1px solid #e2e8f0;height:calc(56px - 2rem);margin:auto 1rem}.topbar .nav-item .nav-link{height:56px;display:flex;align-items:center;padding:0 .75rem}.topbar .nav-item .nav-link:focus{outline:none}.topbar .nav-item:focus{outline:none}.topbar .dropdown{position:static}.topbar .dropdown .dropdown-menu{width:calc(100% - 30px);right:15px}.topbar .dropdown-list{padding:0;border:none;overflow:hidden}.topbar .dropdown-list .dropdown-header{background-color:#1e3a5f;border:1px solid #1e3a5f;padding-top:.75rem;padding-bottom:.75rem;color:#fff}.topbar .dropdown-list .dropdown-item{white-space:normal;padding-top:.5rem;padding-bottom:.5rem;border-left:1px solid #e2e8f0;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;line-height:1.3rem}.topbar .dropdown-list .dropdown-item .dropdown-list-image{position:relative;height:2.5rem;width:2.5rem}.topbar .dropdown-list .dropdown-item .dropdown-list-image img{height:2.5rem;width:2.5rem}.topbar .dropdown-list .dropdown-item .dropdown-list-image .status-indicator{background-color:#e3e6f0;height:.75rem;width:.75rem;border-radius:var(--radius-full);position:absolute;bottom:0;right:0;border:.125rem solid #fff}.topbar .dropdown-list .dropdown-item .text-truncate{max-width:10rem}.topbar .dropdown-list .dropdown-item:active{background-color:#e3e6f0;color:#2e2f37}@media(min-width: 576px){.topbar .dropdown{position:relative}.topbar .dropdown .dropdown-menu{width:auto;right:0}.topbar .dropdown-list{width:20rem !important}.topbar .dropdown-list .dropdown-item .text-truncate{max-width:13.375rem}}.topbar.navbar-dark .navbar-nav .nav-item .nav-link{color:hsla(0,0%,100%,.8)}.topbar.navbar-dark .navbar-nav .nav-item .nav-link:hover{color:#fff}.topbar.navbar-dark .navbar-nav .nav-item .nav-link:active{color:#fff}.topbar.navbar-light .navbar-nav .nav-item .nav-link{color:#b7b9cc}.topbar.navbar-light .navbar-nav .nav-item .nav-link:hover{color:#858796}.topbar.navbar-light .navbar-nav .nav-item .nav-link:active{color:#6e707e}.sidebar{min-height:100vh}.sidebar .nav-item{position:relative}.sidebar .nav-item:last-child{margin-bottom:1rem}.sidebar .nav-item .nav-link{text-align:center;padding:.75rem 1rem;width:64px}.sidebar .nav-item .nav-link span{font-size:.65rem;display:block}.sidebar .nav-item.active .nav-link{font-weight:700}.sidebar .nav-item .collapse{position:absolute;left:calc(64px + 30px/2);z-index:1;top:2px}.sidebar .nav-item .collapse .collapse-inner{border-radius:var(--border-radius);box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)}.sidebar .nav-item .collapsing{display:none;transition:none}.sidebar .nav-item .collapse .collapse-inner,.sidebar .nav-item .collapsing .collapse-inner{padding:.5rem 0;min-width:10rem;font-size:.875rem;margin:0 0 1rem 0}.sidebar .nav-item .collapse .collapse-inner .collapse-header,.sidebar .nav-item .collapsing .collapse-inner .collapse-header{margin:0;white-space:nowrap;padding:.5rem 1.5rem;text-transform:uppercase;font-weight:800;font-size:.65rem;color:#858796}.sidebar .nav-item .collapse .collapse-inner .collapse-item,.sidebar .nav-item .collapsing .collapse-inner .collapse-item{padding:.5rem 1rem;margin:0 .5rem;display:block;color:#2e2f37;text-decoration:none;border-radius:var(--border-radius);white-space:nowrap}.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,.sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover{background-color:#e3e6f0}.sidebar .nav-item .collapse .collapse-inner .collapse-item:active,.sidebar .nav-item .collapsing .collapse-inner .collapse-item:active{background-color:#d1d3e2}.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active{color:#1e3a5f;font-weight:700}.sidebar #sidebarToggle{width:2.5rem;height:2.5rem;text-align:center;margin-bottom:1rem;cursor:pointer}.sidebar #sidebarToggle::after{font-weight:900;content:"";font-family:"Font Awesome 5 Free";margin-right:.1rem}.sidebar #sidebarToggle:hover{text-decoration:none}.sidebar #sidebarToggle:focus{outline:none}.sidebar.toggled{width:0 !important;overflow:hidden}.sidebar.toggled #sidebarToggle::after{content:"";font-family:"Font Awesome 5 Free";margin-left:.25rem}.sidebar.toggled .sidebar-card{display:none}.sidebar .sidebar-brand{height:56px;text-decoration:none;font-size:1rem;font-weight:800;padding:1.5rem 1rem;text-align:center;text-transform:uppercase;letter-spacing:.05rem;z-index:1}.sidebar .sidebar-brand .sidebar-brand-icon i{font-size:2rem}.sidebar .sidebar-brand .sidebar-brand-text{display:none}.sidebar hr.sidebar-divider{margin:0 1rem 1rem}.sidebar .sidebar-heading{text-align:center;padding:0 1rem;font-weight:800;font-size:.65rem;text-transform:uppercase}.sidebar .sidebar-card{display:flex;flex-direction:column;align-items:center;font-size:13px;border-radius:var(--border-radius);color:hsla(0,0%,100%,.8);margin-left:1rem;margin-right:1rem;margin-bottom:1rem;padding:1rem;background-color:rgba(0,0,0,.1)}.sidebar .sidebar-card .sidebar-card-illustration{height:3rem;display:block}.sidebar .sidebar-card .sidebar-card-title{font-weight:bold}.sidebar .sidebar-card p{font-size:.75rem;color:hsla(0,0%,100%,.5)}@media(min-width: 768px){.sidebar .nav-item .collapse{position:relative;left:0;z-index:1;top:0;animation:none}.sidebar .nav-item .collapse .collapse-inner{border-radius:var(--border-radius);box-shadow:none}.sidebar .nav-item .collapsing{display:block;transition:height .35s ease}.sidebar .nav-item .collapse,.sidebar .nav-item .collapsing{margin:0 1rem}.sidebar .nav-item .nav-link{display:block;width:100%;text-align:left;padding:1rem;width:var(--sidebar-width)}.sidebar .nav-item .nav-link i{font-size:.85rem;margin-right:.25rem}.sidebar .nav-item .nav-link span{font-size:.85rem;display:inline}.sidebar .nav-item .nav-link[data-toggle=collapse]::after{width:1rem;text-align:center;float:right;vertical-align:0;border:0;font-weight:900;content:"";font-family:"Font Awesome 5 Free"}.sidebar .nav-item .nav-link[data-toggle=collapse].collapsed::after{content:""}.sidebar .sidebar-brand .sidebar-brand-icon i{font-size:2rem}.sidebar .sidebar-brand .sidebar-brand-text{display:inline}.sidebar .sidebar-heading{text-align:left}.sidebar.toggled{overflow:visible;width:64px !important}.sidebar.toggled .nav-item .collapse{position:absolute;left:calc(64px + 30px/2);z-index:1;top:2px;animation-name:growIn;animation-duration:200ms;animation-timing-function:transform cubic-bezier(0.18, 1.25, 0.4, 1),opacity cubic-bezier(0, 1, 0.4, 1)}.sidebar.toggled .nav-item .collapse .collapse-inner{box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15);border-radius:var(--border-radius)}.sidebar.toggled .nav-item .collapsing{display:none;transition:none}.sidebar.toggled .nav-item .collapse,.sidebar.toggled .nav-item .collapsing{margin:0}.sidebar.toggled .nav-item:last-child{margin-bottom:1rem}.sidebar.toggled .nav-item .nav-link{text-align:center;padding:.75rem 1rem;width:64px}.sidebar.toggled .nav-item .nav-link span{font-size:.65rem;display:block}.sidebar.toggled .nav-item .nav-link i{margin-right:0}.sidebar.toggled .nav-item .nav-link[data-toggle=collapse]::after{display:none}.sidebar.toggled .sidebar-brand .sidebar-brand-icon i{font-size:2rem}.sidebar.toggled .sidebar-brand .sidebar-brand-text{display:none}.sidebar.toggled .sidebar-heading{text-align:center}}.sidebar-light .sidebar-brand{color:#5a5c69}.sidebar-light hr.sidebar-divider{border-top:1px solid #e3e6f0}.sidebar-light .sidebar-heading{color:#858796}.sidebar-light .nav-item .nav-link{color:#6e707e}.sidebar-light .nav-item .nav-link i{color:#b7b9cc}.sidebar-light .nav-item .nav-link:active,.sidebar-light .nav-item .nav-link:focus,.sidebar-light .nav-item .nav-link:hover{color:#5a5c69}.sidebar-light .nav-item .nav-link:active i,.sidebar-light .nav-item .nav-link:focus i,.sidebar-light .nav-item .nav-link:hover i{color:#5a5c69}.sidebar-light .nav-item .nav-link[data-toggle=collapse]::after{color:#858796}.sidebar-light .nav-item.active .nav-link{color:#5a5c69}.sidebar-light .nav-item.active .nav-link i{color:#5a5c69}.sidebar-light #sidebarToggle{background-color:#e3e6f0}.sidebar-light #sidebarToggle::after{color:#858796}.sidebar-light #sidebarToggle:hover{background-color:#d1d3e2}.sidebar-dark .sidebar-brand{color:#fff}.sidebar-dark hr.sidebar-divider{border-top:1px solid hsla(0,0%,100%,.15)}.sidebar-dark .sidebar-heading{color:hsla(0,0%,100%,.4)}.sidebar-dark .nav-item .nav-link{color:hsla(0,0%,100%,.8)}.sidebar-dark .nav-item .nav-link i{color:hsla(0,0%,100%,.3)}.sidebar-dark .nav-item .nav-link:active,.sidebar-dark .nav-item .nav-link:focus,.sidebar-dark .nav-item .nav-link:hover{color:#fff}.sidebar-dark .nav-item .nav-link:active i,.sidebar-dark .nav-item .nav-link:focus i,.sidebar-dark .nav-item .nav-link:hover i{color:#fff}.sidebar-dark .nav-item .nav-link[data-toggle=collapse]::after{color:hsla(0,0%,100%,.5)}.sidebar-dark .nav-item.active .nav-link{color:#fff}.sidebar-dark .nav-item.active .nav-link i{color:#fff}.sidebar-dark #sidebarToggle{background-color:hsla(0,0%,100%,.2)}.sidebar-dark #sidebarToggle::after{color:hsla(0,0%,100%,.5)}.sidebar-dark #sidebarToggle:hover{background-color:hsla(0,0%,100%,.25)}.sidebar-dark.toggled #sidebarToggle::after{color:hsla(0,0%,100%,.5)}.btn-circle{border-radius:var(--radius-full);height:2.5rem;width:2.5rem;font-size:1rem;display:inline-flex;align-items:center;justify-content:center}.btn-circle.btn-sm{height:1.8rem;width:1.8rem;font-size:.75rem}.btn-circle.btn-lg{height:3.5rem;width:3.5rem;font-size:1.35rem}.btn-icon-split{padding:0;overflow:hidden;display:inline-flex;align-items:stretch;justify-content:center}.btn-icon-split .icon{background:rgba(0,0,0,.15);display:inline-block;padding:.375rem .75rem}.btn-icon-split .text{display:inline-block;padding:.375rem .75rem}.btn-icon-split.btn-sm .icon{padding:.25rem .5rem}.btn-icon-split.btn-sm .text{padding:.25rem .5rem}.btn-icon-split.btn-lg .icon{padding:.5rem 1rem}.btn-icon-split.btn-lg .text{padding:.5rem 1rem}.card .card-header .dropdown{line-height:1}.card .card-header .dropdown .dropdown-menu{line-height:1.5}.card .card-header[data-toggle=collapse]{text-decoration:none;position:relative;padding:.75rem 3.25rem .75rem 1.25rem}.card .card-header[data-toggle=collapse]::after{position:absolute;right:0;top:0;padding-right:1.725rem;line-height:51px;font-weight:900;content:"";font-family:"Font Awesome 5 Free";color:#b7b9cc}.card .card-header[data-toggle=collapse].collapsed{border-radius:var(--card-border-radius)}.card .card-header[data-toggle=collapse].collapsed::after{content:""}.chart-area{position:relative;height:10rem;width:100%}@media(min-width: 768px){.chart-area{height:20rem}}.chart-bar{position:relative;height:10rem;width:100%}@media(min-width: 768px){.chart-bar{height:20rem}}.chart-pie{position:relative;height:15rem;width:100%}@media(min-width: 768px){.chart-pie{height:calc(20rem - 43px) !important}}.bg-login-image{background:url("https://source.unsplash.com/user/erondu/1600x900");background-position:center;background-size:cover}.bg-register-image{background:url("https://source.unsplash.com/user/erondu/1600x900");background-position:center;background-size:cover}.bg-password-image{background:url("https://source.unsplash.com/user/erondu/1600x900");background-position:center;background-size:cover}form.user .custom-checkbox.small label{line-height:1.5rem}form.user .form-control-user{font-size:.8rem;border-radius:var(--radius-full);padding:1.5rem 1rem}form.user .btn-user{font-size:.8rem;border-radius:var(--radius-full);padding:.75rem 1rem}.btn-google{background-color:#ea4335;color:#fff;border-color:#ea4335}.btn-google:hover:not(:disabled){background-color:rgb(216.45,61.975,49.025);border-color:rgb(210.6,60.3,47.7);color:#fff}.btn-google:focus{box-shadow:0 0 0 .2rem rgba(234,67,53,.5)}.btn-google:disabled{opacity:.65;cursor:not-allowed}.btn-facebook{background-color:#3b5998;color:#fff;border-color:#3b5998}.btn-facebook:hover:not(:disabled){background-color:rgb(54.575,82.325,140.6);border-color:rgb(53.1,80.1,136.8);color:#fff}.btn-facebook:focus{box-shadow:0 0 0 .2rem rgba(59,89,152,.5)}.btn-facebook:disabled{opacity:.65;cursor:not-allowed}.error{color:#3a3b45;font-size:7rem;position:relative;line-height:1;width:12.5rem}@keyframes noise-anim{0%{clip:rect(53px, 9999px, 72px, 0)}5%{clip:rect(96px, 9999px, 30px, 0)}10%{clip:rect(7px, 9999px, 61px, 0)}15%{clip:rect(32px, 9999px, 85px, 0)}20%{clip:rect(46px, 9999px, 10px, 0)}25%{clip:rect(42px, 9999px, 84px, 0)}30%{clip:rect(50px, 9999px, 94px, 0)}35%{clip:rect(99px, 9999px, 53px, 0)}40%{clip:rect(93px, 9999px, 82px, 0)}45%{clip:rect(12px, 9999px, 96px, 0)}50%{clip:rect(86px, 9999px, 10px, 0)}55%{clip:rect(49px, 9999px, 69px, 0)}60%{clip:rect(22px, 9999px, 95px, 0)}65%{clip:rect(75px, 9999px, 17px, 0)}70%{clip:rect(79px, 9999px, 95px, 0)}75%{clip:rect(81px, 9999px, 20px, 0)}80%{clip:rect(80px, 9999px, 37px, 0)}85%{clip:rect(33px, 9999px, 91px, 0)}90%{clip:rect(69px, 9999px, 61px, 0)}95%{clip:rect(79px, 9999px, 93px, 0)}100%{clip:rect(49px, 9999px, 49px, 0)}}.error:after{content:attr(data-text);position:absolute;left:2px;text-shadow:-1px 0 #ef4444;top:0;color:#3a3b45;background:#f8f9fc;overflow:hidden;clip:rect(0, 900px, 0, 0);animation:noise-anim 2s infinite linear alternate-reverse}@keyframes noise-anim-2{0%{clip:rect(98px, 9999px, 88px, 0)}5%{clip:rect(61px, 9999px, 80px, 0)}10%{clip:rect(79px, 9999px, 24px, 0)}15%{clip:rect(94px, 9999px, 3px, 0)}20%{clip:rect(33px, 9999px, 94px, 0)}25%{clip:rect(81px, 9999px, 25px, 0)}30%{clip:rect(82px, 9999px, 66px, 0)}35%{clip:rect(27px, 9999px, 100px, 0)}40%{clip:rect(24px, 9999px, 22px, 0)}45%{clip:rect(42px, 9999px, 61px, 0)}50%{clip:rect(78px, 9999px, 89px, 0)}55%{clip:rect(24px, 9999px, 14px, 0)}60%{clip:rect(17px, 9999px, 96px, 0)}65%{clip:rect(25px, 9999px, 98px, 0)}70%{clip:rect(7px, 9999px, 11px, 0)}75%{clip:rect(52px, 9999px, 22px, 0)}80%{clip:rect(56px, 9999px, 15px, 0)}85%{clip:rect(50px, 9999px, 3px, 0)}90%{clip:rect(52px, 9999px, 100px, 0)}95%{clip:rect(13px, 9999px, 13px, 0)}100%{clip:rect(61px, 9999px, 5px, 0)}}.error:before{content:attr(data-text);position:absolute;left:-2px;text-shadow:1px 0 #3b82f6;top:0;color:#3a3b45;background:#f8f9fc;overflow:hidden;clip:rect(0, 900px, 0, 0);animation:noise-anim-2 3s infinite linear alternate-reverse}footer.sticky-footer{padding:2rem 0;flex-shrink:0}footer.sticky-footer .copyright{line-height:1;font-size:.8rem}body.sidebar-toggled footer.sticky-footer{width:100%}a:not([href]):not([tabindex]){color:var(--text-inverse);text-decoration:none}a:not([href])::-moz-placeholder{color:var(--text-inverse);text-decoration:none}a:not([href])::placeholder{color:var(--text-inverse);text-decoration:none}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;font-size:14px;line-height:1.5;background-color:#f1f5f9;color:var(--text-primary)}body::-webkit-scrollbar{width:8px;height:8px}body::-webkit-scrollbar-track{background:#f1f5f9}body::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:var(--radius-full)}body::-webkit-scrollbar-thumb:hover{background:rgb(203.4,208.8,216)}h1,h2,h3,h4,h5,h6{color:#1e3a5f;font-weight:700}a{color:#3b82f6;text-decoration:none;transition:color 150ms ease}a:hover{color:rgb(53.1,117,221.4)}.interface{background-color:var(--surface-raised);margin-bottom:48px;max-width:100%;padding:24px;border:1px solid #e2e8f0;box-shadow:0 1px 3px 0 color-mix(in srgb, var(--text-primary) 12%, transparent),0 1px 2px 0 color-mix(in srgb, var(--text-primary) 8%, transparent)}.interface-header{background-color:#1e3a5f;color:var(--color-primary-text);padding:8px 16px;font-size:12px;margin:-24px;margin-bottom:24px}.breadcrumb-custom{font-size:14px;color:var(--text-muted);margin-bottom:0}.page-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.page-header-right{display:flex;align-items:center;gap:12px}.page-title{font-size:20px;font-weight:700;color:var(--color-heading, var(--text-primary));font-family:"Nunito",sans-serif;margin:0;padding:0;border-bottom:none}.section{margin-bottom:24px}.section-title{font-size:13px;font-weight:700;color:#1e3a5f;margin-bottom:16px;border-left:4px solid #3b82f6;padding-left:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--border-radius-input);border:1px solid rgba(0,0,0,0);cursor:pointer;transition:all 150ms ease;text-decoration:none}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--border-radius-input);border:1px solid rgba(0,0,0,0);cursor:pointer;transition:all 150ms ease;text-decoration:none}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--color-primary, #1e3a5f);color:var(--color-primary-text);border-color:var(--color-primary, #1e3a5f)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover, rgb(28.5, 55.1, 90.25));border-color:var(--color-primary-hover, rgb(28.5, 55.1, 90.25))}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--border-radius-input);border:1px solid rgba(0,0,0,0);cursor:pointer;transition:all 150ms ease;text-decoration:none}.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background-color:var(--surface-raised);color:var(--color-primary, #1e3a5f);border-color:var(--color-primary, #1e3a5f)}.btn-secondary:hover:not(:disabled){background-color:#f1f5f9}.btn-accent{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--border-radius-input);border:1px solid rgba(0,0,0,0);cursor:pointer;transition:all 150ms ease;text-decoration:none}.btn-accent:disabled{opacity:.6;cursor:not-allowed}.btn-accent{background-color:#22c55e;color:var(--color-primary-text);border-color:#22c55e}.btn-accent:hover:not(:disabled){background-color:rgb(32.3,187.15,89.3);border-color:rgb(32.3,187.15,89.3)}.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--border-radius-input);border:1px solid rgba(0,0,0,0);cursor:pointer;transition:all 150ms ease;text-decoration:none}.btn-danger:disabled{opacity:.6;cursor:not-allowed}.btn-danger{background-color:var(--surface-raised);color:#ef4444;border-color:#ef4444}.btn-danger:hover:not(:disabled){background-color:#ef4444;color:var(--color-primary-text)}.btn-sm{padding:4px 8px;font-size:12px}.btn-lg{padding:16px 24px;font-size:16px}.form-group{margin-bottom:16px}.form-label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:4px}.form-control{width:100%;padding:8px 16px;border:1px solid #e2e8f0;border-radius:var(--border-radius-input);background-color:var(--surface-raised);transition:all 150ms ease}.form-control:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}.form-control:disabled{background-color:#f1f5f9;cursor:not-allowed}.form-control::-moz-placeholder{color:var(--text-muted)}.form-control::placeholder{color:var(--text-muted)}.form-control.is-invalid{border-color:#ef4444}.form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(239,68,68,.2)}.form-error{font-size:12px;color:#ef4444;margin-top:4px}.table-custom{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--card-border-radius);font-size:13px}.table-custom thead tr:first-child th:first-child{border-top-left-radius:var(--card-border-radius)}.table-custom thead tr:first-child th:last-child{border-top-right-radius:var(--card-border-radius)}.table-custom tbody tr:last-child td:first-child{border-bottom-left-radius:var(--card-border-radius)}.table-custom tbody tr:last-child td:last-child{border-bottom-right-radius:var(--card-border-radius)}.table-custom th,.table-custom td{border:0;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0;padding:8px 16px;text-align:left}.table-custom th:first-child,.table-custom td:first-child{border-left:1px solid #e2e8f0}.table-custom thead tr:first-child th{border-top:1px solid #e2e8f0}.table-custom th{background-color:#f1f5f9;font-weight:700;color:#1e3a5f}.table-custom tbody tr:hover{background-color:#f1f5f9}.card{background-color:var(--surface-raised);border:1px solid #e2e8f0;border-radius:var(--card-border-radius);box-shadow:0 1px 3px 0 color-mix(in srgb, var(--text-primary) 12%, transparent),0 1px 2px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);padding:16px}.card-hover{transition:box-shadow 200ms ease}.card-hover:hover{box-shadow:0 4px 6px -1px color-mix(in srgb, var(--text-primary) 12%, transparent),0 2px 4px -1px color-mix(in srgb, var(--text-primary) 8%, transparent)}.kpi-card{background-color:var(--surface-raised);border:1px solid #e2e8f0;border-radius:var(--card-border-radius);box-shadow:0 1px 3px 0 color-mix(in srgb, var(--text-primary) 12%, transparent),0 1px 2px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);padding:16px;height:120px;border-left:4px solid #22c55e;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex-wrap:nowrap}.kpi-label{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.kpi-value{font-size:24px;font-weight:700;color:#1e3a5f}.kanban-board{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:16px;height:600px;padding:16px;overflow-x:auto}.kanban-board::-webkit-scrollbar{width:8px;height:8px}.kanban-board::-webkit-scrollbar-track{background:#f1f5f9}.kanban-board::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:var(--radius-full)}.kanban-board::-webkit-scrollbar-thumb:hover{background:rgb(203.4,208.8,216)}.kanban-column{flex:1;min-width:250px;border:1px dashed #e2e8f0;background-color:color-mix(in srgb, var(--surface-raised) 45%, transparent);padding:8px;border-radius:var(--border-radius-input)}.kanban-column-title{font-weight:700;font-size:12px;color:#1e3a5f;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.kanban-card{background-color:var(--surface-raised);border:1px solid #e2e8f0;border-radius:var(--card-border-radius);box-shadow:0 1px 3px 0 color-mix(in srgb, var(--text-primary) 12%, transparent),0 1px 2px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);padding:8px;margin-bottom:8px;cursor:grab}.kanban-card:active{cursor:grabbing}.kanban-card.dragging{opacity:.8;box-shadow:0 4px 6px -1px color-mix(in srgb, var(--text-primary) 12%, transparent),0 2px 4px -1px color-mix(in srgb, var(--text-primary) 8%, transparent)}.timeline-container{padding:16px}.timeline-item{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;margin-bottom:24px}.timeline-marker{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-primary-text);margin-right:16px;flex-shrink:0}.timeline-line{width:2px;flex-grow:1;background-color:#e2e8f0;margin-top:8px}.timeline-content{background-color:var(--surface-raised);border:1px solid #e2e8f0;border-radius:var(--card-border-radius);box-shadow:0 1px 3px 0 color-mix(in srgb, var(--text-primary) 12%, transparent),0 1px 2px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);flex-grow:1;padding:16px}.chart-container{background-color:var(--surface-raised);border:1px solid #e2e8f0;border-radius:var(--card-border-radius);box-shadow:0 1px 3px 0 color-mix(in srgb, var(--text-primary) 12%, transparent),0 1px 2px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);padding:16px;width:100%;min-height:240px;aspect-ratio:16/9;border-top:3px solid #3b82f6}.chart-empty{display:grid;place-items:center;text-align:center;min-height:140px;aspect-ratio:auto;color:var(--text-muted);font-size:var(--text-sm)}.modal-overlay{position:fixed;inset:0;background-color:color-mix(in srgb, var(--text-primary) 50%, transparent);z-index:1040;display:flex;justify-content:center;align-items:center;padding:16px}.modal-content{background-color:var(--surface-overlay);border-radius:var(--card-border-radius);box-shadow:0 10px 15px -3px color-mix(in srgb, var(--text-primary) 12%, transparent),0 4px 6px -2px color-mix(in srgb, var(--text-primary) 8%, transparent);max-height:90vh;overflow:auto;width:100%}.modal-sm{max-width:400px}.modal-md{max-width:500px}.modal-lg{max-width:700px}.modal-xl{max-width:900px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e2e8f0}.modal-title{font-size:16px;font-weight:700;color:#1e3a5f}.modal-body{padding:16px}.modal-footer{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:nowrap;gap:8px;padding:16px;border-top:1px solid #e2e8f0}.modal-footer-buttons{display:flex;justify-content:flex-end;gap:10px;width:100%}.modal-btn-cancel{display:inline-flex;align-items:center;gap:6px;padding:7px 18px;font-size:14px;font-weight:500;font-family:"Nunito",sans-serif;color:var(--text-secondary);background-color:var(--surface-raised);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}.modal-btn-cancel:hover:not(:disabled){background-color:var(--surface-inset);border-color:var(--border-color-strong)}.modal-btn-cancel:disabled{opacity:.6;cursor:not-allowed}.modal-btn-submit{display:inline-flex;align-items:center;gap:6px;padding:7px 18px;font-size:14px;font-weight:500;font-family:"Nunito",sans-serif;color:var(--surface-raised);background-color:var(--color-primary);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s}.modal-btn-submit:hover:not(:disabled){background-color:var(--color-primary-hover)}.modal-btn-submit:disabled{opacity:.6;cursor:not-allowed}.modal-btn-delete{display:inline-flex;align-items:center;gap:6px;padding:7px 18px;font-size:14px;font-weight:500;font-family:"Nunito",sans-serif;color:var(--surface-raised);background-color:var(--color-danger);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s}.modal-btn-delete:hover:not(:disabled){background-color:var(--color-danger-hover)}.modal-btn-delete:disabled{opacity:.6;cursor:not-allowed}.modal-overlay{font-family:"Nunito",sans-serif}.modal-content{font-family:"Nunito",sans-serif}.modal-header{padding:16px 20px}.modal-title{font-size:16px;font-weight:700;color:var(--text-secondary)}.modal-body{padding:16px 20px}.modal-footer{padding:12px 20px}.dg-export-buttons{display:flex;align-items:center;gap:6px}.dg-export-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;font-size:14px;color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}.dg-export-btn:hover{background-color:var(--surface-inset);border-color:var(--border-color-strong)}.dg-export-btn.export-excel:hover{color:var(--color-success-text);border-color:var(--color-success-text)}.dg-export-btn.export-csv:hover{color:var(--color-primary);border-color:var(--color-primary)}.dg-export-btn.export-pdf:hover{color:var(--color-danger);border-color:var(--color-danger)}.export-modal-options{display:flex;flex-direction:column;gap:12px;padding:8px 0}.export-option-btn{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:14px;font-weight:500;font-family:"Nunito",sans-serif;color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;text-align:left;width:100%}.export-option-btn:hover{background-color:var(--color-primary-muted);border-color:var(--color-primary);color:var(--color-primary)}.export-option-btn .export-option-icon{font-size:18px;width:24px;text-align:center}.export-option-btn .export-option-text{flex:1}.export-option-btn .export-option-text .export-option-title{font-weight:600}.export-option-btn .export-option-text .export-option-desc{font-size:12px;color:var(--text-muted);font-weight:400}.dropzone{border:2px dashed #1e3a5f;border-radius:var(--card-border-radius);padding:32px;text-align:center;cursor:pointer;transition:all 150ms ease}.dropzone:hover,.dropzone.active{border-color:#3b82f6;background-color:rgba(59,130,246,.05)}.dropzone-text{color:#1e3a5f;font-weight:700}.badge{display:inline-flex;align-items:center;padding:4px 8px;font-size:12px;font-weight:500;border-radius:var(--border-radius-input);background-color:#1e3a5f;color:var(--color-primary-text)}.badge-primary{background-color:#1e3a5f}.badge-secondary{background-color:#3b82f6}.badge-accent{background-color:#22c55e}.badge-warning{background-color:#f59e0b}.badge-error{background-color:#ef4444}.progress{width:100%;height:6px;background-color:var(--border-color);border-radius:var(--radius-full);overflow:hidden}.progress .bar{height:100%;border-radius:var(--radius-full);transition:width 300ms ease}.progress-bar{height:100%;border-radius:var(--radius-full);transition:width 300ms ease}.filters{border:1px solid #e2e8f0;background-color:#f1f5f9;padding:16px;margin-bottom:24px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:16px}.filters-label{font-size:13px;color:var(--text-secondary)}.text-primary{color:#1e3a5f}.text-secondary{color:#3b82f6}.text-accent{color:#22c55e}.text-error{color:#ef4444}.dg-card{background:var(--surface-raised);border-radius:var(--card-border-radius);overflow:hidden;box-shadow:color-mix(in srgb, var(--border-color) 65%, transparent) 0 1px 4px;margin-bottom:24px;font-family:"Nunito",sans-serif;color:var(--text-secondary);font-size:14px;line-height:1.5}.dg-card-header{display:flex;flex-direction:column;gap:16px;padding:20px;border-bottom:dashed 1px var(--surface-sunken)}.dg-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.dg-header-actions{display:flex;align-items:center;gap:8px}.dg-filters-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dg-filter-label{font-size:14px;font-weight:600;color:var(--text-secondary);white-space:nowrap}.dg-filter-select,.dg-pagesize-select{border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:6px 28px 6px 10px;font-size:14px;font-family:"Nunito",sans-serif;color:var(--text-secondary);background:var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%236b7280%27 d=%27M6 8L1 3h10z%27/%3E%3C/svg%3E") no-repeat right 8px center;background-size:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none}.dg-filter-select:focus,.dg-pagesize-select:focus{border-color:#3b82f6}.dg-pagesize-select{width:64px;text-align:center}.dg-btn-new{display:inline-flex;align-items:center;gap:6px;padding:7px 18px;font-size:14px;font-weight:500;font-family:"Nunito",sans-serif;color:var(--surface-raised);background-color:var(--color-primary);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s}.dg-btn-new:hover{background-color:var(--color-primary-hover)}.dg-card-body{padding:0}.dg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;border-radius:var(--card-border-radius)}.dg-table>thead>tr:first-child>.dg-th:first-child,.dg-table>thead>tr:first-child>.dg-th-checkbox:first-child{border-top-left-radius:var(--card-border-radius)}.dg-table>thead>tr:first-child>.dg-th:last-child,.dg-table>thead>tr:first-child>.dg-th-checkbox:last-child{border-top-right-radius:var(--card-border-radius)}.dg-table>tbody>tr:last-child>.dg-td:first-child,.dg-table>tbody>tr:last-child>.dg-td-checkbox:first-child{border-bottom-left-radius:var(--card-border-radius)}.dg-table>tbody>tr:last-child>.dg-td:last-child,.dg-table>tbody>tr:last-child>.dg-td-checkbox:last-child{border-bottom-right-radius:var(--card-border-radius)}.dg-th,.dg-th-checkbox{padding:8px 8px 8px 18px;text-align:left;text-transform:uppercase;font-size:11px;font-weight:700;color:var(--text-secondary);background-color:var(--surface-inset);border-bottom:1px solid var(--surface-sunken);white-space:nowrap}.dg-th-sortable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dg-th-sortable:hover{color:var(--color-primary)}.dg-th-content{display:inline-flex;align-items:center;gap:4px}.dg-sort-icon{font-size:9px;opacity:.7}.dg-th-checkbox{width:40px;text-align:center}.dg-td,.dg-td-checkbox{padding:12px 10px 12px 18px;vertical-align:middle;border-bottom:1px solid var(--surface-sunken);color:var(--text-secondary);font-size:14px}.dg-td-checkbox{width:40px;text-align:center}.dg-td-empty{padding:40px 18px;text-align:center;color:var(--text-muted);font-size:14px}.dg-row{transition:background-color .1s}.dg-row:hover{background-color:var(--surface-inset)}.dg-checkbox{width:16px;height:16px;accent-color:#3b82f6;cursor:pointer}.dg-actions{display:flex;gap:6px;align-items:center}.dg-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:31.5px;height:31.5px;border-radius:var(--radius-sm);border:.667px solid color-mix(in srgb, var(--text-primary) 15%, transparent);background:rgba(0,0,0,0);cursor:pointer;font-size:15px;color:var(--text-primary);transition:all .15s}.dg-btn-icon:hover{background:var(--surface-inset);border-color:color-mix(in srgb, var(--text-primary) 15%, transparent)}.btn-icon-info{color:var(--text-primary)}.btn-icon-warning{color:var(--text-primary)}.btn-icon-danger{color:var(--text-primary)}.dg-card-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:none}.dg-footer-right{display:flex;align-items:center;gap:12px}.dg-pagination-info{font-size:14px;color:var(--text-muted)}.dg-pagination{display:flex;gap:4px}.dg-page-btn{display:inline-flex;align-items:center;justify-content:center;width:29.5px;height:29.5px;padding:0;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .15s}.dg-page-btn:hover:not(:disabled){background:var(--surface-inset)}.dg-page-btn:disabled{opacity:.5;cursor:default}.dg-page-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--surface-raised)}.dg-page-active:hover:not(:disabled){background:var(--color-primary-hover)}.badge-outline-success{display:inline-block;padding:2.75px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;line-height:1;border:1px solid var(--color-success);color:var(--color-success-on-surface);background:rgba(0,0,0,0)}.badge-outline-warning{display:inline-block;padding:2.75px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;line-height:1;border:1px solid var(--color-warning);color:var(--color-warning-on-surface);background:rgba(0,0,0,0)}.badge-outline-danger{display:inline-block;padding:2.75px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;line-height:1;border:1px solid var(--color-danger);color:var(--color-danger-on-surface);background:rgba(0,0,0,0)}.badge-outline-info{display:inline-block;padding:2.75px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;line-height:1;border:1px solid var(--color-primary);color:var(--color-primary-on-surface);background:rgba(0,0,0,0)}.badge-soft-success{display:inline-block;padding:2.75px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;line-height:1;color:var(--color-success-on-muted);background:var(--color-success-muted)}.badge-soft-warning{display:inline-block;padding:2.75px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;line-height:1;color:var(--color-warning-on-muted);background:var(--color-warning-muted)}.badge-soft-danger{display:inline-block;padding:2.75px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;line-height:1;color:var(--color-danger-on-muted);background:var(--color-danger-muted)}.badge-soft-info{display:inline-block;padding:2.75px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;line-height:1;color:var(--color-primary-on-muted);background:var(--color-primary-muted)}.text-warning{color:#f59e0b}.bg-primary{background-color:#1e3a5f}.bg-secondary{background-color:#3b82f6}.bg-accent{background-color:#22c55e}.bg-error{background-color:#ef4444}.bg-warning{background-color:#f59e0b}.react-datepicker-wrapper{width:100%}.react-datepicker__input-container input{width:100%;padding:8px 16px;border:1px solid #e2e8f0;border-radius:var(--border-radius-input);background-color:var(--surface-raised);transition:all 150ms ease}.react-datepicker__input-container input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}.react-datepicker__input-container input:disabled{background-color:#f1f5f9;cursor:not-allowed}.react-datepicker__input-container input::-moz-placeholder{color:var(--text-muted)}.react-datepicker__input-container input::placeholder{color:var(--text-muted)}.react-datepicker__input-container input.is-invalid{border-color:#ef4444}.react-datepicker__input-container input.is-invalid:focus{box-shadow:0 0 0 3px rgba(239,68,68,.2)}@media(min-width: 1025px){.form-control,.react-datepicker__input-container input{font-size:13px}}[data-bs-theme=dark] .dg-card{background-color:var(--card-bg, var(--surface-raised));color:var(--color-text, var(--border-color));box-shadow:0 1px 4px color-mix(in srgb, var(--text-primary) 32%, transparent)}[data-bs-theme=dark] .dg-card-header{border-bottom-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .dg-filter-label{color:var(--color-text, var(--border-color))}[data-bs-theme=dark] .dg-filter-select,[data-bs-theme=dark] .dg-pagesize-select{background-color:var(--color-form-control-bg, var(--text-secondary));border-color:var(--color-form-control-border, var(--text-secondary));color:var(--color-form-control-text, var(--border-color))}[data-bs-theme=dark] .dg-btn-new{background-color:var(--color-primary);color:var(--surface-raised)}[data-bs-theme=dark] .dg-th,[data-bs-theme=dark] .dg-th-checkbox{background-color:var(--surface-raised);color:var(--color-text, var(--border-color));border-bottom-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .dg-td,[data-bs-theme=dark] .dg-td-checkbox{color:var(--color-text, var(--border-color));border-bottom-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .dg-td-empty{color:var(--color-muted, var(--text-muted))}[data-bs-theme=dark] .dg-row:hover{background-color:color-mix(in srgb, var(--surface-raised) 8%, transparent)}[data-bs-theme=dark] .dg-btn-icon{color:var(--color-text, var(--border-color));border-color:color-mix(in srgb, var(--surface-raised) 15%, transparent)}[data-bs-theme=dark] .dg-btn-icon:hover{background:color-mix(in srgb, var(--surface-raised) 8%, transparent)}[data-bs-theme=dark] .btn-icon-info,[data-bs-theme=dark] .btn-icon-warning,[data-bs-theme=dark] .btn-icon-danger{color:var(--color-text, var(--border-color))}[data-bs-theme=dark] .dg-card-footer{border-top-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .dg-pagination-info{color:var(--color-muted, var(--text-muted))}[data-bs-theme=dark] .dg-page-btn{background:var(--card-bg, var(--surface-raised));border-color:var(--color-border, var(--border-color-strong));color:var(--color-text, var(--border-color))}[data-bs-theme=dark] .dg-page-btn:hover:not(:disabled){background:color-mix(in srgb, var(--surface-raised) 8%, transparent)}[data-bs-theme=dark] .dg-page-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--surface-raised)}[data-bs-theme=dark] .dg-page-active:hover:not(:disabled){background:var(--color-primary-hover)}[data-bs-theme=dark] .page-title{color:var(--color-heading, var(--border-color))}[data-bs-theme=dark] .breadcrumb-custom{color:var(--color-muted, var(--text-muted))}[data-bs-theme=dark] .interface{background-color:var(--card-bg, var(--surface-raised));border-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .modal-content{background-color:var(--card-bg, var(--surface-raised));color:var(--color-text, var(--border-color))}[data-bs-theme=dark] .modal-header{border-bottom-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .modal-title{color:var(--color-text, var(--border-color))}[data-bs-theme=dark] .modal-body{color:var(--color-text, var(--border-color))}[data-bs-theme=dark] .modal-footer{border-top-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .modal-btn-cancel{background-color:var(--card-bg, var(--surface-raised));color:var(--color-text, var(--border-color));border-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .modal-btn-cancel:hover:not(:disabled){background-color:color-mix(in srgb, var(--surface-raised) 8%, transparent)}[data-bs-theme=dark] .modal-btn-submit{background-color:var(--color-primary);color:var(--surface-raised)}[data-bs-theme=dark] .modal-btn-delete{background-color:var(--color-danger);color:var(--surface-raised)}[data-bs-theme=dark] .dg-export-btn{background:var(--card-bg, var(--surface-raised));color:var(--color-text, var(--border-color));border-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .dg-export-btn:hover{background:color-mix(in srgb, var(--surface-raised) 8%, transparent)}[data-bs-theme=dark] .export-option-btn{background:var(--card-bg, var(--surface-raised));color:var(--color-text, var(--border-color));border-color:var(--color-border, var(--border-color-strong))}[data-bs-theme=dark] .export-option-btn:hover{background-color:color-mix(in srgb, var(--color-primary) 30%, transparent);border-color:var(--color-primary)}[data-bs-theme=dark] .export-option-btn .export-option-desc{color:var(--color-muted, var(--text-muted))}
/* =========================================================================
   CAPA DE MAQUETA DE PANTALLAS — Spartane DoIT
   Fuente: PLAN-REDISENO-PANTALLAS/_fuente-mejora-diseno-limpio.html (líneas 1-293)

   QUÉ FIJA LA PLANTILLA: estructura, espaciado, tipografía, jerarquía y la
   SEMÁNTICA del color.
   QUÉ APORTA EL PROYECTO: los VALORES de marca, que entran por los tokens del
   contrato (--color-primary, --surface-*, --text-*, --sidebar-*) que
   src/assets/_theme.css ya sobreescribió con el tema y el branding del proyecto.

   DOS REGLAS QUE NO SE NEGOCIAN:
   1. ÁMBAR (--plazo), ROJO (--vencido) y VERDE (--ok) significan PLAZO y nada
      más. Son literales de plantilla, NO salen de color.warning/error/success
      del tema: un tema con warning azul rompería la lectura de vencimiento.
   2. La TIPOGRAFÍA es de la plantilla: Bricolage Grotesque (display),
      IBM Plex Sans (cuerpo) e IBM Plex Mono (claves, folios, montos, fechas).
      typography.fontFamily del design_tokens_json NO llega aquí a propósito.

   PREFIJO sp- EN TODAS LAS CLASES: sin él, .btn/.card/.chip chocarían con
   main.css, con Bootstrap y con las reglas !important de _theme-structure.css.

   ORDEN DE IMPORTACIÓN: este archivo va AL FINAL de main.tsx. Gana a lo legacy
   por cascada, sin un solo !important.
   ========================================================================= */

/* =========================================================================
   1. TOKENS
   Alias  = var(--token-del-contrato). NO se redeclaran en el bloque oscuro:
            cambian solos porque el token del contrato cambia bajo
            [data-theme="dark"] (lo emite Program.cs / AplicarTemaCss).
   Fijos  = literal de plantilla. Estos SÍ llevan bloque oscuro.
   El segundo valor de cada var() es el respaldo para un proyecto generado sin
   _theme.css: es el color de la maqueta, ya corregido a AA donde no llegaba.
   ========================================================================= */
:root {
  /* ── Superficies (alias) ─────────────────────────────────────── */
  --papel:  var(--surface-base,   #F3F5F8);
  --sup:    var(--surface-raised, #FFFFFF);
  --sup2:   var(--surface-sunken, #EBEFF4);

  /* ── Tinta y texto (alias) ───────────────────────────────────── */
  --tinta:  var(--text-primary,   #16223A);
  --tinta2: var(--text-secondary, #2B3A55);
  --texto:  var(--text-primary,   #1B2436);
  --texto2: var(--text-secondary, #5A6678);
  /* El #8C97A8 de la maqueta daba 2.56:1 sobre --sup2 (AA pide 4.5). El respaldo
     es el MISMO matiz con la luminosidad corregida: 2.56 -> 4.54. Cuando hay
     tema, manda --text-muted, que el motor ya clampea contra las 4 superficies. */
  --texto3: var(--text-muted,     #616D80);

  /* ── Líneas ──────────────────────────────────────────────────── */
  --linea:  var(--border-color, #D9DFE8);
  /* DERIVADO: el contrato no tiene "borde más suave" (--border-color-strong va
     al revés). Es un borde, no texto: la fórmula puede vivir en CSS. */
  --linea2: color-mix(in srgb, var(--border-color, #D9DFE8) 55%, var(--sup));

  /* ── ACCIÓN — la aporta el proyecto ──────────────────────────────
     --accion            RELLENO (fondo de botón, tile del logo, avatar, barra)
     --accion-txt        el primario PINTADO COMO TEXTO, ya validado a 4.5:1
     --accion-on-accion  la tinta que va ENCIMA del relleno
     --accion-on-suave   la tinta que va encima de --accion-suave            */
  --accion:           var(--color-primary,          #0E6B5B);
  --accion-txt:       var(--text-link,              #0E6B5B);
  --accion-h:         var(--color-primary-hover,    #0B5748);
  --accion-suave:     var(--color-primary-muted,    #DDEFEA);
  --accion-on-accion: var(--color-primary-text,     #FFFFFF);
  --accion-on-suave:  var(--color-primary-on-muted, #0B5748);

  /* ── PLAZO — FIJOS DE PLANTILLA ──────────────────────────────────
     -txt = el mismo matiz clampeado a 4.5:1 contra --sup/--papel/--sup2 y su
     propio -suave, con el mismo método que ContrasteAA.Clamp (mover SOLO la
     luminosidad). Medido: --plazo #C6711A daba 3.11 y --ok #2F7D4F daba 4.25. */
  --plazo:          #C6711A;
  --plazo-txt:      #9F5B15;   /* 3.11 -> 4.52 */
  --plazo-suave:    #FBEBD8;
  --vencido:        #B4332A;
  --vencido-txt:    #B4332A;   /* 4.88, ya cumplía */
  --vencido-suave:  #F8E1DE;
  --ok:             #2F7D4F;
  --ok-txt:         #2D784C;   /* 4.25 -> 4.54 */
  --ok-suave:       #DFF0E4;

  /* ── INFO — sí sale del tema (no es un color reservado) ──────── */
  --info:       var(--color-info,          #2F5FA8);
  --info-txt:   var(--color-info-on-muted, #2F5FA8);
  --info-suave: var(--color-info-muted,    #E0E9F7);

  /* ── Barra lateral (alias) ───────────────────────────────────── */
  --side:         var(--sidebar-bg,                 #16223A);
  --side-txt:     var(--sidebar-text,               #C9D2E1);
  --side-act:     var(--sidebar-menu-active-bg,     #233350);
  --side-act-txt: var(--sidebar-menu-active-color,  #FFFFFF);

  /* ── Forma — FIJA DE PLANTILLA ───────────────────────────────────
     NO sale de borderRadius del tema: Material emite radius-full para los
     botones y convertiría cada botón de la maqueta en una píldora. */
  --r:  6px;
  --r2: 10px;

  /* ── Sombra — geometría fija, tinta del tema (DERIVADA) ──────── */
  --sombra: 0 1px 2px color-mix(in srgb, var(--tinta) 6%, transparent),
            0 6px 20px -8px color-mix(in srgb, var(--tinta) 14%, transparent);

  /* ── Tipografía — FIJA DE PLANTILLA ──────────────────────────── */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Oscuro por preferencia del sistema. La guardia :not([data-theme="light"])
   deja que un toggle explícito en claro gane. Solo se redeclaran los FIJOS:
   los alias ya cambian solos con el bloque oscuro de _theme.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-bs-theme="light"]) {
    color-scheme: dark;
    --papel:  var(--surface-base,   #0F1521);
    --sup:    var(--surface-raised, #171F2E);
    --sup2:   var(--surface-sunken, #1F2938);
    --tinta:  var(--text-primary,   #E6ECF5);
    --tinta2: var(--text-secondary, #C9D2E1);
    --texto:  var(--text-primary,   #E6ECF5);
    --texto2: var(--text-secondary, #A9B4C6);
    --texto3: var(--text-muted,     #8590A1);  /* #7A8699 daba 3.98 -> 4.54 */
    --linea:  var(--border-color,   #2C3648);
    --accion:           var(--color-primary,          #3FB39A);
    --accion-txt:       var(--text-link,              #3FB39A);
    --accion-h:         var(--color-primary-hover,    #5CC7AF);
    --accion-suave:     var(--color-primary-muted,    #153A33);
    --accion-on-accion: var(--color-primary-text,     #0F1521);
    --accion-on-suave:  var(--color-primary-on-muted, #5CC7AF);
    --plazo:         #E5934A;
    --plazo-txt:     #E5934A;   /* 5.56, cumple */
    --plazo-suave:   #3E2A15;
    --vencido:       #E26A5F;
    --vencido-txt:   #E36D62;   /* 4.40 -> 4.51 */
    --vencido-suave: #44201C;
    --ok:            #5CBE82;
    --ok-txt:        #5CBE82;   /* 5.48, cumple */
    --ok-suave:      #173A25;
    --info:       var(--color-info,          #6E9AE0);
    --info-txt:   var(--color-info-on-muted, #6E9AE0);
    --info-suave: var(--color-info-muted,    #1B2A44);
    --side:         var(--sidebar-bg,                #0B111C);
    --side-txt:     var(--sidebar-text,              #B7C2D4);
    --side-act:     var(--sidebar-menu-active-bg,    #1B2536);
    --side-act-txt: var(--sidebar-menu-active-color, #FFFFFF);
    --sombra: 0 1px 2px color-mix(in srgb, #000 40%, transparent),
              0 8px 24px -10px color-mix(in srgb, #000 60%, transparent);
  }
}

/* Oscuro por atributo (el camino que usa hoy themeStore.ts). MISMO contenido
   que el bloque @media; se duplica a propósito, como en la maqueta. */
:root[data-theme="dark"], :root[data-bs-theme="dark"] {
  color-scheme: dark;
  --papel:  var(--surface-base,   #0F1521);
  --sup:    var(--surface-raised, #171F2E);
  --sup2:   var(--surface-sunken, #1F2938);
  --tinta:  var(--text-primary,   #E6ECF5);
  --tinta2: var(--text-secondary, #C9D2E1);
  --texto:  var(--text-primary,   #E6ECF5);
  --texto2: var(--text-secondary, #A9B4C6);
  --texto3: var(--text-muted,     #8590A1);
  --linea:  var(--border-color,   #2C3648);
  --accion:           var(--color-primary,          #3FB39A);
  --accion-txt:       var(--text-link,              #3FB39A);
  --accion-h:         var(--color-primary-hover,    #5CC7AF);
  --accion-suave:     var(--color-primary-muted,    #153A33);
  --accion-on-accion: var(--color-primary-text,     #0F1521);
  --accion-on-suave:  var(--color-primary-on-muted, #5CC7AF);
  --plazo:         #E5934A;
  --plazo-txt:     #E5934A;
  --plazo-suave:   #3E2A15;
  --vencido:       #E26A5F;
  --vencido-txt:   #E36D62;
  --vencido-suave: #44201C;
  --ok:            #5CBE82;
  --ok-txt:        #5CBE82;
  --ok-suave:      #173A25;
  --info:       var(--color-info,          #6E9AE0);
  --info-txt:   var(--color-info-on-muted, #6E9AE0);
  --info-suave: var(--color-info-muted,    #1B2A44);
  --side:         var(--sidebar-bg,                #0B111C);
  --side-txt:     var(--sidebar-text,              #B7C2D4);
  --side-act:     var(--sidebar-menu-active-bg,    #1B2536);
  --side-act-txt: var(--sidebar-menu-active-color, #FFFFFF);
  --sombra: 0 1px 2px color-mix(in srgb, #000 40%, transparent),
            0 8px 24px -10px color-mix(in srgb, #000 60%, transparent);
}

/* =========================================================================
   2. BASE — acotada a .sp-root para no tocar las pantallas legacy
   ========================================================================= */
.sp-root { box-sizing: border-box; background: var(--papel); color: var(--texto);
  font-family: var(--body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; }
.sp-root *, .sp-root *::before, .sp-root *::after { box-sizing: border-box; }
.sp-root a { color: var(--accion-txt); }
.sp-root h1, .sp-root h2, .sp-root h3, .sp-root h4 {
  font-family: var(--display); color: var(--tinta); margin: 0;
  text-wrap: balance; letter-spacing: -.01em; }
.sp-root h3 { font-size: 18px; font-weight: 700; }
.sp-root h4 { font-size: 14px; font-weight: 700; }
.sp-root p  { margin: 0; }
.sp-root :focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }

/* La mono es obligatoria en claves, folios, montos, fechas y contadores.
   font-variant-numeric:tabular-nums hace que las columnas alineen. */
.sp-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sp-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto3); }

@media (prefers-reduced-motion: reduce) {
  .sp-root *, .sp-root *::before, .sp-root *::after {
    transition: none !important; animation: none !important; }
}

/* =========================================================================
   3. SHELL — barra lateral, barra superior, contenido
   ========================================================================= */
.sp-shell { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh;
  font-size: 13px; line-height: 1.4; color: var(--texto); }
.sp-shell.sp-sin-side { grid-template-columns: 1fr; }

.sp-sb { background: var(--side); color: var(--side-txt); padding: 14px 12px;
  display: flex; flex-direction: column; gap: 6px; }
.sp-sb .sp-logo { display: flex; align-items: center; gap: 9px; padding: 6px 8px 14px;
  color: var(--side-act-txt); font-family: var(--display); font-weight: 800; font-size: 17px; }
.sp-sb .sp-logo i { width: 22px; height: 22px; border-radius: 5px; background: var(--accion);
  display: grid; place-items: center; font-style: normal; font-size: 12px;
  color: var(--accion-on-accion); }
.sp-sb .sp-rol { margin: 0 8px 10px; padding: 8px 10px; border-radius: var(--r);
  background: var(--side-act); font-size: 12px; }
.sp-sb .sp-rol b { display: block; color: var(--side-act-txt); font-weight: 600; }
.sp-sb .sp-rol span { color: var(--side-txt); opacity: .8; }
.sp-sb .sp-it { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--r); color: var(--side-txt); text-decoration: none; }
.sp-sb .sp-it.sp-on { background: var(--side-act); color: var(--side-act-txt); font-weight: 600; }
.sp-sb .sp-it .sp-n { margin-left: auto; font-family: var(--mono); font-size: 11px;
  background: var(--plazo); color: #FFFFFF; border-radius: 999px; padding: 0 7px; }
.sp-sb .sp-it .sp-n.sp-g { background: color-mix(in srgb, var(--side-txt) 18%, transparent);
  color: var(--side-txt); }
.sp-sb .sp-grp { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sidebar-category-color, var(--side-txt)); padding: 12px 10px 4px; }
.sp-sb .sp-ico { width: 16px; height: 16px; border-radius: 4px;
  background: color-mix(in srgb, var(--side-txt) 18%, transparent); flex: none; }
.sp-sb .sp-sub { padding-left: 36px; font-size: 12.5px; opacity: .85; }

.sp-main { display: flex; flex-direction: column; background: var(--papel); min-width: 0; }
.sp-tb { height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: var(--sup); border-bottom: 1px solid var(--linea); }
.sp-tb .sp-crumb { color: var(--texto3); font-size: 12.5px; }
.sp-tb .sp-crumb b { color: var(--texto); font-weight: 600; }
.sp-tb .sp-busq { margin-left: auto; width: 300px; height: 32px; border: 1px solid var(--linea);
  border-radius: var(--r); display: flex; align-items: center; gap: 8px; padding: 0 10px;
  color: var(--texto3); font-size: 12.5px; background: var(--sup2); }
.sp-tb .sp-busq kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  border: 1px solid var(--linea); border-radius: 4px; padding: 0 5px; background: var(--sup); }
.sp-tb .sp-ib { width: 32px; height: 32px; border: 1px solid var(--linea); border-radius: var(--r);
  display: grid; place-items: center; color: var(--texto2); position: relative; }
.sp-tb .sp-ib.sp-alerta::after { content: ""; position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--vencido);
  border: 2px solid var(--sup); }
.sp-tb .sp-usr { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.sp-tb .sp-usr i { width: 26px; height: 26px; border-radius: 50%; background: var(--accion);
  color: var(--accion-on-accion); font-style: normal; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; }

.sp-cont { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.sp-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sp-ph h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.sp-ph .sp-sub { color: var(--texto2); font-size: 12.5px; margin-top: 2px; }
.sp-acc { display: flex; gap: 8px; align-items: center; }

/* =========================================================================
   4. CONTROLES
   ========================================================================= */
.sp-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--r); border: 1px solid var(--linea); background: var(--sup);
  color: var(--texto); font-family: var(--body); font-weight: 500; font-size: 12.5px;
  white-space: nowrap; cursor: pointer; text-decoration: none; }
/* UNA sola acción primaria por pantalla y por fila. */
.sp-btn.sp-p { background: var(--accion); border-color: var(--accion);
  color: var(--accion-on-accion); font-weight: 600; }
.sp-btn.sp-p:hover:not(:disabled) { background: var(--accion-h); border-color: var(--accion-h); }
.sp-btn.sp-s { background: transparent; }
.sp-btn.sp-xs { height: 26px; padding: 0 9px; font-size: 12px; }
.sp-btn.sp-menu::after { content: "\25BE"; font-size: 10px; opacity: .7; }
.sp-btn:disabled { opacity: .55; cursor: not-allowed; }

.sp-card { background: var(--sup); border: 1px solid var(--linea); border-radius: 8px; }
.sp-card .sp-ch { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--linea2); }
.sp-card .sp-ch h3 { font-size: 13.5px; font-weight: 700; font-family: var(--body);
  color: var(--texto); }
.sp-card .sp-ch .sp-m { font-size: 12px; color: var(--texto3); }

/* Chips de estatus. El punto usa currentColor: el color de texto ya está
   validado (los -txt), así que el punto lo hereda sin medir aparte. */
.sp-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
.sp-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; }
.sp-chip.sp-ok { background: var(--ok-suave);      color: var(--ok-txt); }
.sp-chip.sp-pl { background: var(--plazo-suave);   color: var(--plazo-txt); }
.sp-chip.sp-ve { background: var(--vencido-suave); color: var(--vencido-txt); }
.sp-chip.sp-in { background: var(--info-suave);    color: var(--info-txt); }
.sp-chip.sp-ne { background: var(--sup2);          color: var(--texto2); }
.sp-chip.sp-sin::before { display: none; }

/* Filtros: se aplican al momento, sin botón "Aplicar". */
.sp-fchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sp-fchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 1px dashed var(--linea); border-radius: 999px; font-size: 12px; color: var(--texto2);
  background: var(--sup); cursor: pointer; }
.sp-fchip.sp-on { border-style: solid; border-color: var(--tinta2); color: var(--texto);
  background: var(--sup); }
.sp-fchip b { font-weight: 600; color: var(--tinta); }
.sp-fchip .sp-x { opacity: .5; margin-left: 2px; }

/* =========================================================================
   5. MEDIDOR DE VENCIMIENTO — la firma de la plantilla
   Se genera para cualquier entidad con fecha límite (o inicio + plazo). Va en
   cada fila de bandeja, en el encabezado de cada ficha y en los tableros.
   Nunca un número suelto: días + barra proporcional + fecha en texto.
   ========================================================================= */
.sp-plazo { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center;
  min-width: 150px; }
.sp-plazo .sp-d { font-family: var(--mono); font-size: 12px; font-weight: 500;
  white-space: nowrap; color: var(--ok-txt); }
.sp-plazo .sp-bar { height: 6px; border-radius: 3px; background: var(--linea2);
  position: relative; overflow: hidden; }
.sp-plazo .sp-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px;
  background: var(--ok); }
.sp-plazo.sp-pl .sp-bar i { background: var(--plazo); }
.sp-plazo.sp-pl .sp-d { color: var(--plazo-txt); }
.sp-plazo.sp-ve .sp-bar i { background: var(--vencido); }
.sp-plazo.sp-ve .sp-d { color: var(--vencido-txt); }
.sp-plazo .sp-f { font-size: 11px; color: var(--texto3); grid-column: 1 / -1; margin-top: -4px; }

/* =========================================================================
   6. TABLA
   ========================================================================= */
table.sp-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.sp-t th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto3); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--linea);
  white-space: nowrap; }
table.sp-t td { padding: 9px 12px; border-bottom: 1px solid var(--linea2); vertical-align: middle; }
table.sp-t tr.sp-sel td { background: var(--accion-suave); color: var(--accion-on-suave); }
table.sp-t td.sp-num, table.sp-t th.sp-num { text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; }
table.sp-t .sp-t1 { font-weight: 600; color: var(--tinta); }
table.sp-t .sp-t2 { color: var(--texto3); font-size: 11.5px; }
table.sp-t tr.sp-grp td { background: var(--sup2); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto2); font-weight: 600; padding: 5px 12px; }
table.sp-t tr.sp-grp td b { color: var(--vencido-txt); }
table.sp-t .sp-rail { width: 4px; padding: 0; }
table.sp-t .sp-rail i { display: block; width: 4px; height: 36px; border-radius: 2px; }
.sp-r-ve { background: var(--vencido); }
.sp-r-pl { background: var(--plazo); }
.sp-r-ok { background: var(--ok); }
.sp-r-ne { background: var(--linea); }

.sp-tfoot { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; font-size: 12px; color: var(--texto3); }
/* La paginación activa NO gasta el acento: usa el bloque neutro fuerte, que ya
   viene como par fondo+tinta validado (--control-strong-bg / -ink). */
.sp-pag { display: flex; gap: 4px; }
.sp-pag span { min-width: 26px; height: 26px; border: 1px solid var(--linea);
  border-radius: 5px; display: grid; place-items: center; font-family: var(--mono);
  font-size: 11.5px; cursor: pointer; }
.sp-pag span.sp-on { background: var(--control-strong-bg, var(--tinta));
  color: var(--control-strong-ink, var(--sup));
  border-color: var(--control-strong-bg, var(--tinta)); }

/* =========================================================================
   7. TILES / KPI
   ========================================================================= */
.sp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sp-tile { background: var(--sup); border: 1px solid var(--linea); border-radius: 8px;
  padding: 12px 14px; display: grid; gap: 4px; position: relative; }
.sp-tile .sp-l { font-size: 12px; color: var(--texto2); }
.sp-tile .sp-v { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--tinta); font-variant-numeric: tabular-nums; }
.sp-tile .sp-v small { font-family: var(--body); font-size: 12px; font-weight: 500;
  color: var(--texto3); margin-left: 6px; }
.sp-tile .sp-h { font-size: 11.5px; color: var(--texto3); }
.sp-tile.sp-ve .sp-v { color: var(--vencido-txt); }
.sp-tile.sp-pl .sp-v { color: var(--plazo-txt); }
.sp-tile.sp-ok .sp-v { color: var(--ok-txt); }
.sp-tile .sp-go { position: absolute; right: 12px; top: 12px; font-size: 11.5px;
  color: var(--accion-txt); font-weight: 600; text-decoration: none; }

/* =========================================================================
   8. RETÍCULAS Y ESTADO VACÍO
   ========================================================================= */
.sp-grid2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-grid32 { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
.sp-g-2-1  { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.sp-g-1-2  { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.sp-vacio { padding: 34px; text-align: center; color: var(--texto2); font-size: 12.5px;
  display: grid; gap: 8px; justify-items: center; }
.sp-vacio b { color: var(--tinta); font-size: 14px; }

/* =========================================================================
   9. FORMULARIO
   ========================================================================= */
.sp-field { display: grid; gap: 4px; }
.sp-field label { font-size: 11.5px; font-weight: 600; color: var(--texto2); }
.sp-field label em { color: var(--vencido-txt); font-style: normal; }
.sp-field .sp-in { height: 34px; border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--sup); padding: 0 10px; display: flex; align-items: center;
  color: var(--texto); font-family: var(--body); font-size: 13px; gap: 8px; width: 100%; }
.sp-field .sp-in.sp-hint { color: var(--texto3); }
.sp-field .sp-in.sp-ro { background: var(--sup2); color: var(--texto2); }
.sp-field .sp-in:focus, .sp-field .sp-in:focus-within {
  border-color: var(--accion); outline: 2px solid var(--accion); outline-offset: -1px; }
.sp-field .sp-ayuda { font-size: 11px; color: var(--texto3); }
.sp-field .sp-err { font-size: 11px; color: var(--vencido-txt); }
.sp-field .sp-in.sp-err { border-color: var(--vencido); color: var(--texto); }
.sp-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.sp-form2 .sp-full { grid-column: 1 / -1; }
.sp-rowchk { display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--texto2); }
.sp-rowchk i { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--linea);
  border-radius: 3px; margin-right: 6px; vertical-align: -2px; background: var(--sup); }

/* =========================================================================
   10. NAVEGACIÓN INTERNA
   ========================================================================= */
.sp-secnav { display: grid; gap: 2px; font-size: 12.5px; }
.sp-secnav a { padding: 6px 10px; border-radius: 5px; color: var(--texto2);
  text-decoration: none; border-left: 2px solid transparent; }
.sp-secnav a.sp-on { color: var(--tinta); font-weight: 600; background: var(--sup);
  border-left-color: var(--accion); }
.sp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); padding: 0 6px; }
.sp-tabs span { padding: 10px 12px; font-size: 12.5px; color: var(--texto2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 6px;
  align-items: center; cursor: pointer; }
.sp-tabs span.sp-on { color: var(--tinta); font-weight: 600; border-color: var(--accion); }
.sp-tabs span i { font-style: normal; font-family: var(--mono); font-size: 10.5px;
  background: var(--sup2); border-radius: 999px; padding: 0 6px; color: var(--texto2); }
.sp-tabs span.sp-on i { background: var(--accion-suave); color: var(--accion-on-suave); }

/* =========================================================================
   11. FICHA, PASOS Y AVISOS
   ========================================================================= */
.sp-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; }
.sp-kv dt { color: var(--texto3); margin: 0; }
.sp-kv dd { margin: 0; color: var(--texto); font-weight: 500; }

.sp-stepper { display: flex; align-items: center; gap: 0; font-size: 12px; }
.sp-stepper .sp-s { display: flex; align-items: center; gap: 7px; color: var(--texto3); }
.sp-stepper .sp-s i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linea);
  display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 10px; }
.sp-stepper .sp-s.sp-done { color: var(--ok-txt); }
.sp-stepper .sp-s.sp-done i { background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
.sp-stepper .sp-s.sp-on { color: var(--tinta); font-weight: 600; }
.sp-stepper .sp-s.sp-on i { border-color: var(--accion); color: var(--accion-txt); }
.sp-stepper .sp-ln { width: 34px; height: 2px; background: var(--linea); margin: 0 8px; }
.sp-stepper .sp-ln.sp-done { background: var(--ok); }

/* La IA acompaña, no estorba: franja de una línea, plegada. */
.sp-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border-radius: var(--r); font-size: 12.5px; border: 1px solid var(--linea); }
.sp-aviso.sp-ia { background: var(--sup); border-left: 3px solid var(--info); }
.sp-aviso b { color: var(--tinta); }
.sp-aviso .sp-ico { width: 22px; height: 22px; border-radius: 5px; background: var(--info-suave);
  color: var(--info-txt); display: grid; place-items: center; font-size: 11px; font-weight: 700;
  flex: none; }

/* =========================================================================
   12. GRÁFICAS
   El relleno sale de --tinta2 (neutro) y NO del acento: la escala de marca
   vive en --chart-1..6, que el motor calcula con ContrasteAA.EscalaAcento.
   Las series se nombran ("En plazo"), nunca se etiquetan con el número.
   ========================================================================= */
.sp-barras { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 8px 6px 0; }
.sp-barras > div { flex: 1; display: grid; gap: 4px; align-content: end; justify-items: center;
  font-size: 10.5px; color: var(--texto3); height: 100%; }
.sp-barras i { display: block; width: 100%; max-width: 38px; border-radius: 3px 3px 0 0;
  background: var(--tinta2); opacity: .85; }
.sp-barras b { font-family: var(--mono); font-weight: 500; color: var(--texto2); font-size: 11px; }
.sp-lineas { position: relative; height: 120px; border-bottom: 1px solid var(--linea);
  margin: 6px 8px 0; }
.sp-lineas svg { width: 100%; height: 100%; display: block; }
.sp-ejes { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--texto3);
  padding: 4px 8px 0; font-family: var(--mono); }
.sp-mini { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.sp-mini > div { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items: center; }
.sp-mini i { height: 8px; border-radius: 2px; background: var(--tinta2); display: block; }
.sp-mini b { font-family: var(--mono); font-weight: 500; color: var(--texto2); }

/* =========================================================================
   13. DOCUMENTO Y FIRMA
   ========================================================================= */
.sp-doc { background: var(--sup2); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 14px 16px; font-size: 12px; color: var(--texto2); max-height: 150px; overflow: hidden;
  position: relative; line-height: 1.6; }
.sp-doc::after { content: ""; position: absolute; inset: auto 0 0 0; height: 50px;
  background: linear-gradient(transparent, var(--sup2)); }
.sp-firma { height: 110px; border: 1px dashed var(--linea); border-radius: var(--r);
  display: grid; place-items: center; color: var(--texto3); font-size: 12px; background: var(--sup); }

/* =========================================================================
   14. PANEL LATERAL (editar en su lugar, sin perder la lista)
   ========================================================================= */
.sp-drawer { background: var(--sup); border-left: 1px solid var(--linea); display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px -20px color-mix(in srgb, var(--tinta) 35%, transparent); }
.sp-drawer .sp-dh { padding: 14px 16px; border-bottom: 1px solid var(--linea2);
  display: grid; gap: 6px; }
.sp-drawer .sp-db { padding: 14px 16px; display: grid; gap: 14px; font-size: 12.5px; }
.sp-drawer .sp-df { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--linea2);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* =========================================================================
   15. CONEXIONES
   ========================================================================= */
.sp-conn { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px; border: 1px solid var(--linea); border-radius: 8px; background: var(--sup); }
.sp-conn .sp-lg { width: 40px; height: 40px; border-radius: 8px; background: var(--sup2);
  display: grid; place-items: center; font-family: var(--display); font-weight: 800;
  color: var(--tinta); }
.sp-conn .sp-t1 { font-weight: 600; color: var(--tinta); }
.sp-conn .sp-t2 { font-size: 12px; color: var(--texto3); }

/* =========================================================================
   16. LOGIN
   ========================================================================= */
.sp-login-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.sp-login-l { background: var(--side); color: var(--side-act-txt); padding: 40px 44px;
  display: flex; flex-direction: column; justify-content: space-between; }
.sp-login-l .sp-marca { font-family: var(--display); font-weight: 800; font-size: 26px;
  display: flex; align-items: center; gap: 10px; }
.sp-login-l .sp-marca i { width: 28px; height: 28px; border-radius: var(--r); background: var(--accion);
  color: var(--accion-on-accion); display: grid; place-items: center; font-style: normal;
  font-size: 14px; }
.sp-login-l h2 { color: var(--side-act-txt); font-size: 30px; max-width: 16ch; margin-top: 26px; }
.sp-login-l p { color: var(--side-txt); margin-top: 12px; max-width: 40ch; font-size: 13.5px; }
.sp-cal { background: color-mix(in srgb, var(--side-txt) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--side-txt) 16%, transparent); border-radius: 8px;
  padding: 14px 16px; display: grid; gap: 10px; font-size: 12.5px; color: var(--side-txt); }
.sp-cal .sp-h { display: flex; justify-content: space-between; text-transform: uppercase;
  letter-spacing: .08em; font-size: 10.5px; opacity: .7; }
.sp-cal .sp-r { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.sp-cal .sp-r b { font-family: var(--mono); color: var(--side-act-txt); font-weight: 500; }
.sp-cal .sp-r span { color: var(--side-act-txt); }
.sp-cal .sp-r em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--plazo); color: #FFFFFF; }
.sp-login-r { padding: 56px 60px; display: flex; flex-direction: column; justify-content: center;
  gap: 16px; background: var(--sup); }
.sp-login-r h1 { font-size: 26px; font-weight: 700; }
.sp-login-r .sp-field .sp-in { height: 40px; }
.sp-login-r .sp-btn.sp-p { height: 40px; justify-content: center; font-size: 13.5px; margin-top: 4px; }
.sp-login-r .sp-pie { font-size: 12px; color: var(--texto3); margin-top: 16px;
  display: flex; justify-content: space-between; }

/* =========================================================================
   17. RESPONSIVO
   La maqueta se dibujó a 1360px fijos porque es una hoja de propuesta. En la
   app las mismas zonas se apilan; los cortes son los de la propia maqueta.
   ========================================================================= */
@media (max-width: 1100px) {
  .sp-shell { grid-template-columns: 1fr; }
  .sp-sb { display: none; }
  .sp-sb.sp-abierta { display: flex; position: fixed; inset: 0 auto 0 0; width: 216px;
    z-index: 300; }
}
@media (max-width: 900px) {
  .sp-grid2, .sp-grid32, .sp-g-2-1, .sp-g-1-2 { grid-template-columns: 1fr; }
  .sp-tiles { grid-template-columns: 1fr 1fr; }
  .sp-form2 { grid-template-columns: 1fr; }
  .sp-login-split { grid-template-columns: 1fr; }
  .sp-login-l { display: none; }
}
@media (max-width: 640px) {
  .sp-tiles { grid-template-columns: 1fr; }
  .sp-cont { padding: 14px; }
  .sp-tb .sp-busq { width: auto; flex: 1; }
}

/* =========================================================================
   APLICACION DE LA MAQUETA SOBRE LAS CLASES QUE LAS PANTALLAS YA USAN
   -------------------------------------------------------------------------
   POR QUE ESTA SECCION EXISTE. La primera version de esta hoja solo definia
   clases nuevas con prefijo `.sp-`, y NINGUNA pantalla generada las usa: el
   resultado visual era identico al de antes (medido con capturas en
   project8120 el 2026-09-27). Lo que las pantallas usan de verdad es:
     - `.dg-*`   -> el DataGrid            (components/data/index.tsx)
     - `.golden-*` -> la banda de KPIs     (views/home/home-golden.css)
     - `.page-header`, `.btn` -> encabezado y acciones (components/ui)
   Esas tres superficies viven en la plantilla base y `SincronizarPlantillaReact`
   las copia a CADA proyecto en CADA corrida de T140, SIN regenerar pantallas.
   Por eso el rediseno se aplica aqui: llega a las 119 pantallas de un proyecto
   sin depender del paso de regeneracion.

   ALCANCE. Solo tipografia, densidad, color y jerarquia. Ni una regla cambia
   la estructura del DOM ni oculta controles: eso es trabajo de plantilla y de
   metadato, y va aparte. Todo sale de los tokens de arriba, asi que el color
   de accion y la marca los sigue poniendo el tema del proyecto.
   ========================================================================= */

/* ---- Tabla: encabezado de columna (maqueta `table.t th`) ---- */
.dg-table .dg-th {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--texto3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

/* ---- Tabla: celda (maqueta `table.t td`) ---- */
.dg-table .dg-td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--linea2);
  vertical-align: middle;
  font-size: 12.5px;
}

/* ---- Cifras: mono y tabulares para que las columnas alineen.
        La maqueta lo exige para claves, folios, montos, fechas y contadores. ---- */
.dg-table .dg-th-numeric,
.dg-table .dg-td-numeric {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Banda de KPIs (maqueta `.tile`) ---- */
.golden-kpi {
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 12px 14px;
}
.golden-kpi-value {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--tinta);
}
.golden-kpi-label { font-size: 12px; color: var(--texto2); }
.golden-kpi-sub   { font-size: 11.5px; color: var(--texto3); }

/* ---- Encabezado de pantalla (maqueta `.ph`) ---- */
.page-header h1,
.page-header .page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.page-header .page-subtitle { font-size: 12.5px; color: var(--texto2); }

/* ---- Accion primaria (maqueta `.btn.p`): plana, 32px, radio 6px, sin mayusculas.
        El `!important` es deliberado y acotado: los 7 bloques de estilo de tema
        emiten `[data-theme-style=...] .btn { border-radius: var(--radius-full) !important }`
        y sin esto el boton sigue siendo pildora. Ver C-1 en 01-SISTEMA-DISENO. ---- */
.dg-btn-new,
.page-header .btn-primary,
button.btn-primary {
  border-radius: 6px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--accion);
  border: 1px solid var(--accion);
  box-shadow: none;
}

/* ---- Tarjetas de KPI: la maqueta las quiere planas, sin franja de color ni
        icono grande. El numero manda; el resto es apoyo. ---- */
.golden-kpi { box-shadow: none; }
.golden-kpi-accent { display: none; }
.golden-kpi-tile {
  width: 22px; height: 22px;
  border-radius: 5px;
  font-size: 11px;
  opacity: .9;
}

/* ---- Chips de catalogo (maqueta `.chip.ne`): neutros, no azules. Un chip
        azul por fila compite con la accion primaria, que es el unico azul
        que debe llamar la atencion. ---- */

/* ---- Densidad de fila: la maqueta trabaja a 12.5px con filas de 36-38px.
        Las tablas generadas venian mas aireadas de lo que una bandeja aguanta. ---- */
.dg-table tbody tr { height: 38px; }

/* ---- Menu de acciones de fila (maqueta: "Se acaban los tres iconos por fila").
        Se apoya en <details>, asi que no hay estado ni listeners que limpiar. ---- */
.dg-acciones-mas { position: relative; display: inline-block; }
.dg-acciones-mas > summary {
  list-style: none;
  cursor: pointer;
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 6px;
  color: var(--texto2);
}
.dg-acciones-mas > summary::-webkit-details-marker { display: none; }
.dg-acciones-mas > summary:hover { background: var(--sup2); color: var(--tinta); }
.dg-acciones-mas[open] > summary { background: var(--sup2); color: var(--tinta); }

.dg-acciones-mas-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: 8px;
  box-shadow: var(--sombra);
}
.dg-acciones-mas-panel button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.dg-acciones-mas-panel button:hover { background: var(--sup2); }
/* El destructivo se nombra y se marca; deja de ser un icono mas entre iguales. */
.dg-acciones-mas-panel button.btn-icon-danger,
.dg-acciones-mas-panel button.text-danger { color: var(--vencido); }

/* ---- Chips de catálogo dentro de la rejilla (maqueta `.chip.ne`).
        POR QUE ASI. El generador inyecta un <style> EN LA PROPIA PAGINA con
        `.golden-chip { background: color-mix(... var(--color-primary) ...) }`.
        Al vivir en el documento gana por orden a esta hoja, asi que se sube la
        especificidad (0,2,0 contra 0,1,0) en vez de recurrir a !important.
        El alcance es deliberado: SOLO dentro de `.dg-table`. Un chip azul por
        fila, repetido doce veces, compite con la accion primaria, que debe ser
        lo unico que llame la atencion. Fuera de la rejilla el chip conserva el
        color de marca, que ahi si identifica. ---- */
.dg-table .golden-chip {
  background: var(--sup2);
  color: var(--texto2);
  border-color: var(--linea);
  font-weight: 600;
}
.dg-table .golden-chip .golden-chip-dot { background: var(--texto3); }

/* ---- Tablero: el titulo de cada tarjeta salia DOS veces.
        `DashboardV2Generator` pinta la cabecera de la seccion (`.dsh-card` > div con
        `w.titulo`) y `KpiCard` vuelve a pintarlo dentro, como primer hijo del
        `[role="figure"]`. Medido en project8120: "Pendientes de Validacion
        (Aplicaciones Fitosanitarias)" aparecia completo dos veces en la misma tarjeta.
        Se oculta el INTERNO y solo dentro de `.dsh-card`, que es donde existe la
        cabecera: fuera de ahi KpiCard conserva su titulo, que ahi si es el unico.
        El nombre no se pierde para lectores de pantalla: el `aria-label` del
        `[role="figure"]` ya lo lleva. ---- */
.dsh-card [role="figure"] > div:first-child { display: none; }

/* =========================================================================
   IDENTIDAD DE LA MAQUETA — valores literales, no alias del tema
   -------------------------------------------------------------------------
   CAMBIO DE CRITERIO (2026-09-27, Victor: "necesito que se vean como en el
   HTML que te pase"). La version anterior de esta hoja hacia que los nombres
   de la maqueta APUNTARAN al tema del proyecto (--accion -> --color-primary,
   --side -> --sidebar-bg del tema...). Con eso el resultado era siempre el
   tema actual con otros nombres: imposible que se pareciera al HTML.

   Ahora la maqueta manda. Se imponen sus valores sobre los tokens DEL
   CONTRATO, que es lo que consumen main.css, los componentes y las paginas
   generadas — asi la identidad llega sin repintar clase por clase.

   Del proyecto se conservan el logotipo y el nombre. El color de accion, la
   tipografia y la tinta los fija la maqueta, que es lo que hace que todas las
   pantallas de todos los proyectos se lean igual.

   Los colores de texto llevan la correccion de contraste medida el mismo dia
   (6 de 17 pares no alcanzaban 4.5:1 con los valores crudos del HTML).
   ========================================================================= */
:root,
:root[data-theme="light"] {
  /* Superficies y tinta */
  --color-background:          #F3F5F8;   /* --papel */
  --surface-base:              #F3F5F8;
  --surface-raised:            #FFFFFF;   /* --sup */
  --surface-sunken:            #EBEFF4;   /* --sup2 */
  --content-bg:                #F3F5F8;
  --color-card-bg:             #FFFFFF;

  /* Texto */
  --color-text:                #1B2436;   /* --texto */
  --text-primary:              #1B2436;
  --color-heading:             #16223A;   /* --tinta */
  --text-secondary:            #5A6678;   /* --texto2 */
  --color-text-muted:          #5A6678;
  --text-muted:                #616D80;   /* --texto3 corregido (2.71 -> 4.80) */
  --color-muted:               #616D80;

  /* Lineas */
  --color-border:              #D9DFE8;   /* --linea */
  --border-color:              #D9DFE8;
  --color-border-light:        #E8ECF2;   /* --linea2 */

  /* ACCION: el verde de la maqueta, no el azul del tema */
  --color-primary:             #0E6B5B;   /* --accion */
  --color-primary-hover:       #0B5748;   /* --accion-h */
  --color-primary-muted:       #DDEFEA;   /* --accion-suave */
  --color-primary-on-muted:    #0B5748;

  /* Semantica de plazo: fija de plantilla, con contraste corregido */
  --color-warning:             #C6711A;   /* --plazo (relleno) */
  --color-warning-text:        #9F5B15;   /* corregido 3.11 -> 4.52 */
  --color-warning-muted:       #FBEBD8;
  --color-danger:              #B4332A;   /* --vencido */
  --color-danger-text:         #B4332A;
  --color-danger-muted:        #F8E1DE;
  --color-success:             #2F7D4F;   /* --ok */
  --color-success-text:        #2D784C;   /* corregido 4.25 -> 4.54 */
  --color-success-muted:       #DFF0E4;
  --color-info:                #2F5FA8;
  --color-info-muted:          #E0E9F7;

  /* Chasis: el sidebar azul tinta de la maqueta */
  /* El .sidebar pinta un degradado de TRES paradas; la maqueta lo quiere plano. */
  --sidebar-brand:             #16223A;   /* --side */
  --sidebar-brand-2:           #16223A;
  --sidebar-brand-3:           #16223A;
  --sidebar-bg:                #16223A;   /* --side */
  --color-sidebar-bg-start:    #16223A;
  --color-sidebar-bg-end:      #16223A;
  --sidebar-menu-color:        #C9D2E1;   /* --side-txt */
  --sidebar-submenu-color:     #C9D2E1;
  --sidebar-category-color:    #8C97A8;
  --sidebar-menu-active-bg:    #233350;   /* --side-act */
  --color-sidebar-active:      #233350;
  --sidebar-menu-active-color: #FFFFFF;
  --color-sidebar-text:        #C9D2E1;
  --topbar-bg:                 #FFFFFF;

  /* Radios y sombra de la maqueta */
  --radius-sm:                 6px;       /* --r */
  --radius-md:                 8px;
  --radius-lg:                 10px;      /* --r2 */
  --card-border-radius:        8px;
  --border-radius:             8px;
  --shadow: 0 1px 2px rgba(22,34,58,.06), 0 6px 20px -8px rgba(22,34,58,.14);
  --shadow-sm: 0 1px 2px rgba(22,34,58,.06);

  /* Las tres tipografias de la maqueta */
  --font-family-primary:   "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-family-secondary: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display:          "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono:             "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* La maqueta pone el cuerpo en IBM Plex Sans y las cifras en mono tabular. */
body, .menu-item, .menu-text, button, input, select, textarea, table {
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}
h1, h2, h3, .page-title, .page-header h1, .golden-kpi-value, .dg-page-btn {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.01em;
}

/* =========================================================================
   ESTRUCTURA DE LA MAQUETA — acomodo, no solo color
   ========================================================================= */

/* ---- Logotipo sobre el sidebar oscuro.
        Los logos de proyecto son tinta oscura sobre transparente, pensados para
        cabecera clara. Sobre el azul tinta de la maqueta desaparecen. Se aclaran
        en el sidebar (y SOLO ahi): en la barra superior siguen en su color. ---- */
.sidebar .sidebar-logo-wrapper img,
.sidebar .sidebar-header img {
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* (Las charolas ya son pestanas DESDE EL GENERADOR: BANDEJAPageGenerator emite
   SegmentedFilter sin `is-stacked` ni tarjeta lateral. Los parches de CSS que
   reacomodaban el DOM por `data-testid` se retiraron el 2026-09-27: eran andamio,
   no diseno, y se habrian roto en cuanto el generador cambiara el marcado.) */


/* Foco de campos del buscador de ficha: sigue al color de accion del proyecto en
   vez del azul de Tailwind que el generador tenia a fuego. */
.sp-focus-accion:focus {
  --tw-ring-color: var(--accion);
  border-color: var(--accion);
  outline: none;
}


/* ════════════════════════════════════════════════════════════════════════
   ASISTENTE POR PASOS (tipo 7 de la maqueta)

   El generador (WizardPageGenerator) emite ahora `wz-shell > wz-rail + Card`,
   con `wz-paso` dentro de la tarjeta y `wz-pie` al fondo. Estas reglas son la
   MEDIDA de ese marcado, no un reacomodo por `data-testid`: si el generador
   cambia el marcado, estas clases desaparecen con el y no queda parche huerfano.
   ════════════════════════════════════════════════════════════════════════ */

.wz-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* Por debajo de 1024px el rail de 220px deja al formulario sin ancho util, asi
   que se apila: primero los pasos, luego el paso actual. Es lo unico que cabe
   en un telefono, y el rail sigue arriba, donde se lee antes de empezar. */
@media (max-width: 1023px) {
  .wz-shell { grid-template-columns: minmax(0, 1fr); }
}

/* El rail es una tarjeta propia, como en la maqueta: misma superficie y mismo
   borde que la del paso, con menos relleno porque solo lleva la lista. */
.wz-rail {
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 8px;
  position: sticky;
  /* 96px = alto de la barra superior + el respiro del contenido. Pegajoso para
     que al bajar por un paso largo NO se pierda de vista en que paso se esta. */
  top: 96px;
}

@media (max-width: 1023px) {
  .wz-rail { position: static; }
}

/* El renglon de cada paso (chip + titulo), el sombreado del paso en curso y los
   colores de tema los pone YA el propio <WizardStepper orientation="vertical">
   (components/ui/index.tsx). Aqui no se repiten: una segunda fuente de verdad
   para lo mismo es justo lo que produce los parches que se contradicen. */

/* El paso actual: el relleno de la tarjeta y la medida de lectura. Los campos
   ya no se estiran a 1,100px — la maqueta lo senala como defecto del tipo 7
   ("Dos campos en 1,100 px de ancho y el resto vacio"). */
.wz-paso {
  padding: 18px 20px;
  display: grid;
  gap: 14px;
}

.wz-paso .form-grid,
.wz-paso .grid {
  max-width: 720px;
}

/* El pie se pega al borde inferior de la tarjeta y se separa con una linea.
   `space-between` deja "Guardar y salir" a un lado y la navegacion al otro. */
.wz-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--surface-sunken, transparent);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

/* <WizardNavigation> trae su propia linea superior y sus margenes (`border-t pt-4
   mt-6`), pensados para cuando iba suelta bajo el formulario. Dentro del pie ya
   los pone el pie, asi que se anulan: dos lineas seguidas y un hueco de 24px
   encima del pie es exactamente lo que se veia antes de esta regla. */
.wz-pie .wizard-navigation {
  flex: 1 1 auto;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* "Guardar y salir" es una salida, no la accion del paso: se ve, pero no
   compite con el primario. La maqueta lo pide asi ("Cancelar, Anterior y
   Siguiente con el mismo tamano" es uno de sus defectos declarados). */
.wz-guardar-salir {
  order: -1;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  cursor: pointer;
}

.wz-guardar-salir:hover {
  color: var(--text-color);
  border-color: var(--text-muted);
}

/* Titulo del paso actual. Escalon 2 de la escala GOLDEN (seccion), con el color
   del tema en vez del `text-gray-900` que traia a fuego. */
.wz-paso-titulo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-bold);
  color: var(--text-color);
  margin: 0 0 4px;
}


/* =========================================================================
   OLA DE TIPOS DE PANTALLA (2026-09-30)

   Vocabulario CSS de los generadores que se redisenaron en paralelo. Va aqui
   y no en `main.css` porque a `main.css` lo reescribe el sincronizador de la
   plantilla; y va en el MISMO commit que los generadores porque el gate
   `ContratoClasesCssTests.NoSeEmitenClasesFantasma` falla si un generador
   emite una clase que ninguna hoja define.

   Regla comun a todo lo de abajo: ni un solo color literal. El cliente elige
   la paleta en la pantalla "Diseno" de DoIT y ninguna de estas reglas la
   contradice.
   ========================================================================= */

/* ------------------------- APROBACION (tipo 10) ------------------------- */

.apr-aviso {
  padding: var(--space-3, 12px); margin-bottom: var(--space-3, 12px);
  border: 1px solid var(--color-warning); border-left-width: 3px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-warning-muted); color: var(--color-warning-text);
  font-size: var(--text-sm, 13px); line-height: 1.5;
}

.apr-lote {
  display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap;
  margin-bottom: var(--space-3, 12px); padding: var(--space-3, 12px);
  border: 1px solid var(--color-primary); border-radius: var(--radius-md, 8px);
  background: var(--color-primary-muted);
}
.apr-lote-n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: var(--text-lg, 17px); line-height: 1;
  color: var(--color-primary-on-muted);
}
.apr-lote-txt {
  font-size: var(--text-sm, 13px); color: var(--color-primary-on-muted);
  margin-right: auto;
}
.apr-lote-decision { font-variant-numeric: tabular-nums; }

/* La transicion que AVANZA el flujo lleva el verbo visible. Antes TODAS las
   transiciones de la fila salian con el mismo icono de palomita y solo se
   distinguian por el `title`: una fila con tres transiciones mostraba tres
   palomitas identicas y habia que pasar el raton por cada una para saber
   cual aprobaba y cual rechazaba. */
.apr-decision {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; max-width: 18ch; padding: 0 10px;
  border: 1.5px solid var(--color-primary); border-radius: var(--radius-md, 8px);
  background: var(--color-primary); color: var(--color-primary-contrast, #fff);
  font-family: var(--font-display); font-size: var(--text-xs, 12px);
  font-weight: 600; white-space: nowrap; cursor: pointer;
}
.apr-decision:hover:not([aria-disabled="true"]) {
  background: var(--color-primary-hover); border-color: var(--color-primary-hover);
}
.apr-decision:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.apr-decision-verbo { overflow: hidden; text-overflow: ellipsis; }

/* Zona de decision del modal: sobre QUE se decide y HACIA DONDE lleva. */
.apr-zona {
  padding: var(--space-4, 16px); border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px); background: var(--surface-sunken);
}
.apr-zona-clave {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-base, 15px); font-weight: 700;
  color: var(--text-primary); margin: 0 0 var(--space-2, 8px);
}
.apr-zona-hechos {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px var(--space-4, 16px); margin: 0; font-size: var(--text-sm, 13px);
}
.apr-zona-hechos dt { color: var(--text-muted); }
.apr-zona-hechos dd { margin: 0; color: var(--text-primary); }
.apr-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.apr-zona-destino {
  margin: var(--space-3, 12px) 0 0; padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-color);
  font-size: var(--text-sm, 13px); color: var(--text-secondary);
}
.apr-zona-destino strong { font-family: var(--font-display); color: var(--color-primary); }

.apr-hist-titulo {
  font-family: var(--font-display); font-size: var(--text-sm, 13px);
  font-weight: 600; color: var(--text-muted); margin: 0 0 var(--space-3, 12px);
}
.apr-hist { display: grid; gap: var(--space-3, 12px); }
.apr-hist-item {
  display: flex; align-items: flex-start; gap: var(--space-3, 12px);
  font-size: var(--text-sm, 13px);
}
.apr-hist-punto {
  flex: 0 0 auto; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid currentColor;
  font-size: var(--text-xs, 12px); line-height: 1;
}
.apr-hist-punto-si     { background: var(--color-success-muted); color: var(--color-success-text); }
.apr-hist-punto-no     { background: var(--color-danger-muted);  color: var(--color-danger-text); }
.apr-hist-punto-neutro { background: var(--color-warning-muted); color: var(--color-warning-text); }
.apr-hist-quien { font-weight: 600; color: var(--text-primary); margin: 0; }
.apr-hist-nota  { color: var(--text-secondary); margin: 2px 0 0; }
.apr-hist-fecha {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs, 12px); color: var(--text-muted); margin: 2px 0 0;
}

/* ------------------------------ AUDITORIA ------------------------------ */

/* Una bitacora se lee en vertical: 50 fechas y 50 claves una debajo de otra.
   Mono + cifras de ancho fijo para que las columnas cuadren y se comparen. */
.aud-mono {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1; letter-spacing: 0;
}
.golden-tl-title .aud-mono { font-weight: 600; font-size: 0.95em; }

/* -------------------------- MASTER_DETAIL (tipo 5) -------------------------- */

.golden-md-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-5); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
}
.golden-md-detail-title {
  margin: 0; font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-bold); line-height: 1.25;
  color: var(--text-primary); overflow-wrap: anywhere;
}
.golden-md-detail-acciones {
  display: flex; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap;
}
/* Campos de sistema (quien registro, cuando) FUERA de la reja de datos de
   negocio, como pide la maqueta. `:empty` la oculta sola cuando ninguno de
   los campos trae dato, asi el generador no necesita una condicion extra. */
.golden-md-audit {
  margin-top: 4px; font-family: var(--font-mono); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums; color: var(--text-muted);
  overflow-wrap: anywhere;
}
.golden-md-audit:empty { display: none; }
.golden-md-identidad {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-inset); border-bottom: 1px solid var(--border-color);
}
.golden-md-secnav {
  display: flex; gap: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto; scrollbar-width: thin;
}
.golden-md-sectab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; background: none; border: none;
  border-bottom: 2px solid transparent; padding: 0 2px var(--space-2);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-muted); white-space: nowrap; cursor: pointer;
}
.golden-md-sectab:hover { color: var(--text-primary); }
.golden-md-sectab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.golden-md-sectab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.golden-md-volver {
  padding: var(--space-2) var(--space-4);
  background: var(--surface-inset); border-bottom: 1px solid var(--border-color);
}
.golden-md-volver-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; background: none; border: none; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; font-family: inherit; font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--color-primary); cursor: pointer;
}
.golden-md-volver-btn:hover { text-decoration: underline; }
/* Especificidad 0,2,0: gana a .golden-btn-ghost venga antes o despues. */
.golden-btn-ghost.is-danger {
  color: var(--color-danger-text);
  border-color: color-mix(in srgb, var(--color-danger) 40%, var(--border-color));
}
.golden-btn-ghost.is-danger:hover { background: var(--color-danger-muted); }
.ui-formfield-value.is-mono, .dg-td.is-mono {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

/* -------------------------------- KANBAN --------------------------------
   El tablero traia 50 utilidades de color de Tailwind a fuego. En un kanban
   eso se nota el doble: el color de la columna, el aviso de limite y el
   avatar son justo lo que el tablero COMUNICA. Reparto de superficies: la
   COLUMNA va hundida y la TARJETA levantada, para que la tarjeta se lea como
   objeto movible sobre el carril. */

.kan-board { scroll-padding-inline: 4px; }
.kan-col { background: var(--sup2); border: 1px solid var(--linea); border-radius: 12px; }
.kan-col--wip {
  border-color: var(--vencido);
  background: color-mix(in srgb, var(--vencido-suave) 65%, var(--sup2));
}
.kan-col-titulo {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta); margin: 0;
}
.kan-conteo {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--tinta) 10%, transparent); color: var(--texto2);
}
.kan-conteo--wip { background: var(--vencido-suave); color: var(--vencido-txt); }
.kan-ico-btn {
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--texto3); cursor: pointer; line-height: 1;
}
.kan-ico-btn:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); color: var(--tinta); }
.kan-ico-btn--accion { color: var(--accion-txt); }
.kan-ico-btn--accion:hover { background: var(--accion-suave); color: var(--accion-on-suave); }
.kan-drop { height: 3px; border-radius: 999px; background: var(--accion); }
.kan-card {
  background: var(--sup); border: 1px solid var(--linea); border-radius: 8px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(22,34,58,.06));
}
.kan-card:hover { box-shadow: var(--sombra); border-color: var(--linea2); }
.kan-orden {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: var(--accion-suave); color: var(--accion-on-suave);
}
/* El titulo de tarjeta va en la tipografia de CUERPO a proposito: es una
   etiqueta de 13px repetida decenas de veces en el tablero; con la display a
   ese tamano el carril se vuelve ruido. La display se reserva al titulo de
   columna. */
.kan-card-titulo {
  font-family: var(--font-family-primary); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0; color: var(--tinta); margin: 0;
}
.kan-card-titulo:hover { color: var(--accion-txt); }
.kan-dots {
  width: 24px; height: 24px; display: inline-grid; place-items: center;
  border: 0; border-radius: 4px; background: transparent;
  color: var(--texto3); cursor: pointer;
}
.kan-dots:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); color: var(--tinta); }
.kan-menu {
  min-width: 132px; padding: 4px 0; background: var(--sup);
  border: 1px solid var(--linea); border-radius: 8px; box-shadow: var(--sombra);
}
.kan-menu-item {
  display: block; width: 100%; text-align: left; padding: 6px 12px;
  border: 0; background: transparent; font-size: 12.5px;
  color: var(--texto); cursor: pointer;
}
.kan-menu-item:hover { background: var(--sup2); }
.kan-menu-item--peligro { color: var(--vencido-txt); }
.kan-menu-item--peligro:hover { background: var(--vencido-suave); }
.kan-card-desc { font-size: 11.5px; color: var(--texto2); }
.kan-card-dato { font-size: 11.5px; color: var(--texto2); }
.kan-tag {
  font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 4px;
  background: var(--accion-suave); color: var(--accion-on-suave);
}
.kan-card-pie { border-top: 1px solid var(--linea2); }
.kan-card-fecha {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--texto3);
}
.kan-avatar {
  width: 24px; height: 24px; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--accion); color: var(--accion-on-accion);
  font-size: 11px; font-weight: 700;
}
.kan-quickadd {
  font-size: 12.5px; padding: 7px 12px;
  border: 1px dashed var(--linea); border-radius: 8px;
  background: transparent; color: var(--texto);
}
.kan-quickadd::-moz-placeholder { color: var(--texto3); }
.kan-quickadd::placeholder { color: var(--texto3); }
.kan-quickadd:focus { outline: none; border-style: solid; border-color: var(--accion); }

/* --------------------------- CONFIGURACION (tipo 9) ---------------------------
   Las credenciales NO se pintan con el emisor generico de campos: se retiran
   antes y se pintan aqui, ENMASCARADAS. El desplegado de "Capturar" es CSS
   puro (un checkbox hermano) para no depender de estado de React. */

.cfg-select {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--linea); border-radius: var(--radius-md, 8px);
  background: var(--sup); color: var(--texto);
  font-family: inherit; font-size: var(--text-sm, 13px);
}
.cfg-select:focus { outline: none; border-color: var(--accion); }

.cfg-hint { font-size: var(--text-xs, 12px); color: var(--texto3); margin: 0; }

.cfg-cred {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--space-3, 12px); padding: var(--space-3, 12px);
  border: 1px solid var(--linea); border-radius: var(--radius-md, 8px);
  background: var(--sup2);
}
/* El interruptor vive fuera de la vista pero sigue siendo alcanzable con
   teclado a traves de su <label>, que es el boton visible. */
.cfg-cred-sw { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-cred-t1 { font-size: var(--text-sm, 13px); font-weight: 600; color: var(--tinta); }
.cfg-cred-t2 { font-size: var(--text-xs, 12px); color: var(--texto3); margin-top: 2px; }
/* La mascara: ni el valor ni su longitud real salen del servidor. */
.cfg-cred-mask {
  font-family: var(--font-mono); letter-spacing: .12em;
  font-size: var(--text-sm, 13px); color: var(--texto2); margin-top: 2px;
}
.cfg-cred-acc { display: flex; align-items: center; gap: var(--space-2, 8px); }
.cfg-cred-btn { cursor: pointer; }
/* Oculta hasta que el interruptor se enciende. `grid-column: 1 / -1` para que
   la caja de captura ocupe el ancho completo de la fila al aparecer. */
.cfg-cred-captura { display: none; grid-column: 1 / -1; }
.cfg-cred-sw:checked ~ .cfg-cred-captura { display: block; }