/* ==========================================================================
   TURNOMO — Capa de diseño compartida
   --------------------------------------------------------------------------
   Se carga DESPUÉS de Bootstrap y ANTES de los <style> de cada página:
     bootstrap.min.css  →  turnomo.css  →  estilos propios de la página
   Así unifica el aspecto de todo el producto sin impedir que una pantalla
   concreta siga afinando lo suyo.

   Antes de esto convivían 8 variantes del morado de marca, 4 morados de
   hover distintos, más de 15 radios de esquina y los botones/formularios del
   portal del empleado salían con el azul por defecto de Bootstrap.
   ========================================================================== */

:root {
    /* ── Marca ─────────────────────────────────────────────────────────── */
    --tm-brand:        #3C00FF;   /* morado Turnomo */
    --tm-brand-600:    #3200d6;   /* hover  */
    --tm-brand-700:    #2800aa;   /* activo */
    --tm-brand-accent: #7c3aed;   /* pareja de los degradados */
    --tm-brand-050:    #f3f1ff;
    --tm-brand-100:    #e7e2ff;
    --tm-brand-tint:   rgba(60, 0, 255, 0.06);
    --tm-brand-line:   rgba(60, 0, 255, 0.14);
    --tm-gradient:     linear-gradient(135deg, #3C00FF 0%, #7c3aed 100%);

    /* ── Neutros (escala slate, ya usada en el proyecto) ───────────────── */
    --tm-ink:      #0f172a;
    --tm-ink-700:  #334155;
    --tm-ink-500:  #64748b;
    --tm-ink-400:  #94a3b8;
    --tm-line:     #e2e8f0;
    --tm-line-soft:#eef2f7;
    --tm-surface:  #ffffff;
    --tm-canvas:   #f6f7fb;

    /* ── Semánticos ────────────────────────────────────────────────────── */
    --tm-ok:      #16a34a;  --tm-ok-bg:      #dcfce7;  --tm-ok-line:      #bbf7d0;
    --tm-warn:    #d97706;  --tm-warn-bg:    #fef3c7;  --tm-warn-line:    #fde68a;
    --tm-danger:  #dc2626;  --tm-danger-bg:  #fee2e2;  --tm-danger-line:  #fecaca;
    --tm-info:    #2563eb;  --tm-info-bg:    #dbeafe;  --tm-info-line:    #bfdbfe;

    /* ── Radios ────────────────────────────────────────────────────────── */
    --tm-r-xs:   8px;
    --tm-r-sm:  10px;
    --tm-r-md:  12px;
    --tm-r-lg:  16px;
    --tm-r-xl:  20px;
    --tm-r-2xl: 24px;
    --tm-r-pill: 999px;

    /* ── Sombras ───────────────────────────────────────────────────────── */
    --tm-sh-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --tm-sh-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --tm-sh-md: 0 8px 24px rgba(15, 23, 42, 0.07);
    --tm-sh-lg: 0 18px 40px rgba(15, 23, 42, 0.10);
    --tm-sh-xl: 0 28px 60px rgba(15, 23, 42, 0.14);
    --tm-sh-brand: 0 6px 18px rgba(60, 0, 255, 0.25);

    /* ── Foco y movimiento ─────────────────────────────────────────────── */
    --tm-ring: 0 0 0 3px rgba(60, 0, 255, 0.18);
    --tm-t-fast: 0.15s ease;
    --tm-t: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    --tm-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
    font-family: var(--tm-font);
    color: var(--tm-ink-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tm-font);
    color: var(--tm-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* Enlace de texto en color de marca (Bootstrap lo pinta en su azul).
   OJO con la especificidad: antes esto era `a:not(.btn)` (0,2,1 con el hover),
   que le ganaba a cualquier componente que fuese un <a> con clase propia. Por
   eso los ítems del sidebar, los .dropdown-item y el botón "Panel Admin" salían
   morados sobre fondos donde no se leían. Al dejarlo a nivel de elemento (0,0,1)
   sigue pisando al reboot de Bootstrap —va después— pero cualquier clase de
   componente manda sobre su propio color. */
a {
    color: var(--tm-brand);
    text-underline-offset: 2px;
    transition: color var(--tm-t-fast);
}
/* :where() no suma especificidad, así que esto sigue valiendo (0,1,1) —lo justo
   para ganarle al `a:hover` del reboot— mientras deja fuera a los <a> que en
   realidad son controles y ya traen su propio color (botones, badges, ítems de
   menú…). El hover de esos lo define cada componente. */
a:where(:not(.btn, .badge, .dropdown-item, .nav-link, .page-link, .list-group-item)):hover {
    color: var(--tm-brand-700);
}

::selection { background: rgba(60, 0, 255, 0.15); color: var(--tm-ink); }

hr { border-color: var(--tm-line); opacity: 1; }

small, .small { font-size: 0.85em; }

/* Foco visible coherente. Muchas pantallas hacían `outline:none` sin poner
   nada a cambio, así que navegando con teclado no se veía dónde estabas. */
:focus-visible {
    outline: none;
    box-shadow: var(--tm-ring);
    border-radius: var(--tm-r-xs);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    box-shadow: var(--tm-ring);
}

/* Barras de scroll discretas en toda la app */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--tm-r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   2. Botones
   ========================================================================== */

.btn {
    --tm-btn-shadow: none;
    font-family: var(--tm-font);
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: var(--tm-r-md);
    padding: 0.6rem 1.25rem;
    border-width: 1.5px;
    transition: background-color var(--tm-t-fast), border-color var(--tm-t-fast),
                color var(--tm-t-fast), box-shadow var(--tm-t-fast), transform var(--tm-t-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.55; box-shadow: none; transform: none; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; border-radius: var(--tm-r-sm); }
.btn-lg { padding: 0.8rem 1.75rem; font-size: 1.02rem; border-radius: var(--tm-r-lg); }

/* Primario = marca (Bootstrap lo pintaba en azul #0d6efd) */
.btn-primary {
    background-color: var(--tm-brand);
    border-color: var(--tm-brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(60, 0, 255, 0.22);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--tm-brand-600);
    border-color: var(--tm-brand-600);
    color: #fff;
    box-shadow: 0 6px 18px rgba(60, 0, 255, 0.3);
}
.btn-primary:active, .btn-primary:disabled {
    background-color: var(--tm-brand-700);
    border-color: var(--tm-brand-700);
}

.btn-outline-primary {
    color: var(--tm-brand);
    border-color: var(--tm-brand-line);
    background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--tm-brand-050);
    border-color: var(--tm-brand);
    color: var(--tm-brand-700);
}

.btn-secondary, .btn-light {
    background-color: #f1f5f9;
    border-color: #f1f5f9;
    color: var(--tm-ink-700);
}
.btn-secondary:hover, .btn-light:hover {
    background-color: #e2e8f0;
    border-color: #e2e8f0;
    color: var(--tm-ink);
}

.btn-success { background-color: var(--tm-ok); border-color: var(--tm-ok); }
.btn-success:hover { background-color: #15803d; border-color: #15803d; }
.btn-danger  { background-color: var(--tm-danger); border-color: var(--tm-danger); }
.btn-danger:hover { background-color: #b91c1c; border-color: #b91c1c; }
.btn-warning { background-color: var(--tm-warn); border-color: var(--tm-warn); color: #fff; }
.btn-warning:hover { background-color: #b45309; border-color: #b45309; color: #fff; }
.btn-info { background-color: var(--tm-info); border-color: var(--tm-info); color: #fff; }
.btn-info:hover { background-color: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* Botón de marca reutilizable fuera de Bootstrap */
.tm-btn-brand {
    background: var(--tm-gradient);
    color: #fff;
    border: none;
    border-radius: var(--tm-r-md);
    padding: 0.65rem 1.4rem;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: var(--tm-sh-brand);
    transition: filter var(--tm-t-fast), transform var(--tm-t-fast);
}
.tm-btn-brand:hover { filter: brightness(1.08); }
.tm-btn-brand:active { transform: translateY(1px); }

/* ==========================================================================
   3. Formularios
   ========================================================================== */

.form-control, .form-select {
    border: 1.5px solid var(--tm-line);
    border-radius: var(--tm-r-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.92rem;
    color: var(--tm-ink);
    background-color: #fff;
    transition: border-color var(--tm-t-fast), box-shadow var(--tm-t-fast);
}
.form-control:focus, .form-select:focus {
    border-color: var(--tm-brand);
    box-shadow: var(--tm-ring);
}
.form-control::placeholder { color: var(--tm-ink-400); }
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: #f8fafc;
    color: var(--tm-ink-500);
    border-color: var(--tm-line-soft);
}
.form-control-sm, .form-select-sm { border-radius: var(--tm-r-xs); padding: 0.4rem 0.7rem; font-size: 0.85rem; }
.form-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tm-ink-500);
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}
.form-check-input { border-color: #cbd5e1; }
.form-check-input:checked {
    background-color: var(--tm-brand);
    border-color: var(--tm-brand);
}
.form-check-input:focus { border-color: var(--tm-brand); box-shadow: var(--tm-ring); }
.input-group-text {
    background: #f8fafc;
    border: 1.5px solid var(--tm-line);
    border-radius: var(--tm-r-sm);
    color: var(--tm-ink-500);
    font-size: 0.88rem;
}
textarea.form-control { min-height: 96px; }

/* ==========================================================================
   4. Superficies: tarjetas, modales, dropdowns
   ========================================================================== */

.card {
    border: 1px solid var(--tm-line-soft);
    border-radius: var(--tm-r-lg);
    background: var(--tm-surface);
    box-shadow: var(--tm-sh-sm);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--tm-line-soft);
    padding: 1.15rem 1.35rem;
    font-weight: 700;
    color: var(--tm-ink);
}
.card-body { padding: 1.35rem; }
.card-footer { background: #fbfcfe; border-top: 1px solid var(--tm-line-soft); }

.modal-content {
    border: none;
    border-radius: var(--tm-r-2xl);
    box-shadow: var(--tm-sh-xl);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--tm-line-soft); padding: 1.25rem 1.5rem; }
.modal-title { font-weight: 800; color: var(--tm-ink); letter-spacing: -0.02em; font-size: 1.1rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--tm-line-soft); background: #fbfcfe; padding: 1rem 1.5rem; }
.modal-backdrop.show { opacity: 0.5; background: #0f172a; }
.btn-close {
    background-color: #f1f5f9;
    border-radius: 50%;
    padding: 0.6rem;
    opacity: 1;
    transition: background-color var(--tm-t-fast), transform var(--tm-t);
}
.btn-close:hover { background-color: #e2e8f0; transform: rotate(90deg); }

.dropdown-menu {
    border: 1px solid var(--tm-line-soft);
    border-radius: var(--tm-r-md);
    box-shadow: var(--tm-sh-lg);
    padding: 0.35rem;
    min-width: 11.5rem;
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: var(--tm-r-xs);
    padding: 0.58rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tm-ink-700);
    transition: background-color var(--tm-t-fast), color var(--tm-t-fast);
}
/* Icono centrado en una columna fija: sin esto cada ítem empezaba el texto en
   un sitio distinto según el ancho del glifo. */
.dropdown-item > i,
.dropdown-item > .fa,
.dropdown-item > svg {
    width: 1.1rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--tm-ink-400);
    transition: color var(--tm-t-fast);
}
/* El hover anterior (tinte de marca al 4 %) apenas se distinguía del blanco del
   menú. Se sube el tinte y el texto pasa a tinta oscura, que contrasta mejor
   que el morado sobre lavanda. */
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--tm-brand-100);
    color: var(--tm-ink);
}
.dropdown-item:hover > i, .dropdown-item:focus > i { color: var(--tm-brand); }
.dropdown-item.active, .dropdown-item:active { background: var(--tm-brand); color: #fff; }
.dropdown-item.active > i, .dropdown-item:active > i { color: #fff; }

/* Acción destructiva: rojo propio (el #dc3545 de Bootstrap desentona con el
   resto de semánticos) y hover en rojo, no en morado, para que el color avise
   de lo que va a pasar. */
.dropdown-item.text-danger { color: var(--tm-danger) !important; }
.dropdown-item.text-danger > i { color: var(--tm-danger); }
.dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus {
    background: var(--tm-danger-bg);
    color: #991b1b !important;
}
.dropdown-item.text-danger:hover > i, .dropdown-item.text-danger:focus > i { color: #991b1b; }

.dropdown-divider { border-color: var(--tm-line-soft); margin: 0.3rem 0.25rem; }

/* ==========================================================================
   5. Datos: tablas, badges, alertas, paginación
   ========================================================================== */

.table { color: var(--tm-ink-700); vertical-align: middle; }
.table > thead th {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tm-ink-400);
    background: transparent;
    border-bottom: 1.5px solid var(--tm-line);
    padding: 0.85rem 0.9rem;
    white-space: nowrap;
}
.table > tbody td { padding: 0.8rem 0.9rem; border-color: var(--tm-line-soft); }
.table > tbody tr { transition: background-color var(--tm-t-fast); }
.table-hover > tbody tr:hover > * { background-color: var(--tm-brand-tint); }
.table-responsive { border-radius: var(--tm-r-md); }

.badge {
    font-weight: 700;
    font-size: 0.73rem;
    letter-spacing: 0.01em;
    padding: 0.4em 0.75em;
    border-radius: var(--tm-r-pill);
}

.alert {
    border-radius: var(--tm-r-md);
    border-width: 1px;
    font-weight: 500;
    padding: 0.9rem 1.1rem;
}
.alert-success { background: var(--tm-ok-bg);     border-color: var(--tm-ok-line);     color: #15803d; }
.alert-warning { background: var(--tm-warn-bg);   border-color: var(--tm-warn-line);   color: #b45309; }
.alert-danger  { background: var(--tm-danger-bg); border-color: var(--tm-danger-line); color: #b91c1c; }
.alert-info    { background: var(--tm-info-bg);   border-color: var(--tm-info-line);   color: #1d4ed8; }

.page-link {
    color: var(--tm-ink-700);
    border-color: var(--tm-line-soft);
    font-weight: 600;
    font-size: 0.88rem;
}
.page-item.active .page-link { background: var(--tm-brand); border-color: var(--tm-brand); }
.page-link:hover { background: var(--tm-brand-050); color: var(--tm-brand-700); }

.nav-tabs { border-bottom-color: var(--tm-line-soft); }
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--tm-ink-500);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.7rem 1.1rem;
}
.nav-tabs .nav-link:hover { color: var(--tm-brand); border-bottom-color: var(--tm-brand-line); }
.nav-tabs .nav-link.active { color: var(--tm-brand); border-bottom-color: var(--tm-brand); background: transparent; }

.progress { border-radius: var(--tm-r-pill); background: #eef2f7; height: 8px; }
.progress-bar { background: var(--tm-gradient); }

.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--tm-brand) !important; }

/* ==========================================================================
   6. Plugins (SweetAlert2, Select2, DataTables)
   ========================================================================== */

.swal2-popup {
    border-radius: var(--tm-r-2xl) !important;
    font-family: var(--tm-font) !important;
    box-shadow: var(--tm-sh-xl) !important;
}
.swal2-title { font-weight: 800 !important; color: var(--tm-ink) !important; letter-spacing: -0.02em; }
.swal2-html-container { color: var(--tm-ink-500) !important; font-size: 0.95rem !important; }
.swal2-styled.swal2-confirm {
    background: var(--tm-brand) !important;
    border-radius: var(--tm-r-md) !important;
    font-weight: 700 !important;
    box-shadow: var(--tm-sh-brand) !important;
}
.swal2-styled.swal2-cancel {
    background: #f1f5f9 !important;
    color: var(--tm-ink-700) !important;
    border-radius: var(--tm-r-md) !important;
    font-weight: 700 !important;
}
.swal2-toast { border-radius: var(--tm-r-lg) !important; box-shadow: var(--tm-sh-lg) !important; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1.5px solid var(--tm-line) !important;
    border-radius: var(--tm-r-sm) !important;
    min-height: 42px;
    padding: 4px 6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: var(--tm-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--tm-brand) !important;
    box-shadow: var(--tm-ring);
}
.select2-dropdown {
    border: 1px solid var(--tm-line) !important;
    border-radius: var(--tm-r-md) !important;
    box-shadow: var(--tm-sh-md);
    overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--tm-brand) !important; }

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border: 1.5px solid var(--tm-line);
    border-radius: var(--tm-r-xs);
    padding: 0.35rem 0.6rem;
    font-size: 0.88rem;
}
div.dataTables_wrapper div.dataTables_filter input:focus { border-color: var(--tm-brand); box-shadow: var(--tm-ring); outline: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--tm-brand) !important;
    border-color: var(--tm-brand) !important;
    color: #fff !important;
    border-radius: var(--tm-r-xs);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--tm-brand-050) !important;
    border-color: var(--tm-brand-line) !important;
    color: var(--tm-brand-700) !important;
    border-radius: var(--tm-r-xs);
}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length { color: var(--tm-ink-500); font-size: 0.85rem; }

/* ==========================================================================
   7. Utilidades Turnomo
   ========================================================================== */

/* Cabecera de página: mismo patrón en todas las pantallas */
.tm-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--tm-line-soft);
}
.tm-page-head h1, .tm-page-head h2, .tm-page-head h3 { margin: 0; font-size: 1.45rem; }
.tm-page-head p { margin: 0.3rem 0 0; color: var(--tm-ink-500); font-size: 0.92rem; }

.tm-eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tm-ink-400);
}

/* Superficie de marca u oscura: los h1-h6 llevan `color: var(--tm-ink)` propio,
   que no es heredado y por tanto gana al `color: white` del contenedor. Sin
   esto, un <h2> dentro de una cabecera en degradado sale en tinta casi negra
   (es lo que pasaba en la cabecera del modal de perfil). */
.tm-on-brand,
.tm-on-brand h1, .tm-on-brand h2, .tm-on-brand h3,
.tm-on-brand h4, .tm-on-brand h5, .tm-on-brand h6,
.tm-on-brand p, .tm-on-brand a, .tm-on-brand a:hover { color: #fff; }
.tm-on-brand .tm-eyebrow { color: rgba(255, 255, 255, 0.78); }

/* Botón redondo de cerrar sobre fondo de marca */
.tm-close-on-brand {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--tm-t-fast), border-color var(--tm-t-fast), transform var(--tm-t);
}
.tm-close-on-brand:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    transform: rotate(90deg);
}
.tm-close-on-brand:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* Tarjeta base fuera de Bootstrap */
.tm-card {
    background: var(--tm-surface);
    border: 1px solid var(--tm-line-soft);
    border-radius: var(--tm-r-lg);
    box-shadow: var(--tm-sh-sm);
    padding: 1.35rem;
}

/* Icono de sección en cuadrado degradado (patrón ya usado en Fichaje) */
.tm-icon-badge {
    width: 46px;
    height: 46px;
    border-radius: var(--tm-r-md);
    background: var(--tm-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: var(--tm-sh-brand);
}

/* Estado vacío coherente */
.tm-empty { text-align: center; padding: 3rem 1rem; }
.tm-empty-icon {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--tm-brand-050); color: var(--tm-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; margin: 0 auto 1rem;
}
.tm-empty h5 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.tm-empty p { color: var(--tm-ink-500); font-size: 0.9rem; margin: 0; }

/* Chips de estado */
.tm-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--tm-r-pill);
    font-size: 0.75rem; font-weight: 700;
    background: #f1f5f9; color: var(--tm-ink-500);
}
.tm-chip-ok     { background: var(--tm-ok-bg);     color: #15803d; }
.tm-chip-warn   { background: var(--tm-warn-bg);   color: #b45309; }
.tm-chip-danger { background: var(--tm-danger-bg); color: #b91c1c; }
.tm-chip-brand  { background: var(--tm-brand-050); color: var(--tm-brand); }

/* Carga: bloque neutro en vez de saltos en blanco */
.tm-skeleton {
    background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
    background-size: 400% 100%;
    animation: tmShimmer 1.3s ease infinite;
    border-radius: var(--tm-r-xs);
}
@keyframes tmShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==========================================================================
   8. Ajustes responsive comunes
   ========================================================================== */

@media (max-width: 768px) {
    .tm-page-head { align-items: flex-start; flex-direction: column; }
    .tm-page-head h1, .tm-page-head h2, .tm-page-head h3 { font-size: 1.25rem; }
    .modal-body { padding: 1.15rem; }
    .modal-header, .modal-footer { padding: 1rem 1.15rem; }
    .card-body { padding: 1.1rem; }
    /* Objetivo táctil mínimo cómodo */
    .btn { min-height: 42px; }
    .btn-sm { min-height: 36px; }
}