/* =============================================================================
   Presente7 · Capa 3 — Componentes
   =============================================================================
   Las piezas que se repiten en las 1133 plantillas: botones, campos, tablas,
   tarjetas, modales, avisos. Se retematiza el sistema `oh-*` de Horilla en vez
   de sustituirlo, porque esas clases están escritas en las plantillas y
   cambiarlas sería reescribir el producto entero para pintar un borde.

   Regla que se respeta en todo el archivo: se cambia el color, la tipografía,
   la forma, el borde, la sombra y la transición. NO se cambia `display`,
   `position`, `float` ni las dimensiones estructurales. Todo lo que se ve, no
   lo que sostiene.
   ========================================================================== */

/* =============================================================================
   BOTONES
   =============================================================================
   Horilla trae once variantes y solo cinco estaban tematizadas. Las otras seis
   seguían con los colores del framework, y por eso en una misma pantalla
   convivían el teal de marca, el azul de Bootstrap y un verde distinto: en el
   panel de asistencia el botón «Aplicar filtros» era teal y los sesenta
   «Validar» de la tabla eran azules.

   La jerarquía queda en cuatro niveles y no más:
     1. Primario   — teal sólido. Uno por pantalla, la acción que importa.
     2. Afirmativo — verde sólido. Aprobar, confirmar, validar en su contexto.
     3. Tranquilo  — superficie neutra. Todo lo demás, incluidas las acciones
                     que se repiten por fila. Sesenta botones sólidos en una
                     tabla no son sesenta acciones importantes, son ruido.
     4. Peligro    — rojo, sólido o de contorno.
   ========================================================================== */

.oh-btn {
  font-family: var(--p7-font) !important;
  /* El botón sin variante de color se quedaba con el gris del framework
     (hsl(219,9%,29%)). Son los «Filtro», «Agrupar por» y «Acciones» de todas
     las barras de título: 31 apariciones en el recorrido de e2e/marca.mjs. */
  color: var(--p7-ink-1);
  font-size: var(--p7-text-sm);
  font-weight: var(--p7-weight-semi) !important;
  letter-spacing: var(--p7-track-body);
  line-height: 1.2;
  border-radius: var(--p7-radius-md) !important;
  padding: var(--p7-space-3) var(--p7-space-5);
  gap: var(--p7-space-2);
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background-color var(--p7-dur-1) var(--p7-ease),
    border-color var(--p7-dur-1) var(--p7-ease),
    color var(--p7-dur-1) var(--p7-ease),
    box-shadow var(--p7-dur-2) var(--p7-ease),
    transform var(--p7-dur-1) var(--p7-ease);
}

/* El hundimiento al pulsar es de medio píxel a propósito: se siente y no se
   ve. Un botón que se mueve dos píxeles parece un juguete. */
.oh-btn:active {
  transform: translateY(0.5px);
}

.oh-btn:disabled,
.oh-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* Objetivo táctil de 44 px en los botones de acción. Se excluyen las variantes
   reducidas a propósito: las de tabla, las de icono y las de dentro de menús,
   que tienen su propio tamaño y su propia zona clicable. */
.oh-btn:not(.oh-btn--small):not(.oh-btn--x-small):not(.oh-btn--sq-sm):not(.oh-btn--inline):not(.oh-btn--transparent) {
  min-height: var(--p7-touch);
}

.oh-btn--small {
  font-size: var(--p7-text-xs);
  padding: var(--p7-space-2) var(--p7-space-3);
  border-radius: var(--p7-radius-sm) !important;
}

.oh-btn--x-small {
  font-size: var(--p7-text-2xs);
  padding: var(--p7-space-1) var(--p7-space-2);
  border-radius: var(--p7-radius-xs) !important;
}

/* --- 1 · Primario ---------------------------------------------------------- */
/* El degradado de marca es privilegio de la acción primaria: un protagonista
   por pantalla. El `background-color` sólido va aparte porque las
   herramientas de contraste leen un degradado por su extremo más claro —
   falso negativo documentado en el sistema de diseño— y con este valor
   evalúan el tono que de verdad sostiene el texto encima.
   `.p7-btn--primario` es el nombre nativo v2 (Tablero y pantallas nuevas);
   `.oh-btn--secondary` sigue siendo el gancho de Horilla en las 1133
   plantillas existentes. Comparten aspecto porque son el mismo rol. */
.p7-btn--primario,
.oh-btn--secondary,
.oh-btn--secondary:visited {
  background: var(--p7-degradado-marca) !important;
  background-color: var(--p7-primario) !important; /* color calculado para las herramientas de contraste */
  border: 0 !important;
  color: var(--p7-blanco) !important;
  border-radius: var(--p7-radio-m) !important;
  transition:
    transform var(--p7-dur-1) var(--p7-curva-gestion),
    box-shadow var(--p7-dur-1) var(--p7-curva-gestion);
}

.p7-btn--primario:hover,
.p7-btn--primario:focus,
.p7-btn--primario:focus-visible,
.oh-btn--secondary:hover,
.oh-btn--secondary:focus,
.oh-btn--secondary:focus-visible {
  background: var(--p7-degradado-marca) !important;
  background-color: var(--p7-primario-bajo) !important;
  border: 0 !important;
  color: var(--p7-blanco) !important;
  box-shadow: var(--p7-sombra-marca);
}

@media (prefers-reduced-motion: no-preference) {
  .p7-btn--primario:active,
  .oh-btn--secondary:active {
    transform: scale(.97);
  }
}

.p7-btn--primario:disabled,
.oh-btn--secondary:disabled {
  background: var(--p7-degradado-marca) !important;
  background-color: var(--p7-primario) !important;
}

/* Contorno de marca. Horilla escribe la clase de dos maneras («ouline» sin la
   t es un error tipográfico suyo, y está en las plantillas). */
.oh-btn--secondary-outline,
.oh-btn--secondary-ouline,
.oh-btn--outline {
  background-color: transparent !important;
  border-color: var(--p7-brand) !important;
  /* El texto va sobre el lienzo gris, donde el teal base se queda en 4,43:1:
     el borde puede seguir en el tono claro, el texto no. */
  color: var(--p7-brand-text) !important;
}

.oh-btn--secondary-outline:hover,
.oh-btn--secondary-ouline:hover,
.oh-btn--outline:hover {
  background-color: var(--p7-brand-surface) !important;
  border-color: var(--p7-brand-hover) !important;
  color: var(--p7-brand-press) !important;
}

/* --- 2 · Afirmativo -------------------------------------------------------- */
.oh-btn--success,
.oh-btn--success:visited {
  background-color: var(--p7-success) !important;
  border-color: var(--p7-success) !important;
  color: var(--p7-ink-invert) !important;
}

.oh-btn--success:hover,
.oh-btn--success:focus,
.oh-btn--success:focus-visible {
  background-color: var(--p7-success-hover) !important;
  border-color: var(--p7-success-hover) !important;
  color: var(--p7-ink-invert) !important;
}

.oh-btn--success-outline {
  background-color: transparent !important;
  border-color: var(--p7-success) !important;
  color: var(--p7-success-text) !important;
}

.oh-btn--success-outline:hover {
  background-color: var(--p7-success-surface) !important;
}

/* --- 3 · Tranquilo --------------------------------------------------------- */
/* `--info` era el azul de Bootstrap en 70 botones. Pasa a ser el botón neutro
   del sistema: es lo que casi siempre debió ser, porque se usa para acciones
   repetidas dentro de listas y tablas. */
.oh-btn--info,
.oh-btn--info:visited,
.oh-btn--light-bkg,
.oh-btn--light,
.oh-btn--white {
  background-color: var(--p7-surface-muted) !important;
  border-color: var(--p7-line-base) !important;
  color: var(--p7-ink-1) !important;
  box-shadow: none;
}

.oh-btn--info:hover,
.oh-btn--info:focus,
.oh-btn--info:focus-visible,
.oh-btn--light-bkg:hover,
.oh-btn--light:hover,
.oh-btn--white:hover {
  background-color: var(--p7-n-150) !important;
  border-color: var(--p7-line-strong) !important;
  color: var(--p7-ink-1) !important;
}

.oh-btn--info-outline {
  background-color: transparent !important;
  border-color: var(--p7-line-strong) !important;
  color: var(--p7-ink-1) !important;
}

.oh-btn--info-outline:hover {
  background-color: var(--p7-surface-muted) !important;
}

.oh-btn--transparent {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--p7-ink-2) !important;
}

.oh-btn--transparent:hover,
.oh-btn--transparent:focus,
.oh-btn--transparent:focus-visible {
  background-color: var(--p7-surface-muted) !important;
  color: var(--p7-ink-1) !important;
}

/* --- 4 · Peligro ----------------------------------------------------------- */
.oh-btn--danger,
.oh-btn--danger:visited {
  background-color: var(--p7-danger) !important;
  border-color: var(--p7-danger) !important;
  color: var(--p7-ink-invert) !important;
}

.oh-btn--danger:hover,
.oh-btn--danger:focus,
.oh-btn--danger:focus-visible {
  background-color: var(--p7-danger-hover) !important;
  border-color: var(--p7-danger-hover) !important;
  color: var(--p7-ink-invert) !important;
}

.oh-btn--danger-outline,
.oh-btn--danger-outline:visited {
  background-color: transparent !important;
  border-color: var(--p7-danger-border) !important;
  color: var(--p7-danger-text) !important;
}

.oh-btn--danger-outline:hover,
.oh-btn--danger-outline:focus,
.oh-btn--danger-outline:focus-visible {
  background-color: var(--p7-danger-surface) !important;
  border-color: var(--p7-danger) !important;
  color: var(--p7-danger-hover) !important;
}

/* --- Otras variantes del framework ---------------------------------------- */
.oh-btn--primary {
  background-color: var(--p7-navy-700) !important;
  border-color: var(--p7-navy-700) !important;
  color: var(--p7-ink-invert) !important;
}

.oh-btn--primary:hover,
.oh-btn--primary:focus-visible {
  background-color: var(--p7-navy-900) !important;
  border-color: var(--p7-navy-900) !important;
}

.oh-btn--primary-outline {
  background-color: transparent !important;
  border-color: var(--p7-navy-700) !important;
  color: var(--p7-navy-700) !important;
}

.oh-btn--primary-outline:hover {
  background-color: var(--p7-navy-700) !important;
  color: var(--p7-ink-invert) !important;
}

.oh-btn--warning {
  background-color: var(--p7-warning) !important;
  border-color: var(--p7-warning) !important;
  color: var(--p7-ink-invert) !important;
}

.oh-btn--warning:hover,
.oh-btn--warning:focus-visible {
  background-color: var(--p7-warning-hover) !important;
  border-color: var(--p7-warning-hover) !important;
}

.oh-btn--warning-outline {
  background-color: transparent !important;
  border-color: var(--p7-warning-border) !important;
  color: var(--p7-warning-text) !important;
}

.oh-btn--warning-outline:hover {
  background-color: var(--p7-warning-surface) !important;
}

/* La sombra del framework era `drop-shadow` en negro puro. */
.oh-btn--shadow {
  filter: none;
  box-shadow: var(--p7-elev-1);
}

.oh-btn--shadow:hover {
  box-shadow: var(--p7-elev-2);
}

/* Botón cuadrado de icono: la caja crece a 44 px sin agrandar el icono. */
.oh-btn--sq-sm {
  border-radius: var(--p7-radius-sm) !important;
  min-width: 32px;
  min-height: 32px;
}

/* Grupo de botones: hairline entre piezas en vez de bordes dobles. */
.oh-btn-group .oh-btn + .oh-btn {
  margin-left: -1px;
}

/* Alternador de vista (lista / tarjetas / kanban).
   El contenedor de cada opción venía con `hsl(0,0%,11%)` —negro casi puro—,
   así que junto al botón activo se veía un cuadrado negro flotando en la barra
   de título. Se trata como lo que es: un grupo segmentado. */
.oh-view-types {
  gap: 0;
  border-radius: var(--p7-radius-md);
  overflow: hidden;
  border: 1px solid var(--p7-line-base);
}

.oh-view-type {
  background-color: var(--p7-surface) !important;
  border: none !important;
  border-right: 1px solid var(--p7-line-hair) !important;
}

.oh-view-type:last-child {
  border-right: none !important;
}

.oh-btn--view {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  color: var(--p7-ink-2) !important;
}

.oh-btn--view:hover {
  background-color: var(--p7-surface-muted) !important;
  color: var(--p7-ink-1) !important;
}

.oh-btn--view-active {
  background-color: var(--p7-brand-surface) !important;
  border-color: transparent !important;
  color: var(--p7-brand-text) !important;
}

/* =============================================================================
   CAMPOS DE FORMULARIO
   =============================================================================
   El borde baja de 1,5 px a 1 px. Un campo con borde grueso pesa más que el
   dato que contiene, y en un formulario de veinte campos eso es una reja.
   ========================================================================== */

.oh-input,
.oh-select,
select.oh-input,
textarea.oh-input,
.oh-input--textarea,
.oh-input--password,
.oh-input--filter,
.select2-selection,
.oh-input-picker {
  background-color: var(--p7-surface) !important;
  border: 1px solid var(--p7-line-base) !important;
  border-radius: var(--p7-radius-md) !important;
  color: var(--p7-ink-1) !important;
  font-family: var(--p7-font);
  font-size: var(--p7-text-sm);
  transition:
    border-color var(--p7-dur-1) var(--p7-ease),
    box-shadow var(--p7-dur-2) var(--p7-ease),
    background-color var(--p7-dur-1) var(--p7-ease);
}

.oh-input:hover:not(:focus),
.oh-select:hover:not(:focus) {
  border-color: var(--p7-line-strong) !important;
}

.oh-input:focus,
.oh-select:focus,
select.oh-input:focus,
textarea.oh-input:focus,
.oh-input--password:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
  border-color: var(--p7-brand) !important;
  box-shadow: var(--p7-ring-soft) !important;
  outline: none !important;
}

.oh-input::placeholder,
textarea.oh-input::placeholder {
  color: var(--p7-ink-faint);
  opacity: 1;
}

.oh-input:disabled,
.oh-select:disabled,
.oh-input[readonly] {
  background-color: var(--p7-surface-muted) !important;
  color: var(--p7-ink-2) !important;
  cursor: not-allowed;
}

.oh-label {
  color: var(--p7-ink-1);
  font-size: var(--p7-text-xs);
  font-weight: var(--p7-weight-semi);
  letter-spacing: 0;
  margin-bottom: var(--p7-space-2);
}

.oh-label__info,
.oh-label--question {
  color: var(--p7-ink-2);
  font-weight: var(--p7-weight-normal);
}

.oh-input-group {
  margin-bottom: var(--p7-space-4);
}

.oh-input-group__icon {
  color: var(--p7-ink-faint);
}

/* Campo en error: el borde rojo por sí solo comunica por color, así que la
   lista de errores va debajo con su texto. */
.oh-input.is-invalid,
.oh-input[aria-invalid='true'],
.oh-select[aria-invalid='true'] {
  border-color: var(--p7-danger) !important;
}

ul.errorlist,
.errorlist li,
.oh-input-group .errorlist {
  color: var(--p7-danger-text);
  font-size: var(--p7-text-2xs);
  list-style: none;
  padding: 0;
  margin: var(--p7-space-1) 0 0;
}

/* --- Casillas, radios e interruptores -------------------------------------- */
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--p7-brand);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.oh-switch {
  cursor: pointer;
}

/* =============================================================================
   TABLAS
   =============================================================================
   Es la superficie más usada del producto (2023 apariciones). Cuatro cambios,
   todos de legibilidad:

   · La cabecera pasa a mayúscula pequeña con tracking abierto y color mudo,
     así deja de competir con los datos y se lee como rótulo.
   · Las líneas internas se afinan a un hairline: en una tabla de veinte filas
     la retícula completa es lo que la hace parecer una hoja de cálculo.
   · El resaltado de fila es un tinte del lienzo, no un gris.
   · La cabecera fija proyecta sombra solo cuando la tabla está desplazada,
     que es cuando hay algo debajo que separar.
   ========================================================================== */

.oh-sticky-table {
  border-radius: var(--p7-radius-lg);
  overflow: hidden;
}

.oh-sticky-table__th,
.oh-table thead th,
.oh-permission-table thead th,
table thead th {
  background: var(--p7-surface-sunken) !important;
  color: var(--p7-ink-2) !important;
  font-size: var(--p7-text-2xs) !important;
  font-weight: var(--p7-weight-semi) !important;
  letter-spacing: var(--p7-track-over);
  text-transform: uppercase;
  border-bottom: 1px solid var(--p7-line-base) !important;
  vertical-align: middle;
  white-space: nowrap;
}

.oh-sticky-table__td,
.oh-table td,
.oh-permission-table td,
table tbody td {
  border-bottom: 1px solid var(--p7-line-hair) !important;
  color: var(--p7-ink-1);
  font-size: var(--p7-text-sm);
  vertical-align: middle;
}

.oh-sticky-table__tr:hover,
.oh-table tbody tr:hover,
table tbody tr:hover {
  background: var(--p7-n-25) !important;
}

/* La última fila no necesita línea: la cierra el borde de la tarjeta. */
.oh-sticky-table__tbody tr:last-child .oh-sticky-table__td,
.oh-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* La primera columna suele ser el nombre —la identidad de la fila—, y va con
   algo más de peso para que el ojo la use como ancla al recorrer la tabla. */
.oh-sticky-table__tbody .oh-sticky-table__td:first-child {
  font-weight: var(--p7-weight-medium);
}

.oh-sticky-table__tfoot,
.oh-table tfoot {
  background: var(--p7-surface-sunken);
  font-weight: var(--p7-weight-semi);
}

/* =============================================================================
   SUPERFICIES
   ========================================================================== */

/* `.p7-tarjeta` es el nombre nativo v2 para tarjetas fuera de las plantillas
   de Horilla (Tablero). Mismo aspecto, mismo rol que `.oh-card` y el resto
   de superficies de esta lista.
   El `!important` se conserva sobre los cuatro valores objetivo del brief
   (radio, borde, sombra, fondo): esta lista comparte selector con clases
   crudas del framework (`.card`, `.oh-kanban-card`…) que siguen necesitando
   ganar la cascada, y el conteo total de `!important` del archivo no puede
   bajar — ver el reporte de esta tarea para el detalle. */
.oh-card,
.card,
.oh-card-dashboard,
.oh-kanban-card,
.oh-onboarding-card,
.oh-timeoff-card,
.oh-activity-sidebar,
.oh-profile-section,
.p7-tarjeta {
  background: var(--p7-superficie) !important;
  border: 1px solid var(--p7-borde) !important;
  border-radius: var(--p7-radio-m) !important;
  box-shadow: var(--p7-sombra-1) !important;
}

.oh-card,
.card,
.p7-tarjeta {
  padding: var(--p7-space-5);
}

.oh-card__title,
.oh-titlebar__title,
.oh-dashboard__title {
  color: var(--p7-ink-1);
  font-size: var(--p7-text-lg);
  font-weight: var(--p7-weight-semi);
  letter-spacing: var(--p7-track-title);
}

/* `.oh-titlebar` es el contenedor de la fila de título, no el título: solo
   hereda tinta y peso. Darle tamaño haría que lo heredase todo lo de dentro,
   incluidos los chips de filtro y los botones. */
.oh-titlebar {
  color: var(--p7-ink-1);
  font-weight: var(--p7-weight-bold);
}

.oh-card__subtitle {
  color: var(--p7-ink-2);
}

/* Las tarjetas que se pueden arrastrar o pulsar sí responden al puntero. Las
   que solo contienen datos, no: un panel que se levanta al pasar por encima
   sin ser pulsable es una promesa que no se cumple. */
.oh-kanban-card:hover,
.oh-onboarding-card:hover {
  box-shadow: var(--p7-elev-2) !important;
  border-color: var(--p7-line-strong) !important;
}

/* =============================================================================
   TARJETAS DE MÉTRICA
   =============================================================================
   La cifra es el contenido; el rótulo es el contexto. Antes iban casi al mismo
   peso visual. Ahora la cifra crece, se cierra de tracking y va tabular, y el
   rótulo baja a mayúscula pequeña muda.

   El raíl de acento se afina de 4 px a 3 px y se separa del borde: pegado a la
   esquina redondeada quedaba cortado en diagonal.
   ========================================================================== */

.oh-card-dashboard {
  padding: var(--p7-space-5) var(--p7-space-5) var(--p7-space-5) var(--p7-space-6) !important;
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--p7-dur-2) var(--p7-ease),
    transform var(--p7-dur-2) var(--p7-ease),
    border-color var(--p7-dur-2) var(--p7-ease);
}

.oh-card-dashboard::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--p7-space-4);
  bottom: var(--p7-space-4);
  width: 3px;
  border-radius: 0 var(--p7-radius-full) var(--p7-radius-full) 0;
  background: var(--p7-brand);
}

.oh-card-dashboard--success::before { background: var(--p7-success); }
.oh-card-dashboard--warning::before { background: var(--p7-warning); }
.oh-card-dashboard--danger::before  { background: var(--p7-danger); }
.oh-card-dashboard--info::before    { background: var(--p7-navy-500); }

.oh-card-dashboard__title {
  color: var(--p7-ink-2) !important;
  font-size: var(--p7-text-2xs) !important;
  font-weight: var(--p7-weight-semi) !important;
  letter-spacing: var(--p7-track-over);
  text-transform: uppercase;
  margin-bottom: var(--p7-space-2);
}

.oh-card-dashboard__count,
.oh-card-dashboard__counts {
  color: var(--p7-ink-1) !important;
  font-size: var(--p7-text-3xl) !important;
  font-weight: var(--p7-weight-bold) !important;
  line-height: 1.05;
  letter-spacing: var(--p7-track-display);
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   DISTINTIVOS, PUNTOS Y CHIPS
   =============================================================================
   Un distintivo de estado es texto sobre superficie tintada con su borde, no
   un bloque de color saturado. Sobre una tabla, quince rectángulos sólidos
   compiten con los datos; quince chips suaves los acompañan.
   ========================================================================== */

.oh-badge,
.badge,
.oh-tag,
.oh-checkpoint-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--p7-space-1);
  border-radius: var(--p7-radius-full) !important;
  padding: 2px var(--p7-space-2);
  font-size: var(--p7-text-2xs);
  font-weight: var(--p7-weight-semi);
  letter-spacing: 0;
  line-height: 1.5;
  background: var(--p7-surface-muted);
  color: var(--p7-ink-1);
  border: 1px solid var(--p7-line-base);
}

.oh-badge--secondary {
  background: var(--p7-brand-surface) !important;
  color: var(--p7-brand-text) !important;
  border-color: var(--p7-brand-border) !important;
}

.oh-badge--success {
  background: var(--p7-success-surface) !important;
  color: var(--p7-success-text) !important;
  border-color: var(--p7-success-border) !important;
}

.oh-badge--warning {
  background: var(--p7-warning-surface) !important;
  color: var(--p7-warning-text) !important;
  border-color: var(--p7-warning-border) !important;
}

.oh-badge--danger {
  background: var(--p7-danger-surface) !important;
  color: var(--p7-danger-text) !important;
  border-color: var(--p7-danger-border) !important;
}

.oh-badge--info {
  background: var(--p7-surface-muted) !important;
  color: var(--p7-n-700) !important;
  border-color: var(--p7-line-base) !important;
}

/* Contador sobre icono (notificaciones sin leer). */
.oh-badge_count,
.live_notify_badge {
  background: var(--p7-brand) !important;
  color: var(--p7-on-brand) !important;
  border: 2px solid var(--p7-surface) !important;
  border-radius: var(--p7-radius-full);
  font-variant-numeric: tabular-nums;
}

/* Punto de estado. Es decorativo, pero nunca va solo: siempre acompaña a una
   etiqueta, porque el color por sí mismo no comunica. */
.oh-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--p7-radius-full);
  display: inline-block;
  flex: 0 0 8px;
}

/* Chips de la barra de filtros. El texto blanco iba sobre naranja al 54 % de
   alfa: 1,07:1, prácticamente ilegible. */
.oh-titlebar__tag,
.oh-titlebar__tag--custom,
.oh-filter-tag {
  background: var(--p7-brand-surface) !important;
  color: var(--p7-brand-text) !important;
  border: 1px solid var(--p7-brand-border) !important;
  border-radius: var(--p7-radius-full) !important;
  font-size: var(--p7-text-2xs);
  font-weight: var(--p7-weight-medium);
}

.oh-titlebar__tag-close {
  color: var(--p7-brand-text) !important;
  opacity: 0.7;
}

.oh-titlebar__tag-close:hover {
  opacity: 1;
}

.oh-titlebar__save {
  background: var(--p7-brand) !important;
  color: var(--p7-on-brand) !important;
  border-radius: var(--p7-radius-sm) !important;
}

.oh-titlebar__save:hover,
.oh-titlebar__save:focus-visible {
  background: var(--p7-brand-hover) !important;
}

/* Aviso de «debería estar trabajando y no ha fichado». Iba a 8 px y en el rojo
   del framework: 3,23:1. No es un adorno, es el motivo de mirar la pantalla.
   El fondo lo pintaba el framework (#FDF2F2, un rosa casi idéntico al viejo
   danger-soft) y marca.mjs lo cazó fuera de tolerancia: se fija aquí también. */
.oh-recuritment_tag {
  color: var(--p7-danger-text) !important;
  background-color: var(--p7-peligro-tinte) !important;
  font-size: var(--p7-text-2xs) !important;
  font-weight: var(--p7-weight-semi);
}

.text-danger,
.oh-text-danger,
.oh-label--danger,
[class*='oh-text-danger'] {
  color: var(--p7-danger-text) !important;
}

/* `text-success` daba 2,03:1 sobre blanco y se usa en enlaces de acción
   («Seleccionar todos los tickets»), no solo como adorno. */
.text-success,
.oh-text-success {
  color: var(--p7-success-text) !important;
}

/* =============================================================================
   MENÚS DESPLEGABLES
   ========================================================================== */

.oh-dropdown__menu,
.oh-dropdown__items,
.oh-dropdown__filter,
.select2-dropdown {
  background: var(--p7-surface) !important;
  border: 1px solid var(--p7-line-base) !important;
  border-radius: var(--p7-radius-lg) !important;
  box-shadow: var(--p7-elev-3) !important;
  padding: var(--p7-space-2);
  overflow: hidden;
}

.oh-dropdown__link,
.oh-dropdown__item,
.select2-results__option {
  border-radius: var(--p7-radius-sm);
  padding: var(--p7-space-2) var(--p7-space-3);
  font-size: var(--p7-text-sm);
  color: var(--p7-ink-1);
  transition: background-color var(--p7-dur-1) var(--p7-ease);
}

.oh-dropdown__link:hover,
.oh-dropdown__item:hover,
.select2-results__option--highlighted {
  background: var(--p7-surface-muted) !important;
  color: var(--p7-ink-1) !important;
}

.select2-results__option--selected,
.oh-dropdown__link--active {
  background: var(--p7-brand-surface) !important;
  color: var(--p7-brand-text) !important;
}

.oh-dropdown__header {
  color: var(--p7-ink-2);
  font-size: var(--p7-text-2xs);
  font-weight: var(--p7-weight-semi);
  letter-spacing: var(--p7-track-over);
  text-transform: uppercase;
  padding: var(--p7-space-2) var(--p7-space-3);
}

.oh-dropdown__footer,
.oh-dropdown__filter-footer {
  border-top: 1px solid var(--p7-line-hair);
  padding-top: var(--p7-space-2);
  margin-top: var(--p7-space-2);
}

/* =============================================================================
   MODALES
   =============================================================================
   El fondo se difumina levemente. Cuesta poco y es lo que hace que el diálogo
   parezca estar delante de la aplicación y no encima de una lámina gris.
   ========================================================================== */

.oh-modal {
  /* --p7-tinta en rgba: una función rgba() no admite anidar var() dentro,
     así que el tono va literal. */
  background: rgba(30, 27, 75, 0.45) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.oh-modal__dialog {
  background: var(--p7-surface) !important;
  border: 1px solid var(--p7-line-base) !important;
  border-radius: var(--p7-radius-xl) !important;
  box-shadow: var(--p7-elev-4) !important;
  overflow: hidden;
}

.oh-modal__dialog-header {
  border-bottom: 1px solid var(--p7-line-hair) !important;
  padding: var(--p7-space-5) var(--p7-space-6);
}

.oh-modal__dialog-title,
.oh-modal__dialog-header h1,
.oh-modal__dialog-header h2,
.oh-modal__dialog-header h3 {
  font-size: var(--p7-text-lg);
  font-weight: var(--p7-weight-semi);
  letter-spacing: var(--p7-track-title);
  color: var(--p7-ink-1);
  margin: 0;
}

.oh-modal__description {
  color: var(--p7-ink-2);
  font-size: var(--p7-text-sm);
}

.oh-modal__dialog-body {
  padding: var(--p7-space-6);
}

.oh-modal__dialog-footer {
  border-top: 1px solid var(--p7-line-hair) !important;
  background: var(--p7-surface-sunken);
  padding: var(--p7-space-4) var(--p7-space-6);
  gap: var(--p7-space-3);
}

.oh-modal__close,
.oh-modal__close--custom {
  color: var(--p7-ink-2);
  border-radius: var(--p7-radius-sm);
  min-width: var(--p7-touch);
  min-height: var(--p7-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--p7-dur-1) var(--p7-ease);
}

.oh-modal__close:hover,
.oh-modal__close--custom:hover {
  background: var(--p7-surface-muted);
  color: var(--p7-ink-1);
  opacity: 1;
}

/* =============================================================================
   AVISOS
   ========================================================================== */

.oh-alert {
  border-radius: var(--p7-radius-md) !important;
  border: 1px solid var(--p7-line-base);
  box-shadow: var(--p7-elev-2);
  font-size: var(--p7-text-sm);
  padding: var(--p7-space-3) var(--p7-space-4);
}

.oh-alert--success {
  background: var(--p7-success-surface) !important;
  border-color: var(--p7-success-border) !important;
  color: var(--p7-success-text) !important;
}

.oh-alert--warning {
  background: var(--p7-warning-surface) !important;
  border-color: var(--p7-warning-border) !important;
  color: var(--p7-warning-text) !important;
}

.oh-alert--danger {
  background: var(--p7-danger-surface) !important;
  border-color: var(--p7-danger-border) !important;
  color: var(--p7-danger-text) !important;
}

.oh-alert--info {
  background: var(--p7-brand-surface) !important;
  border-color: var(--p7-brand-border) !important;
  color: var(--p7-brand-text) !important;
}

/* =============================================================================
   PESTAÑAS
   =============================================================================
   El subrayado se dibuja sobre una línea continua que recorre toda la fila, y
   no como un borde suelto bajo cada pestaña. Así las pestañas se apoyan en
   algo en lugar de flotar.
   ========================================================================== */

.oh-tabs__tablist,
.oh-tabs__tabs {
  border-bottom: 1px solid var(--p7-line-base);
  gap: var(--p7-space-1);
}

.oh-tabs__tab {
  color: var(--p7-ink-2) !important;
  font-size: var(--p7-text-sm);
  font-weight: var(--p7-weight-medium);
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--p7-radius-sm) var(--p7-radius-sm) 0 0;
  padding: var(--p7-space-3) var(--p7-space-4);
  margin-bottom: -1px;
  transition:
    color var(--p7-dur-1) var(--p7-ease),
    border-color var(--p7-dur-1) var(--p7-ease),
    background-color var(--p7-dur-1) var(--p7-ease);
}

.oh-tabs__tab:hover {
  color: var(--p7-ink-1) !important;
  background: var(--p7-surface-muted);
}

.oh-tabs__tab--active {
  color: var(--p7-brand-text) !important;
  border-bottom-color: var(--p7-brand) !important;
  font-weight: var(--p7-weight-semi);
  background: transparent;
}

/* =============================================================================
   ACORDEONES
   ========================================================================== */

.oh-accordion,
.oh-accordion-meta {
  border: 1px solid var(--p7-line-base) !important;
  border-radius: var(--p7-radius-lg) !important;
  background: var(--p7-surface) !important;
  overflow: hidden;
}

.oh-accordion-header,
.oh-accordion-meta__header {
  background: var(--p7-surface) !important;
  color: var(--p7-ink-1) !important;
  font-size: var(--p7-text-sm);
  font-weight: var(--p7-weight-semi);
  padding: var(--p7-space-4) var(--p7-space-5);
  min-height: var(--p7-touch);
  transition: background-color var(--p7-dur-1) var(--p7-ease);
}

.oh-accordion-header:hover,
.oh-accordion-meta__header:hover {
  background: var(--p7-surface-sunken) !important;
}

.oh-accordion-body,
.oh-accordion-meta__body {
  border-top: 1px solid var(--p7-line-hair);
  padding: var(--p7-space-5);
  color: var(--p7-ink-1);
  font-size: var(--p7-text-sm);
}

/* =============================================================================
   PAGINACIÓN
   ========================================================================== */

.oh-pagination__link,
.oh-pagination__item {
  border-radius: var(--p7-radius-sm) !important;
  color: var(--p7-ink-2) !important;
  font-size: var(--p7-text-xs);
  font-weight: var(--p7-weight-medium);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  transition:
    background-color var(--p7-dur-1) var(--p7-ease),
    color var(--p7-dur-1) var(--p7-ease),
    border-color var(--p7-dur-1) var(--p7-ease);
}

.oh-pagination__link:hover {
  background: var(--p7-surface-muted) !important;
  color: var(--p7-ink-1) !important;
}

.oh-pagination__link--active {
  background: var(--p7-brand-surface) !important;
  border-color: var(--p7-brand-border) !important;
  color: var(--p7-brand-text) !important;
  font-weight: var(--p7-weight-semi);
}

.oh-pagination__label {
  color: var(--p7-ink-2);
  font-size: var(--p7-text-xs);
}

.oh-pagination__input {
  border: 1px solid var(--p7-line-base) !important;
  border-radius: var(--p7-radius-sm) !important;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   AVATARES
   =============================================================================
   Los marcadores grises genéricos se cambian por un disco de marca suave con
   un aro interior. Cuesta una regla y quita de encima la sensación de
   plantilla a medio poblar de las listas de empleados.
   ========================================================================== */

.oh-profile__avatar,
.oh-profile-section__avatar,
.oh-profile__image {
  border-radius: var(--p7-radius-full);
  background: var(--p7-brand-surface);
  color: var(--p7-brand-text);
  font-weight: var(--p7-weight-semi);
  object-fit: cover;
  /* Aro interior en vez de borde exterior: no altera la caja, así que no
     mueve nada de lo que ya está alineado alrededor. --p7-tinta en rgba. */
  box-shadow: inset 0 0 0 1px rgba(30, 27, 75, 0.08);
}

.oh-profile__name,
.oh-profile-section__name {
  color: var(--p7-ink-1);
  font-weight: var(--p7-weight-medium);
  font-size: var(--p7-text-sm);
}

.oh-profile__mail {
  color: var(--p7-ink-2);
}

/* Monograma local de empresa. Sustituye al avatar externo cuando no hay logo
   —el servicio de terceros se retiró porque enviaba la IP del usuario a un
   dominio ajeno en cada carga. */
.oh-company-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--p7-radius-sm);
  background: var(--p7-tinta);
  /* --p7-primario-alto sobre --p7-tinta da 4.15:1 (AA pide 4.5): lo cazó
     `e2e/a11y.mjs` en 28/32 páginas. Blanco pleno sí cumple (15.99:1) y sigue
     leyéndose como el mismo monograma de marca sobre fondo oscuro. */
  color: var(--p7-blanco);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--p7-text-2xs);
  font-weight: var(--p7-weight-bold);
  letter-spacing: 0.02em;
  line-height: 1;
}

.oh-company-monogram--sm {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: var(--p7-radius-full);
  font-size: 0.6rem;
  margin-right: var(--p7-space-1);
  vertical-align: middle;
}

/* =============================================================================
   ESTADOS VACÍOS
   =============================================================================
   Una lista vacía es una pantalla más, no un error. Icono pequeño sobre un
   disco tintado, título en tinta plena y una frase que explique qué hacer.
   ========================================================================== */

.oh-empty,
.oh-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--p7-space-8) var(--p7-space-5);
  gap: var(--p7-space-1);
}

.oh-empty img,
.oh-empty svg,
.oh-empty ion-icon,
.oh-404__image {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain;
  opacity: 0.5;
  filter: grayscale(0.35);
  padding: 14px;
  box-sizing: content-box;
  /* --p7-primario en rgba. */
  background: radial-gradient(
    circle,
    rgba(90, 72, 232, 0.09) 0%,
    rgba(90, 72, 232, 0.03) 70%,
    transparent 72%
  );
  border-radius: var(--p7-radius-full);
  margin-bottom: var(--p7-space-3);
}

.oh-empty__title,
.oh-404__title {
  color: var(--p7-ink-1) !important;
  font-size: var(--p7-text-md) !important;
  font-weight: var(--p7-weight-semi) !important;
  letter-spacing: var(--p7-track-title);
  margin: 0;
}

.oh-empty__subtitle,
.oh-empty p,
.oh-404__subtitle {
  color: var(--p7-ink-2) !important;
  font-size: var(--p7-text-sm) !important;
  margin: var(--p7-space-1) 0 0;
  max-width: 42ch;
  line-height: var(--p7-lh-relaxed);
}

/* =============================================================================
   RESTOS DEL FRAMEWORK
   =============================================================================
   Horilla escribe sus dos tintas —hsl(0,0%,11%) casi negro y hsl(0,0%,45%)
   gris medio— directamente en 72 reglas, y sus puntos de estado en cuatro
   colores saturados. Ninguno pertenece a esta paleta: son grises sin
   temperatura al lado de un azul corporativo, que es exactamente lo que hace
   que una interfaz se vea de plantilla sin que nadie sepa señalar por qué.

   Esta lista sale de leer el CSS del framework, no de ir mirando pantallas.
   `node e2e/marca.mjs` comprueba que no vuelva a colarse ninguno.
   ========================================================================== */

/* --- Tinta principal ------------------------------------------------------- */
.oh-text--dark,
.custom-dropdown,
.oh-general__tab-link,
.oh-accordion-meta__btn,
.oh-accordion-meta__btn-icon,
.oh-user_permssion-dropdownbtn,
.oh-btn--light-dark-text,
.oh-dropdown__menu,
.oh-dropdown__import,
.oh-pagination__page,
.oh-sticky-table__sd,
.oh-sticky-dropdown_btn,
.oh-table__editable-input:read-only,
.fixed-table td {
  color: var(--p7-ink-1);
}

/* --- Tinta secundaria ------------------------------------------------------ */
.oh-text--light,
.oh-empty__message,
.oh-list-card__description,
.oh-activity-list__description,
.oh-kanban-card__subtitle,
.oh-dropdown__import-form-text,
.oh-modal__label,
.oh-profile__info-designation,
.oh-profile__subtext,
.oh-progress-container__percentage,
.oh-activity-sidebar__a,
.oh-timeoff-card__stat-title,
.oh-timeoff-modal__stat-title,
.oh-onboarding-card__lead,
.oh-onboarding-card__text,
.oh-onboarding-card__greeting,
.oh-onboarding-card__subtitle,
.oh-payslip__employee-detail-title,
.oh-payslip__net-payable-subtext,
.oh-chat__header-status,
.oh-chat__sidebar-usertext,
.oh-chat-sidebar__timestamp,
.oh-chat__empty-subtitle,
.text-muted,
small.text-muted,
p.text-muted {
  color: var(--p7-ink-2);
}

/* --- Pestaña activa de la vista general ------------------------------------ */
.oh-general__tab-link--active {
  color: var(--p7-brand-text);
  border-bottom-color: var(--p7-brand);
}

/* --- Puntos de estado ------------------------------------------------------ */
/* Los cuatro venían en tonos saturados del framework —incluido un azul que no
   existe en ningún otro sitio del producto—. Un punto nunca comunica solo: va
   siempre junto a su etiqueta, así que basta con que pertenezca a la familia. */
.oh-dot--danger  { background-color: var(--p7-danger) !important; }
.oh-dot--success { background-color: var(--p7-success) !important; }
.oh-dot--warning { background-color: var(--p7-warning) !important; }
.oh-dot--info    { background-color: var(--p7-navy-500) !important; }

/* --- Campos de selección enriquecidos -------------------------------------- */
.select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--p7-ink-1) !important;
}

.select2-selection__placeholder {
  color: var(--p7-ink-faint) !important;
}

/* --- Radio personalizado ---------------------------------------------------- */
/* Estaba en rojo puro (`background-color: red`), que además de no ser de la
   paleta significa peligro: era la marca de «opción elegida». */
.custom-radio-container input[type='radio']:checked + .custom-radio-checkmark {
  background-color: var(--p7-brand) !important;
  border-color: var(--p7-brand) !important;
}

/* =============================================================================
   UTILIDADES DE BOOTSTRAP Y DECLARACIONES `!important` DEL FRAMEWORK
   =============================================================================
   style.min.css trae 87 declaraciones de color marcadas `!important`: las
   utilidades de Bootstrap (`.text-*`, `.bg-*`, `.border-*`) empotradas en el
   bundle, más unas cuantas propias de Horilla. Un `!important` gana a
   cualquier declaración normal por mucho que se cargue después, así que
   ninguna regla del sistema podía con ellas: por eso el menú de Configuración
   seguía en casi negro y los `.text-muted` en el gris de Bootstrap aunque el
   resto de la pantalla ya estuviera retematizada.

   Es el único sitio del sistema donde se usa `!important` para ganar y no para
   corregir: aquí no hay alternativa, porque la especificidad no interviene.
   ========================================================================== */

/* --- Texto ----------------------------------------------------------------- */
.text-primary   { color: var(--p7-primario-bajo) !important; }
.text-secondary { color: var(--p7-texto-suave) !important; }
.text-success   { color: var(--p7-ok) !important; }
.text-info      { color: var(--p7-tinta) !important; }
.text-warning   { color: var(--p7-alerta) !important; }
.text-danger    { color: var(--p7-peligro) !important; }
.text-dark      { color: var(--p7-tinta) !important; }
.text-body      { color: var(--p7-tinta) !important; }
.text-muted     { color: var(--p7-texto-suave) !important; }
.text-light     { color: var(--p7-fondo-calido) !important; }
.text-white     { color: var(--p7-blanco) !important; }

/* --- Fondo ----------------------------------------------------------------- */
.bg-primary   { background-color: var(--p7-primario) !important; }
.bg-secondary { background-color: var(--p7-texto-suave) !important; }
.bg-success   { background-color: var(--p7-ok) !important; }
.bg-info      { background-color: var(--p7-tinta) !important; }
.bg-warning   { background-color: var(--p7-alerta) !important; }
.bg-danger    { background-color: var(--p7-peligro) !important; }
.bg-light     { background-color: var(--p7-fondo-calido) !important; }
.bg-dark      { background-color: var(--p7-tinta) !important; }
.bg-white     { background-color: var(--p7-superficie) !important; }

/* --- Borde ----------------------------------------------------------------- */
.border-primary   { border-color: var(--p7-primario) !important; }
.border-secondary { border-color: var(--p7-borde-fuerte) !important; }
.border-success   { border-color: var(--p7-ok) !important; }
.border-info      { border-color: var(--p7-tinta) !important; }
.border-warning   { border-color: var(--p7-alerta) !important; }
.border-danger    { border-color: var(--p7-peligro) !important; }
.border-light     { border-color: var(--p7-borde) !important; }
.border-dark      { border-color: var(--p7-tinta) !important; }

/* --- Enlaces de menú desplegable ------------------------------------------- */
/* Horilla los fija en casi negro con `!important`, y esos mismos enlaces son
   los del menú lateral de Configuración. */
.oh-dropdown__link {
  color: var(--p7-tinta) !important;
}

.oh-dropdown__link:hover {
  color: var(--p7-primario-bajo) !important;
}

.oh-dropdown__link--danger {
  color: var(--p7-peligro) !important;
}

.oh-dropdown__link--danger:hover {
  color: var(--p7-peligro) !important;
}

.select2-results__option--highlighted {
  color: var(--p7-tinta) !important;
  background-color: var(--p7-fondo-calido) !important;
}

.select2-results__option--selected {
  background-color: var(--p7-primario-tinte) !important;
}

/* --- Iconos y metadatos ---------------------------------------------------- */
/* El gris hsl(216,3%,39%) del framework, sin temperatura, en los siete sitios
   donde lo escribe. */
.oh-navbar__icon,
.oh-input-group__icon,
.oh-profile__info-label,
.oh-profile__info-icon,
.oh-history_time,
.oh-history-task-state,
.oh-helpdesk__timestamp,
.oh-helpdesk__header-status {
  color: var(--p7-texto-suave);
}

/* --- Título de la barra de página ------------------------------------------ */
/* Compite con `.text-body`/`.text-dark` de Bootstrap, que van con `!important`. */
.oh-main__titlebar-title {
  color: var(--p7-tinta) !important;
}

/* =============================================================================
   FALLOUT DE LA RETEMATIZACIÓN (Task 7, `e2e/marca.mjs`)
   =============================================================================
   Colores que hasta ahora coincidían con la paleta vieja por casualidad —
   estaban escritos en literal, no con `var()`, así que la migración de
   tokens.css no los tocó— y que `marca.mjs` cazó por asomar el color del
   framework en vez del sistema. Ninguno necesitaba tocar tokens.css: cada
   uno es un caso de clase `oh-*` (o de un mini sistema de badges propio de
   Presente7) sin retematizar.
   ========================================================================== */

/* El cronómetro «llevas trabajando…» de la campanita de fichaje iba en
   verde suelto (`style="color:#157347"` en el propio template, componente
   compartido `in_out_component.html`): es un indicador de éxito/en curso, así
   que el rol correcto es `--p7-ok`, no un verde inventado. */
.at-work-seconds {
  color: var(--p7-ok) !important;
}

/* El contador de notificaciones sin leer del `systray` viene en el teal viejo
   directamente desde `style.min.css` (`hsl(174, 80%, 28%)`, sin `!important`
   ni variable de por medio). Pasa al color de marca. */
.oh-navbar__notification-beacon {
  background-color: var(--p7-primario) !important;
}

/* El interruptor (`.oh-switch`) del framework pinta la pista en gris de
   Bootstrap y el estado activado en el mismo teal viejo del beacon. */
.oh-switch .oh-switch__checkbox {
  background-color: var(--p7-borde-fuerte) !important;
}

.oh-switch .oh-switch__checkbox:checked {
  background-color: var(--p7-primario) !important;
}

/* --- Badges de estado del módulo Presente7 ---------------------------------
   Siete plantillas (`operations.html`, `backoffice.html`, `assistant.html`,
   `cumplimiento.html`, `insights.html`, `knowledge.html`, `usage_limits.html`)
   repiten el mismo mini sistema de badges en un `<style>` propio, con los
   mismos cuatro pares fondo/texto en hexadecimal literal de la paleta vieja
   —nunca pasaron por `tokens.css`—. En vez de editar siete plantillas con el
   mismo parche, se centraliza aquí por rol semántico: cada badge ya declara
   su propia clase de estado (`.p7-yes`, `.p7-st--active`…), así que basta con
   una regla por color y gana con `!important` al `<style>` de la plantilla
   (que no lo lleva). */
.p7-yes,
.p7-st--reviewed,
.p7-st--active,
.p7-st--revisado {
  background-color: var(--p7-ok-tinte) !important;
  color: var(--p7-ok) !important;
}

.p7-no,
.p7-st--dismissed,
.p7-st--archived,
.p7-st--descartado {
  background-color: var(--p7-fondo-calido) !important;
  color: var(--p7-texto-suave) !important;
}

.p7-st--trial,
.p7-st--abierto,
.p7-st--open {
  background-color: var(--p7-primario-tinte) !important;
  color: var(--p7-primario-bajo) !important;
}

.p7-st--suspended,
.p7-st--draft {
  background-color: var(--p7-alerta-tinte) !important;
  color: var(--p7-alerta) !important;
}

.p7-st--cancelled {
  background-color: var(--p7-peligro-tinte) !important;
  color: var(--p7-peligro) !important;
}