/* ==========================================================================
   Primitivas de interfaz — visten las clases estándar con los tokens.

   Change de OpenSpec: design-system-tokens
   Requiere que `tokens.css` se cargue ANTES (orden:
   style.bundle.css -> tokens.css -> primitives.css).

   REGLA DE ORO
   ------------
   Todo valor sale de un token. No se declaran colores hexadecimales ni
   píxeles de espaciado sueltos fuera del BLOQUE DE COMPATIBILIDAD del final,
   que existe por una razón concreta y está comentado.

   ALCANCE
   -------
   Solo clases estándar (`.btn`, `.card`, `.form-control`, `.table`,
   `.badge`, `.alert`, `.pagination`). NO se estilizan identificadores ni la
   interfaz interna de los plugins del tema (select2 salvo su caja, DataTables,
   vis-timeline, drawers): si se tocan, se rompen pantallas que no hemos
   revisado.

   Los `btn-light-*` decorativos (primary/success/warning/info/dark) NO se
   revisten aquí: se limpian pantalla por pantalla en el bloque 6 del change,
   para no alterar usos semánticos legítimos.
   ========================================================================== */

/* ==========================================================================
   1. Botones
   Se reescriben las variables `--bs-btn-*` que el tema (Bootstrap 5.3) ya
   consume, en vez de declarar propiedades sueltas: así los estados de hover,
   activo y foco siguen funcionando solos.
   ========================================================================== */

/* Acción primaria: el único acento del sitio.
   OJO: el relleno y el borde de este botón NO salen de `--bs-btn-*`. Metronic
   tiene su propia regla `​.btn-primary{color:var(--bs-primary-inverse);
   border-color:var(--bs-primary); background-color:var(--bs-primary)}` que pisa
   al bundle de Bootstrap. Por eso el botón primario se retematiza cambiando
   `--bs-primary` en `tokens.css`, y sobreescribir `--bs-btn-bg` aquí NO haría
   nada. Las variables de abajo cubren solo los estados que el tema no fija. */
.btn.btn-primary {
    --bs-btn-color: var(--ds-accent-contrast);
    --bs-btn-bg: var(--ds-accent-surface);
    --bs-btn-border-color: var(--ds-accent-surface);
    --bs-btn-hover-color: var(--ds-accent-contrast);
    --bs-btn-hover-bg: var(--ds-accent-hover);
    --bs-btn-hover-border-color: var(--ds-accent-hover);
    --bs-btn-active-color: var(--ds-accent-contrast);
    --bs-btn-active-bg: var(--ds-accent-hover);
    --bs-btn-active-border-color: var(--ds-accent-hover);
    --bs-btn-disabled-bg: var(--ds-accent-surface);
    --bs-btn-disabled-border-color: var(--ds-accent-surface);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Acción neutra: superficie propia con borde definido. */
.btn.btn-light {
    --bs-btn-color: var(--ds-text);
    --bs-btn-bg: var(--ds-surface-card);
    --bs-btn-border-color: var(--ds-border);
    --bs-btn-hover-color: var(--ds-text);
    --bs-btn-hover-bg: var(--ds-surface-muted);
    --bs-btn-hover-border-color: var(--ds-border);
    --bs-btn-active-color: var(--ds-text);
    --bs-btn-active-bg: var(--ds-surface-raised);
    --bs-btn-active-border-color: var(--ds-border);
    --bs-btn-focus-shadow-rgb: 148, 163, 184;
}

/* Acción destructiva: el único rojo de la interfaz. */
.btn.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ds-danger-surface);
    --bs-btn-border-color: var(--ds-danger-surface);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ds-danger-hover);
    --bs-btn-hover-border-color: var(--ds-danger-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ds-danger-hover);
    --bs-btn-active-border-color: var(--ds-danger-hover);
}

.btn.btn-light-danger {
    --bs-btn-color: var(--ds-danger-text);
    --bs-btn-bg: var(--ds-danger-soft);
    --bs-btn-border-color: var(--ds-danger-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ds-danger-surface);
    --bs-btn-hover-border-color: var(--ds-danger-surface);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ds-danger-hover);
    --bs-btn-active-border-color: var(--ds-danger-hover);
}

/* ==========================================================================
   2. Campos de formulario
   ========================================================================== */
.form-control,
.form-select,
.form-control.form-control-solid,
.form-select.form-select-solid {
    color: var(--ds-text);
    background-color: var(--ds-surface-card);
    border: 1px solid var(--ds-border-field);
    border-radius: var(--ds-radius-md);
}

.form-control:focus,
.form-select:focus,
.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
    color: var(--ds-text);
    background-color: var(--ds-surface-card);
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.form-control::-moz-placeholder {
    color: var(--ds-text-muted);
}

.form-control::placeholder {
    color: var(--ds-text-muted);
}

/* Metronic oculta el <select> y pinta select2 en su lugar: hay que vestir la
   caja del plugin o el campo se ve distinto al resto. Solo la caja. */
.select2-container--bootstrap5 .select2-selection--single,
.select2-container .select2-selection--single {
    background-color: var(--ds-surface-card);
    border: 1px solid var(--ds-border-field);
    border-radius: var(--ds-radius-md);
}

.select2-container--bootstrap5.select2-container--focus .select2-selection--single,
.select2-container--bootstrap5.select2-container--open .select2-selection--single {
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* Etiquetas de campo: en minúscula capitalizada y con peso medio, no en
   mayúsculas grises. */
.form-label,
label.form-label {
    margin-bottom: var(--ds-space-2);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    text-transform: none;
}

/* Etiqueta de campo del patrón propio del proyecto: un <div> que envuelve el
   control (no un <label>), usado en todos los formularios. Sustituye al
   combinado `text-muted fw-bold fs-7 text-uppercase` que ponía las etiquetas en
   mayúsculas y en gris claro, con poco contraste.
   Requiere que el control vaya en un div hijo para separar etiqueta y campo. */
.ds-field-label {
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ds-text);
}

.ds-field-label > div:first-child {
    margin-bottom: var(--ds-space-1);
}

/* ==========================================================================
   3. Tarjetas
   ========================================================================== */
.card {
    background-color: var(--ds-surface-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
}

.card-header {
    background-color: var(--ds-surface-card);
    border-bottom: 1px solid var(--ds-border);
}

.card-title {
    margin: 0;
    font-size: var(--ds-font-size-lg);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-heading);
}

.card-footer {
    background-color: var(--ds-surface-card);
    border-top: 1px solid var(--ds-border);
}

/* ==========================================================================
   4. Tablas
   ========================================================================== */
.table {
    --bs-table-color: var(--ds-text);
    --bs-table-border-color: var(--ds-border);
    color: var(--ds-text);
}

.table > thead > tr > th {
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom-color: var(--ds-border);
}

.table > tbody > tr > td {
    border-bottom-color: var(--ds-border);
    vertical-align: middle;
}

/* ==========================================================================
   5. Insignias
   ========================================================================== */
.badge {
    font-weight: var(--ds-font-weight-semibold);
    border-radius: var(--ds-radius-sm);
}

.badge.badge-light {
    color: var(--ds-text);
    background-color: var(--ds-surface-muted);
}

.badge.badge-light-primary {
    color: var(--ds-accent);
    background-color: var(--ds-accent-soft);
}

/* --------------------------------------------------------------------------
   5b. Urgencia de una nota (crítica / alta / media / baja)
   La jerarquía usa TRES canales, no solo el tono: la crítica es la única
   rellena (texto blanco sobre el peligro del tema), la alta y la media son
   suaves con su borde, y la baja queda en el gris del tema. Así el nivel se
   distingue también sin percibir el color. Cada nivel toma sus valores de los
   tokens de `tokens.css`; aquí no se escribe ningún color.
   -------------------------------------------------------------------------- */
.badge.ds-urgency {
    display: inline-flex;
    align-items: center;
    gap: .375em;
    padding: .3rem .6rem;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-semibold);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-pill);
    white-space: nowrap;
}

/* Punto de color: refuerza el nivel sin depender del texto de la etiqueta. */
.badge.ds-urgency::before {
    content: "";
    flex: 0 0 auto;
    width: .5em;
    height: .5em;
    border-radius: var(--ds-radius-pill);
    background-color: currentColor;
}

.badge.ds-urgency--critical {
    color: var(--ds-danger-contrast);
    background-color: var(--ds-danger-surface);
    border-color: var(--ds-danger-surface);
}

.badge.ds-urgency--high {
    color: var(--ds-warning-text);
    background-color: var(--ds-warning-soft);
    border-color: var(--ds-warning-border);
}

.badge.ds-urgency--medium {
    color: var(--ds-accent-text);
    background-color: var(--ds-accent-soft);
    border-color: var(--ds-accent-border);
}

.badge.ds-urgency--low {
    color: var(--ds-text-muted);
    background-color: var(--ds-surface-muted);
    border-color: var(--ds-border);
}

/* El panel de pendientes EDITA la urgencia con un selector, así que allí el
   nivel se pinta en el propio selector con la misma escala (barra interior y
   texto), en vez de duplicar insignia y control en la misma celda. */
.form-select.ds-urgency-select {
    font-weight: var(--ds-font-weight-semibold);
    box-shadow: inset .25rem 0 0 var(--ds-urgency-accent, transparent);
}

.form-select.ds-urgency-select[data-urgency="critical"] {
    --ds-urgency-accent: var(--ds-danger);
    color: var(--ds-danger-text);
}

.form-select.ds-urgency-select[data-urgency="high"] {
    --ds-urgency-accent: var(--ds-warning-text);
    color: var(--ds-warning-text);
}

.form-select.ds-urgency-select[data-urgency="medium"] {
    --ds-urgency-accent: var(--ds-accent);
    color: var(--ds-accent-text);
}

.form-select.ds-urgency-select[data-urgency="low"] {
    --ds-urgency-accent: var(--ds-border);
    color: var(--ds-text-muted);
}

/* ==========================================================================
   6. Alertas
   ========================================================================== */
.alert {
    border-radius: var(--ds-radius-md);
}

.alert-danger {
    color: var(--ds-danger-text);
    background-color: var(--ds-danger-soft);
    border-color: var(--ds-danger-border);
}

.alert-success {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}

/* ==========================================================================
   7. Paginación
   ========================================================================== */
.pagination .page-link {
    color: var(--ds-text-muted);
    background-color: var(--ds-surface-card);
    border-color: var(--ds-border);
}

.pagination .page-link:hover {
    color: var(--ds-text);
    background-color: var(--ds-surface-muted);
}

.pagination .active .page-link,
.pagination .page-item.active .page-link {
    color: var(--ds-accent-contrast);
    background-color: var(--ds-accent-surface);
    border-color: var(--ds-accent-surface);
}

/* ==========================================================================
   7b. Alta con doble icono
   Las acciones de alta que pierden su texto (agregar empleado, sucursal,
   departamento) llevan el glifo de la entidad con una insignia `+`, para que
   se entienda qué crean. El nombre accesible vive en el enlace (`aria-label`)
   y los dos iconos van `aria-hidden`.

   Dos variantes de insignia:
     - por defecto, para botones con relleno de acento (`btn-primary`): la
       insignia es clara y el `+` toma el acento;
     - `.ds-add-icon--accent`, para botones claros (`btn-light`): la insignia
       se rellena con el acento y el `+` va en contraste.
   El blanco de `--ds-accent-contrast` es el mismo en los dos temas, así que
   la insignia se lee igual en claro y en oscuro.
   ========================================================================== */
.ds-add-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ds-add-icon__plus {
    position: absolute;
    inset-block-end: -.35em;
    inset-inline-end: -.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .8em;
    height: .8em;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-accent-contrast);
    color: var(--ds-accent-surface);
}

.ds-add-icon > .ds-add-icon__plus i {
    font-size: .5em;
}

.ds-add-icon--accent .ds-add-icon__plus {
    background-color: var(--ds-accent-surface);
    color: var(--ds-accent-contrast);
}

/* ==========================================================================
   8. Foco visible
   ========================================================================== */
:where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   9. Móvil: área táctil
   En px a propósito: el requisito es de área de toque y no debe recalcularse
   cuando Metronic baja el tamaño de fuente raíz en pantallas estrechas.
   ========================================================================== */
@media (max-width: 767.98px) {
    .btn {
        min-height: var(--ds-touch-target);
    }

    /* Un botón de solo icono no tiene texto que lo haga ancho: sin mínimo de
       ancho, en móvil queda por debajo del área táctil. El alto ya lo cubre
       la regla de `.btn`. */
    .btn.btn-icon {
        min-width: var(--ds-touch-target);
    }
}

/* ==========================================================================
   9b. Movimiento reducido
   La capa no introduce animaciones propias; esto neutraliza las transiciones
   que el tema aplica a los componentes que vestimos.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .form-select,
    .card,
    .pagination .page-link,
    .select2-container .select2-selection--single {
        transition: none;
    }
}

/* ==========================================================================
   10. BLOQUE DE COMPATIBILIDAD CON METRONIC  — leer antes de tocar
   ==========================================================================
   Aquí van SOLO las reglas necesarias para vestir lo que el tema compila como
   valor fijo y que por tanto NO responde a las variables `--bs-*`. Si algo se
   puede retematizar asignando una variable en `tokens.css`, NO va aquí.

   Cada entrada cita el selector del tema que la motiva. Los `!important` son
   inevitables porque las reglas del tema que se revierten usan una cadena de
   `:not()` con especificidad (0,6,0)+.
   ========================================================================== */

/* Motivo: el tema elimina el borde de sus botones sólidos con
   `.btn:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover)...{border:0}`.
   Sin esto, un botón neutro queda blanco sobre blanco y no se lee como acción
   (fue un defecto real en móvil). */
.btn.btn-primary,
.btn.btn-light,
.btn.btn-danger,
.btn.btn-light-danger {
    border-style: solid !important;
    border-width: var(--bs-border-width, 1px) !important;
    border-color: var(--bs-btn-border-color) !important;
}

/* Motivo: estos estados están fijados en el tema con el literal de su paleta
   verde, no con una variable, así que no responden a `--bs-primary`.
   Se descubrieron auditando los literales verdes que quedaban tras asignar la
   capa de variables; son los únicos que se ven en la interfaz. */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--ds-accent-surface) !important;
    border-color: var(--ds-accent-surface) !important;
}

.form-range::-webkit-slider-thumb {
    background-color: var(--ds-accent-surface);
}

.form-range::-moz-range-thumb {
    background-color: var(--ds-accent-surface);
}

.progress-bar {
    background-color: var(--ds-accent-surface);
}

/* Botón de contorno: el tema lo compila con literales verdes. */
.btn-outline-primary {
    --bs-btn-color: var(--ds-accent-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ds-accent);
    --bs-btn-hover-color: var(--ds-accent-contrast);
    --bs-btn-hover-bg: var(--ds-accent-surface);
    --bs-btn-hover-border-color: var(--ds-accent-surface);
    --bs-btn-active-color: var(--ds-accent-contrast);
    --bs-btn-active-bg: var(--ds-accent-hover);
    --bs-btn-active-border-color: var(--ds-accent-hover);
    color: var(--ds-accent-text);
    border-color: var(--ds-accent) !important;
}

/* Motivo: el tema pinta el ítem activo de un desplegable con el literal verde
   #17C653 (`color`), no con una variable, así que no sigue a `--bs-primary`.
   Aparece en el selector de idioma, que comparten el login y el pie de la app:
   el idioma activo se marca con el acento y su icono de check hereda el color. */
.language-switcher .dropdown-menu .dropdown-item.active,
.language-switcher .dropdown-menu .dropdown-item:active {
    background-color: var(--ds-accent-soft);
    color: var(--ds-accent-text);
}

.language-switcher .dropdown-menu .dropdown-item.active i {
    color: inherit;
}

/* Motivo: el tema fija el color de los iconos hijos de sus botones con
   `.btn.btn-primary i{color:var(--bs-primary-inverse)}` (blanco) y con las
   reglas equivalentes de `.btn-light`, como valor compilado. El `+` de la
   insignia del doble icono heredaba ese blanco y desaparecía sobre la insignia
   clara: el `i` necesita su propio color, y con `!important` porque el tema
   apunta al mismo elemento con dos clases. */
.ds-add-icon > .ds-add-icon__plus i {
    color: var(--ds-accent-surface) !important;
}

.ds-add-icon--accent > .ds-add-icon__plus i {
    color: var(--ds-accent-contrast) !important;
}

/* Residuales conocidos y NO corregidos, por no usarse en la aplicación (si
   algún día se usan, entran aquí):
     - `.landing-header ...` y `[data-kt-sticky-landing-header]`: estilos de la
       landing de la plantilla, que este proyecto no tiene.
     - `.app-sidebar-primary ...`: variante de sidebar que no se usa (la app
       monta `.app-sidebar`).
     - `.separator.separator-content.border-primary::after`: separador con texto
       de la plantilla.
   Fin de los residuales. */

/* Fin del bloque de compatibilidad. */