/* =========================================================================
   SKIN CARE CLINIC — DESIGN SYSTEM
   ──────────────────────────────────────────────────────────────────────────
   Foundations:
     • Whites + greys, sin sombras pesadas, bordes 1px clínico-limpio.
     • Geist (UI/headings) + Geist Mono (números, totales, IDs, tickets).
     • Densidad Notion: paddings generosos, line-height alto, mucho aire.
     • Acento: grafito #0a0a0a. Estados desaturados.
     • Reskin de Tabler/Bootstrap vía CSS variables (sin tocar EJS).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
    /* Root = 13.5px so 1rem IS the body baseline. Single source of truth
       for the design system's rem cascade. Body uses 1rem; component
       baselines (.btn, .form-control, .table tbody td, .modal-body,
       .dropdown-*, .ts-control, .nav-link, .panel-item) also use 1rem.
       Headings and labels scale relative to this 13.5px unit. */
    font-size: 12px;

    /* Surfaces */
    --ds-bg:             #ffffff;          /* fondo de página */
    --ds-surface:        #ffffff;          /* cards, modales, dropdowns */
    --ds-surface-muted:  #fafafa;          /* hovers, table headers, sidebar */
    --ds-surface-soft:   #f4f4f5;          /* badges suaves, chips */
    --ds-surface-active: #ededed;          /* selected, pressed */

    /* Ink */
    --ds-ink:            #0a0a0a;          /* texto principal / acento */
    --ds-ink-2:          #262626;
    --ds-ink-3:          #525252;          /* texto secundario */
    --ds-ink-4:          #737373;          /* muted */
    --ds-ink-5:          #a3a3a3;          /* placeholders */

    /* Borders */
    --ds-border:         #ececec;          /* bordes principales */
    --ds-border-strong:  #d4d4d4;          /* inputs, focus */
    --ds-border-soft:    #f1f1f1;          /* divisores internos */

    /* Estados (desaturados) */
    --ds-success:        #4f7a5c;
    --ds-success-bg:     #eef4ef;
    --ds-warning:        #a07b3a;
    --ds-warning-bg:     #f7f1e6;
    --ds-danger:         #b3534a;
    --ds-danger-bg:      #f7ecea;
    --ds-info:           #4a6b86;
    --ds-info-bg:        #ecf1f6;

    /* Radius (Notion-ish) */
    --ds-radius-sm:      6px;
    --ds-radius-md:      8px;
    --ds-radius-lg:      12px;
    --ds-radius-xl:      16px;

    /* Spacing scale (4px base) */
    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.5rem;
    --ds-space-6: 2rem;
    --ds-space-7: 3rem;

    /* Single source of truth for lateral content padding — used by cards,
       card-headers/body/footers, modals, tabs, and table edge cells.
       Change this number once and the whole UI re-aligns. */
    --ds-content-padding-x: 1.15rem;
    --ds-content-padding-y: 0.85rem;

    /* Typography */
    --ds-font-sans:
        'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ds-font-mono:
        'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Tabler/Bootstrap overrides (heredan en cascada) */
    --tblr-font-sans-serif: var(--ds-font-sans);
    --tblr-font-monospace:  var(--ds-font-mono);
    --tblr-headings-font-family: var(--ds-font-sans);
    --tblr-body-font-family: var(--ds-font-sans);

    --tblr-body-bg:        var(--ds-bg);
    --tblr-bg-surface:     var(--ds-surface);
    --tblr-bg-surface-secondary: var(--ds-surface-muted);
    --tblr-bg-surface-tertiary:  var(--ds-surface-soft);

    --tblr-body-color:     var(--ds-ink);
    --tblr-secondary-color: var(--ds-ink-3);
    --tblr-muted:          var(--ds-ink-4);

    --tblr-border-color:           var(--ds-border);
    --tblr-border-color-translucent: var(--ds-border);
    --tblr-border-radius:           var(--ds-radius-md);
    --tblr-border-radius-sm:        var(--ds-radius-sm);
    --tblr-border-radius-lg:        var(--ds-radius-lg);
    --tblr-border-radius-xl:        var(--ds-radius-xl);

    --tblr-primary:        var(--ds-ink);
    --tblr-primary-rgb:    10, 10, 10;
    --tblr-primary-fg:     #ffffff;
    --tblr-link-color:     var(--ds-ink);
    --tblr-link-hover-color: var(--ds-ink-2);

    /* Bootstrap mirror */
    --bs-body-bg:          var(--ds-bg);
    --bs-body-color:       var(--ds-ink);
    --bs-body-font-family: var(--ds-font-sans);
    --bs-secondary-color:  var(--ds-ink-3);
    --bs-border-color:     var(--ds-border);
    --bs-primary:          var(--ds-ink);
    --bs-primary-rgb:      10, 10, 10;
}

/* -------------------------------------------------------------------------
   2. Base — refined, tighter, world-class densidad
   ------------------------------------------------------------------------- */
html, body {
    background-color: var(--ds-bg) !important;
    color: var(--ds-ink);
    font-family: var(--ds-font-sans) !important;
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

body {
    letter-spacing: -0.005em;
    font-size: 1rem;
}

p { margin-bottom: 0.65rem; }
small, .small { font-size: 0.85rem; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ds-font-sans) !important;
    color: var(--ds-ink);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.text-muted,
.text-secondary {
    color: var(--ds-ink-4) !important;
}

/* =========================================================================
   GEIST MONO — used wherever data has a fixed shape (numbers, IDs, dates,
   currencies, durations, hashes, codes, percentages, keystrokes, units).
   This is the visual signature of the design system. */
code, kbd, samp, pre, var, output, tt,
.font-mono, .text-mono, .font-monospace, .text-monospace,
.amount, .price, .total, .subtotal, .balance,
.ticket-id, .invoice-number, .order-number,
.id, .identifier, .sku, .upc, .barcode, .folio,
.code, .hash, .uuid, .reference,
.timestamp, .date, .datetime, .hour, .time,
.duration, .elapsed, .ago,
.percentage, .percent, .pct,
.qty, .quantity, .count, .stock,
[data-mono],
.page-link, .dt-paginate-button,
.dataTables_info,
.flatpickr-day, .flatpickr-time input {
    font-family: var(--ds-font-mono) !important;
    font-feature-settings: 'tnum', 'zero';
    letter-spacing: -0.01em;
}

/* Auto-mono in data contexts:
   - numeric cells in tables (right-aligned, .text-end, .text-right, .numeric)
   - currency / number form inputs
   - badges that contain only digits (counts) */
.table td.text-end,
.table td.text-right,
.table td.numeric,
.table td.amount,
.table td.price,
.table td.total,
.table td.qty,
.table td.id,
.table td.sku,
.table td.code,
.table td.date,
.table td.datetime,
input[type='number'],
input[type='tel'],
input[inputmode='numeric'],
input[inputmode='decimal'],
input.amount, input.price, input.numeric,
.form-control.numeric, .form-control.amount,
.flatpickr-input,
.form-control[type='number'] {
    font-family: var(--ds-font-mono) !important;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Tabular numerals on every numeric-looking column */
.table td, .table th { font-variant-numeric: tabular-nums; }

kbd {
    background-color: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    border-bottom-width: 2px;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-ink-2);
    font-size: 0.85rem;
    padding: 0.1rem 0.35rem;
}

a {
    color: var(--ds-ink);
    text-decoration: none;
    text-underline-offset: 2px;
}
a:hover {
    color: var(--ds-ink-2);
    text-decoration: underline;
}

hr, .dropdown-divider {
    border-color: var(--ds-border) !important;
    opacity: 1;
}

::selection { background: #e7e7e7; color: var(--ds-ink); }

/* -------------------------------------------------------------------------
   3. Page shell / sidebar / navbar
   ------------------------------------------------------------------------- */
.page,
.page-wrapper,
.page-body,
.page-header {
    background-color: var(--ds-bg) !important;
}

/* Homologated page-header: every section gets the same shape.
   Covers all 3 markup patterns found in the codebase:
     A) .page-header > .d-flex[height:3rem] > .container-fluid > .d-flex (Inicio)
     B) .page-header > .container-xl > .row.align-items-center > .col + .col-auto (listings)
     C) .page-header > .container-xl > .row > .col-12.d-flex.justify-content-between (detail/edit)
   - Fixed bar of 3rem (grows only if the right-side action group wraps).
   - Single source of truth for the divider (border-bottom).
   - Content always vertically centered regardless of inner markup. */
.page-header,
.page-header.d-print-none,
.page-header.position-sticky {
    min-height: 3rem !important;
    height: auto !important;
    box-sizing: border-box !important;     /* border-bottom counted INSIDE the 3rem */
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-border-soft) !important;
    position: relative;
}
/* Remove redundant vertical padding from inner rows so the bar stays at 3rem */
.page-header .py-1, .page-header .py-2, .page-header .py-3 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Preserve sticky behaviour where markup requests it */
.page-header.position-sticky,
.page-header[style*='sticky'] {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}
.page-header > * {
    width: 100%;
    align-self: center;
}
.page-header > .container,
.page-header > .container-fluid,
.page-header > .container-xl {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Inner d-flex wrappers (Pattern A) inherit the bar height cleanly.
   Don't force min-height here — the page-header's own height drives layout.
   Forcing min-height: 3rem on the inner div would push total beyond 3rem. */
.page-header > .d-flex {
    height: auto !important;
    min-height: 0 !important;
    align-items: center !important;
    flex: 1 1 auto;
}
/* Inner row vertically centered (Patterns B + C) */
.page-header .row {
    width: 100%;
    align-items: center !important;
}
/* Kill any inner divider — only the page-header's own border-bottom shows */
.page-header .border-bottom {
    border-bottom: 0 !important;
}
/* Action button group on the right: consistent gap between actions */
.page-header .col-auto > .btn + .btn,
.page-header .col-auto > .btn + a.btn,
.page-header .col-auto > a.btn + .btn,
.page-header .col-auto > a.btn + a.btn,
.page-header .col-12 > .d-flex > .btn + .btn,
.page-header .col-12 > .d-flex > .btn + a.btn,
.page-header .col-12 > .d-flex > a.btn + .btn {
    margin-left: 0.4rem;
}
.page-pretitle {
    color: var(--ds-ink-4) !important;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-transform: none !important;
    margin-bottom: 0.1rem;
}
/* Single source of truth for page-header titles.
   Applies to ANY heading tag inside .page-header (h1/h2/h3) and to the
   explicit .page-title class — all 46 page templates render at the same
   size regardless of which tag the author used.
   Hierarchy below: modal (0.95rem) < page (1.125rem) < card (0.875rem) etc. */
.page-title,
.page-header h1,
.page-header h2,
.page-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--ds-ink);
    line-height: 1.2;
    margin-bottom: 0;
}
.page-subtitle {
    color: var(--ds-ink-4);
    font-size: 0.85rem;
    font-weight: 400;
    margin-top: 0.2rem;
}
/* Breadcrumb-style category prefix used in 44 listing/detail headers:
   <h2><span style="font-weight:300">Clientes /</span> Editar</h2>.
   Normalize the inline style into a class so it stays consistent. */
.page-header h1 > span:first-child[style*='font-weight'],
.page-header h2 > span:first-child[style*='font-weight'],
.page-header h3 > span:first-child[style*='font-weight'],
.page-title-prefix {
    color: var(--ds-ink-4);
    font-weight: 400 !important;
    margin-right: 0.15rem;
}

/* Tabler .subheader (stat-card overlines, section labels) */
.subheader {
    font-family: var(--ds-font-sans) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    color: var(--ds-ink-4) !important;
}

/* Headings: refined hierarchy, finer scale */
h1, .h1 { font-size: 1.4rem;  font-weight: 600; letter-spacing: -0.028em; }
h2, .h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.022em; }
h3, .h3 { font-size: 0.95rem;  font-weight: 600; letter-spacing: -0.018em; }
h4, .h4 { font-size: 0.85rem;  font-weight: 600; letter-spacing: -0.012em; }
h5, .h5 { font-size: 0.85rem;  font-weight: 600; letter-spacing: -0.005em; }
h6, .h6 { font-size: 0.85rem;  font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Stat card big numbers (Inicio dashboard) — Geist Mono, hairline weight */
.h1.font-weight-medium,
.h2.font-weight-medium,
.h1.fw-medium,
.h2.fw-medium,
.h1.fw-bold,
.h2.fw-bold,
.card .h1, .card .h2,
[class*='card-stamp'] + * .h1,
[class*='stat-'] .h1, [class*='stat-'] .h2 {
    font-family: var(--ds-font-mono) !important;
    font-feature-settings: 'tnum', 'zero';
    letter-spacing: -0.04em;
    font-weight: 500;
}

/* Sidebar (Tabler navbar-vertical) */
.navbar-vertical {
    background-color: var(--ds-surface) !important;
    border-right: 1px solid var(--ds-border);
    box-shadow: none !important;
}
.navbar-vertical .nav-link {
    color: var(--ds-ink-3) !important;
    border-radius: var(--ds-radius-md);
    padding: 0.4rem 0.65rem;
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.navbar-vertical .nav-link:hover {
    background-color: var(--ds-surface-muted);
    color: var(--ds-ink) !important;
}
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link.current {
    color: var(--ds-ink) !important;
    background-color: var(--ds-surface-active);
}
.navbar-vertical .nav-link .nav-link-icon,
.navbar-vertical .nav-link i {
    color: currentColor !important;
}

/* Reemplazar fondo azul claro de .nav-link.current::before del layout inline */
.nav-link.current::before {
    background: transparent !important;
}
.navbar-vertical .nav-link.current {
    background-color: var(--ds-surface-active) !important;
}

ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active::before {
    background: var(--ds-surface-active) !important;
}

/* =========================================================================
   .new-tabs — segmented-control style. Responsive: equal-width on wide
   screens, horizontal scroll on narrow ones, never wraps to two rows.
   ========================================================================= */
.nav-tabs.new-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border: 1px solid var(--ds-border) !important;
    background-color: var(--ds-surface);
    padding: 0.25rem !important;
    border-radius: var(--ds-radius-md) !important;
    gap: 0.15rem;
}
.nav-tabs.new-tabs::-webkit-scrollbar { display: none; }

.nav-tabs.new-tabs .nav-item {
    flex: 1 1 0 !important;          /* equal width by default */
    min-width: max-content;          /* but never squash below content size */
    width: auto !important;          /* defeats inline style="width: 25%" */
}

.nav-tabs.new-tabs .nav-link {
    width: 100%;
    padding: 0.4rem 0.75rem !important;
    font-size: 1rem !important;
    font-weight: 500;
    color: var(--ds-ink-3) !important;
    border: 0 !important;
    border-radius: var(--ds-radius-sm) !important;
    background: transparent !important;
    margin: 0 !important;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-tabs.new-tabs .nav-link:hover:not(.active) {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
}
.nav-tabs.new-tabs .nav-link.active {
    color: var(--ds-ink) !important;
    background-color: var(--ds-surface-active) !important;
    border-bottom: 0 !important;
}
/* Active pill is now provided by the bg above, kill the legacy ::before */
.nav-tabs.new-tabs .nav-link.active::before {
    display: none !important;
}

/* Label with controlled truncation when really tight */
.nav-tabs.new-tabs .nav-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Inline badge inside a tab — mono if numeric, sized small */
.nav-tabs.new-tabs .nav-link .badge {
    font-family: var(--ds-font-mono);
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    font-feature-settings: 'tnum';
    line-height: 1.3;
    flex-shrink: 0;
}

/* Tab icons match the new font scale */
.nav-tabs.new-tabs .nav-link .ti {
    font-size: 1.05rem !important;
    flex-shrink: 0;
}

.navbar-brand,
.navbar-brand-autodark {
    color: var(--ds-ink) !important;
}
.navbar-brand .card,
.navbar-brand-autodark .card {
    border: 1px solid var(--ds-border);
    background-color: var(--ds-surface);
    box-shadow: none;
}

/* Top navbar */
.navbar:not(.navbar-vertical) {
    background-color: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-border);
    box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   4. Cards
   ------------------------------------------------------------------------- */
.card {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: none !important;
    /* Clip any edge-to-edge children (table rows, list items, hover bgs)
       to the card's rounded corners. Without this, hover/selected
       backgrounds bleed past the rounded corners. */
    overflow: hidden;
}
/* Modal content reuses .card-content but should NOT clip its dropdowns */
.modal-content { overflow: visible; }
.card-header {
    background-color: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-border-soft) !important;
    padding: var(--ds-content-padding-y) var(--ds-content-padding-x);
    min-height: auto;
    /* Force vertical stacking of card title + description so the small
       muted text below the title never inlines next to it. Cards that
       need a horizontal layout in the header (e.g. title + button on the
       right) opt into it explicitly with .d-flex / .flex-row. */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* every child snaps to the left edge */
    gap: 0.2rem;
    text-align: left;
}
.card-header > * { text-align: left; }
/* Allow opt-in horizontal headers (title + side button etc.) to override
   the column default cleanly. */
.card-header.d-flex,
.card-header.flex-row {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
}
/* .card-title applies regardless of tag (h1..h6, div, p). The fallback rule
   on .card-header > h* covers cards whose author forgot the .card-title class.
   Uses align-items: baseline + flex (block-level) so when the title text
   wraps in narrow cards, the icon stays aligned to the first line cap-height
   instead of floating to the vertical centre of the wrapped block. */
.card-title,
.card-header > h1:not([class*='page-']),
.card-header > h2:not([class*='page-']),
.card-header > h3:not([class*='page-']),
.card-header > h4:not([class*='page-']),
.card-header > h5:not([class*='page-']) {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--ds-ink);
    font-size: 0.875rem;
    letter-spacing: -0.012em;
    margin-bottom: 0;
    line-height: 1.25;
    flex-wrap: wrap;
}
.card-title .ti {
    color: var(--ds-ink-3);
    font-size: 0.95rem !important;
    flex-shrink: 0;
}
.card-subtitle {
    color: var(--ds-ink-4);
    font-size: 0.85rem;
}
.card-body {
    padding: var(--ds-content-padding-x);
}
.card-footer {
    background-color: var(--ds-surface) !important;
    border-top: 1px solid var(--ds-border-soft) !important;
    padding: var(--ds-content-padding-y) var(--ds-content-padding-x);
}

/* Hover sutil opcional para cards clicables */
.card.card-link:hover,
.card[role="button"]:hover {
    border-color: var(--ds-border-strong) !important;
    background-color: var(--ds-surface-muted) !important;
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
/* =========================================================================
   BUTTON SYSTEM — categorized hierarchy, single source of truth
   --------------------------------------------------------------------------
   Categories (by visual prominence):
     PRIMARY    Solid grafito ink. ONE per screen. Save / Submit / Crear / Confirmar.
                Classes: .btn-primary, .btn-dark, .btn-github, .bg-github
     SECONDARY  Outline neutral. Cancel / Cerrar / Atrás / Filtrar.
                Classes: .btn-secondary, .btn-light, .btn-white, .btn-outline-secondary, bare .btn
     SOFT       Subtle filled (surface-muted). Less common alt actions.
                Classes: .btn-github-lt, .bg-github-lt, .bg-secondary-lt, .bg-primary-lt
     OUTLINE-PRIMARY  Outline grafito. Strong alt action. .btn-outline-primary, .btn-outline-dark
     GHOST      Transparent. Toolbar / inline actions. .btn-ghost-*, .btn-transparent, bare hover-only
     LINK       Text-only with underline on hover. .btn-link
     ICON       Square ghost icon. In tables/headers. .btn-icon
   Semantic colors:
     SUCCESS    Green sage. .btn-success, .btn-green   (.bg-success-lt = soft variant)
     WARNING    Amber muted. .btn-warning, .btn-yellow (.bg-warning-lt, .bg-orange-lt)
     DANGER     Red coral. .btn-danger, .btn-red       (.bg-danger-lt = soft variant)
     INFO       Blue muted (rare). .btn-info, .btn-blue (.bg-info-lt, .bg-azure-lt, .bg-blue-lt)
   Sizes:
     .btn-sm    0.28rem 0.65rem padding, 0.85rem font
     .btn       0.4rem 0.85rem  padding, 1rem font       (default = body baseline 13.5px)
     .btn-lg    0.55rem 1.2rem  padding, 1.05rem font
   ========================================================================= */

.btn {
    font-family: var(--ds-font-sans);
    font-weight: 500;
    font-size: 1rem;
    border-radius: var(--ds-radius-md) !important;
    padding: 0.4rem 0.85rem;
    border: 1px solid transparent;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    letter-spacing: -0.005em;
    line-height: 1.4;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}
.btn-sm  { padding: 0.28rem 0.65rem; font-size: 0.85rem; }
.btn-lg  { padding: 0.55rem 1.2rem;  font-size: 1.05rem; }
.btn-icon { padding: 0.4rem; min-width: 2rem; min-height: 2rem; }
.btn-icon.btn-sm { padding: 0.28rem; min-width: 1.7rem; min-height: 1.7rem; }
.btn-icon.btn-lg { padding: 0.55rem; min-width: 2.4rem; min-height: 2.4rem; }
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
.btn:focus-visible {
    outline: 2px solid var(--ds-ink) !important;
    outline-offset: 2px !important;
}

/* Bare .btn (no variant) → secondary outline (Bootstrap leaves it invisible by default) */
.btn:not([class*='btn-']):not([class*='bg-']),
.btn.btn-default {
    background-color: var(--ds-surface) !important;
    border-color: var(--ds-border-strong) !important;
    color: var(--ds-ink) !important;
}
.btn:not([class*='btn-']):not([class*='bg-']):hover,
.btn.btn-default:hover {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
}
.btn:not([class*='btn-']):not([class*='bg-']).show,
.btn:not([class*='btn-']):not([class*='bg-']):active,
.btn:not([class*='btn-']):not([class*='bg-']).active,
.btn.btn-default.show,
.btn.btn-default:active,
.btn.btn-default.active {
    background-color: var(--ds-surface-muted) !important;
    border-color: var(--ds-border-strong) !important;
    color: var(--ds-ink) !important;
    box-shadow: none !important;
}

/* ─── PRIMARY ───────────────────────────────────────────────────────── */
.btn-primary,
.btn-dark,
.btn-github,
.bg-github {
    background-color: var(--ds-ink) !important;
    border-color: var(--ds-ink) !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-dark:hover,
.btn-github:hover,
.bg-github:hover {
    background-color: var(--ds-ink-2) !important;
    border-color: var(--ds-ink-2) !important;
    color: #ffffff !important;
}
.btn-primary:active,
.btn-dark:active,
.btn-github:active,
.bg-github:active {
    background-color: #000 !important;
    border-color: #000 !important;
}

/* ─── SECONDARY (outline neutral) ───────────────────────────────────── */
.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-white {
    background-color: var(--ds-surface) !important;
    border-color: var(--ds-border-strong) !important;
    color: var(--ds-ink) !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-white:hover {
    background-color: var(--ds-surface-muted) !important;
    border-color: var(--ds-border-strong) !important;
    color: var(--ds-ink) !important;
}

/* ─── SOFT (subtle filled, less prominent than secondary) ───────────── */
.btn-github-lt,
.bg-github-lt,
.bg-secondary-lt,
.bg-primary-lt,
.btn-secondary-lt,
.btn-primary-lt {
    background-color: var(--ds-surface-active) !important;
    border-color: transparent !important;
    color: var(--ds-ink) !important;
}
.btn-github-lt:hover,
.bg-github-lt:hover,
.bg-secondary-lt:hover,
.bg-primary-lt:hover,
.btn-secondary-lt:hover,
.btn-primary-lt:hover {
    background-color: var(--ds-border-strong) !important;
    color: var(--ds-ink) !important;
}

/* ─── OUTLINE PRIMARY (strong alt action) ───────────────────────────── */
.btn-outline-primary,
.btn-outline-dark {
    background-color: transparent !important;
    border-color: var(--ds-ink) !important;
    color: var(--ds-ink) !important;
}
.btn-outline-primary:hover,
.btn-outline-dark:hover {
    background-color: var(--ds-ink) !important;
    color: #ffffff !important;
}

/* ─── GHOST / TRANSPARENT (toolbar inline actions) ──────────────────── */
.btn-ghost,
.btn-ghost-secondary,
.btn-ghost-primary,
.btn-ghost-dark,
.btn-transparent {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--ds-ink-2) !important;
    box-shadow: none !important;
}
.btn-ghost:hover,
.btn-ghost-secondary:hover,
.btn-ghost-primary:hover,
.btn-ghost-dark:hover,
.btn-transparent:hover {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
}

/* ─── LOADING STATE ─────────────────────────────────────────────────────
   Restore Tabler's transparent text during .btn-loading. Variant rules
   in this file (.btn-github, .btn-primary, …) re-set color with
   !important, so we use compound .btn.btn-loading (specificity 0,2,0)
   to beat any single-class variant regardless of source order. */
.btn.btn-loading {
    color: transparent !important;
}

/* ─── BACK BUTTONS ──────────────────────────────────────────────────────
   Homologated style for the 27 back/return buttons across detail/edit views.
   Pattern: <a class="btn btn-transparent px-0|px-2" href="/parent">
              <i class="ti ti-arrow-left ti-sm"></i>
            </a>
   - All variants (px-0 / px-2) collapse to the same padding & icon size
   - Cleaner square hit-target instead of zero/asymmetric padding
   - Always anchor-based (href to parent route) — no history.back() surprises
   - Behavior is preserved: navigation goes to the explicit href so the user
     lands on a known page even if they entered via deep-link.                */
.page-header .btn-transparent:has(> .ti-arrow-left),
.page-header a.btn:has(> .ti-arrow-left) {
    padding: 0.4rem 0.5rem !important;
    margin-right: 0.15rem;
    border-radius: var(--ds-radius-md);
}
.page-header .ti-arrow-left {
    font-size: 1rem !important;
    color: var(--ds-ink-2);
}
.page-header .btn-transparent:has(> .ti-arrow-left):hover .ti-arrow-left,
.page-header a.btn:has(> .ti-arrow-left):hover .ti-arrow-left {
    color: var(--ds-ink);
}

/* ─── LINK (text only, no fill) ─────────────────────────────────────── */
.btn-link,
.link-button,
.link-secondary,
.btn.btn-link.link-secondary {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--ds-ink-2) !important;
    text-decoration: none !important;
    font-weight: 500;
    padding: 0.4rem 0.5rem !important;
}
.btn-link:hover,
.link-button:hover,
.link-secondary:hover {
    color: var(--ds-ink) !important;
    text-decoration: underline !important;
}

/* ─── SEMANTIC: SUCCESS ─────────────────────────────────────────────── */
.btn-success,
.btn-green {
    background-color: var(--ds-success) !important;
    border-color: var(--ds-success) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-green:hover {
    background-color: #436a4f !important;
    border-color: #436a4f !important;
}
.btn-success-lt,
.bg-success-lt,
.bg-green-lt {
    background-color: var(--ds-success-bg) !important;
    border-color: transparent !important;
    color: var(--ds-success) !important;
}
.btn-success-lt:hover,
.bg-success-lt:hover,
.bg-green-lt:hover {
    background-color: #e2eee5 !important;
    color: var(--ds-success) !important;
}

/* ─── SEMANTIC: WARNING ─────────────────────────────────────────────── */
.btn-warning,
.btn-yellow {
    background-color: var(--ds-warning) !important;
    border-color: var(--ds-warning) !important;
    color: #fff !important;
}
.btn-warning:hover, .btn-yellow:hover {
    background-color: #8a6a32 !important;
    border-color: #8a6a32 !important;
}
.btn-warning-lt,
.bg-warning-lt,
.bg-yellow-lt,
.bg-orange-lt {
    background-color: var(--ds-warning-bg) !important;
    border-color: transparent !important;
    color: var(--ds-warning) !important;
}
.btn-warning-lt:hover,
.bg-warning-lt:hover,
.bg-yellow-lt:hover,
.bg-orange-lt:hover {
    background-color: #f1ead8 !important;
    color: var(--ds-warning) !important;
}

/* ─── SEMANTIC: DANGER ──────────────────────────────────────────────── */
.btn-danger,
.btn-red {
    background-color: var(--ds-danger) !important;
    border-color: var(--ds-danger) !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-red:hover {
    background-color: #9a4640 !important;
    border-color: #9a4640 !important;
}
.btn-outline-danger {
    background-color: transparent !important;
    border-color: var(--ds-danger) !important;
    color: var(--ds-danger) !important;
}
.btn-outline-danger:hover {
    background-color: var(--ds-danger) !important;
    color: #fff !important;
}
.btn-danger-lt,
.bg-danger-lt,
.bg-red-lt {
    background-color: var(--ds-danger-bg) !important;
    border-color: transparent !important;
    color: var(--ds-danger) !important;
}
.btn-danger-lt:hover,
.bg-danger-lt:hover,
.bg-red-lt:hover {
    background-color: #f1dfdc !important;
    color: var(--ds-danger) !important;
}

/* ─── SEMANTIC: INFO ────────────────────────────────────────────────── */
.btn-info,
.btn-blue,
.btn-azure {
    background-color: var(--ds-info) !important;
    border-color: var(--ds-info) !important;
    color: #fff !important;
}
.btn-info:hover, .btn-blue:hover, .btn-azure:hover {
    background-color: #3e5b73 !important;
    border-color: #3e5b73 !important;
}
.btn-info-lt,
.bg-info-lt,
.bg-blue-lt,
.bg-azure-lt {
    background-color: var(--ds-info-bg) !important;
    border-color: transparent !important;
    color: var(--ds-info) !important;
}
.btn-info-lt:hover,
.bg-info-lt:hover,
.bg-blue-lt:hover,
.bg-azure-lt:hover {
    background-color: #dde6ee !important;
    color: var(--ds-info) !important;
}

/* ─── ICON ALIGNMENT WITHIN BUTTONS ─────────────────────────────────── */
.btn .ti,
.btn i {
    vertical-align: -0.1em;
    line-height: 1;
}
.btn-icon .ti,
.btn-icon i {
    margin: 0 !important;
}

/* -------------------------------------------------------------------------
   6. Forms
   ------------------------------------------------------------------------- */
.form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-ink-2);
    margin-bottom: 0.3rem;
    letter-spacing: -0.005em;
}

.form-control,
.form-select,
.input-group-text {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border-strong) !important;
    color: var(--ds-ink) !important;
    border-radius: var(--ds-radius-md) !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    box-shadow: none !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
/* The .sm / .lg modifiers tighten padding for compact UI rows but the
   FONT-SIZE stays at the base 1rem (= 13.5px) so text doesn't shrink to an
   unreadable size. This matches the user's preference: "don't make the
   inputs smaller, just keep a normal input size". */
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    font-size: 1rem !important;
    padding: 0.3rem 0.55rem !important;
    line-height: 1.4 !important;
}
.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    font-size: 0.95rem !important;
    padding: 0.55rem 0.85rem !important;
    line-height: 1.4 !important;
}
.form-control::placeholder { color: var(--ds-ink-5); }
.form-control:focus,
.form-select:focus {
    border-color: var(--ds-ink) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07) !important;
}
.form-control:disabled,
.form-select:disabled {
    background-color: var(--ds-surface-soft) !important;
    color: var(--ds-ink-4) !important;
    cursor: not-allowed;
}
.input-group-text {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink-3) !important;
}

/* Input-group radius surgery: only the OUTER edges get rounded so the
   input + addon read as one continuous control. Bootstrap does this by
   default but my .form-control/.form-select/.input-group-text rules
   force full radius — restore the segmentation here. */
.input-group {
    flex-wrap: nowrap;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating,
.input-group > .input-group-text,
.input-group > .btn {
    border-radius: 0 !important;
}
.input-group > :first-child,
.input-group > :first-child > .form-control,
.input-group > :first-child > .form-select {
    border-top-left-radius: var(--ds-radius-md) !important;
    border-bottom-left-radius: var(--ds-radius-md) !important;
}
.input-group > :last-child,
.input-group > :last-child > .form-control,
.input-group > :last-child > .form-select {
    border-top-right-radius: var(--ds-radius-md) !important;
    border-bottom-right-radius: var(--ds-radius-md) !important;
}
/* Avoid double border at the seam */
.input-group > :not(:first-child) {
    margin-left: -1px;
}
/* Focused element on top so its focus ring isn't clipped by the addon */
.input-group > .form-control:focus,
.input-group > .form-select:focus {
    z-index: 2;
}

.form-check-input {
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
}
.form-check-input:checked {
    background-color: var(--ds-ink) !important;
    border-color: var(--ds-ink) !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07) !important;
    border-color: var(--ds-ink);
}

/* Form-switch must keep Bootstrap's pill shape (2em radius) — the rule above
   on .form-check-input overrides Tabler's default and would render the
   switch as a square. Restore the pill radius and the explicit dimensions
   so the thumb SVG positions correctly. */
.form-switch .form-check-input {
    border-radius: 2em !important;
    width: 2.25em !important;
    height: 1.25em !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--ds-ink) !important;
    border-color: var(--ds-ink) !important;
}

.form-hint, .form-text {
    color: var(--ds-ink-4);
    font-size: 0.85rem;
}

/* =========================================================================
   Tom-Select — wrapper IS the visible field
   --------------------------------------------------------------------------
   Single source of truth: the .ts-wrapper carries the border, background
   and radius. The .ts-control inside is just a transparent inner padding
   box. This eliminates two failure modes:
     1) DOUBLE BORDER — happened when both .ts-wrapper (via inherited
        .form-select / .form-control rules) and .ts-control rendered their
        own border at the same time.
     2) GREY/SEE-THROUGH SURFACE — a transparent wrapper meant the parent's
        background bled through the rounded corners and the ts-control's
        white box never reached the visible edge, so the field looked
        "blocked/disabled" when sitting inside a coloured container
        (.form-selectgroup-label, .alert, recessed cards, modals, etc.).
   ========================================================================= */
.ts-wrapper,
.ts-wrapper.single,
.ts-wrapper.multi,
.ts-wrapper.form-select,
.ts-wrapper.form-control,
.form-select.ts-wrapper,
.form-control.ts-wrapper {
    background-color: var(--ds-surface) !important;
    background-image: none !important;
    border: 1px solid var(--ds-border-strong) !important;
    border-radius: var(--ds-radius-md) !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-height: 2.1rem !important;
    height: auto !important;
    color: var(--ds-ink) !important;
    display: flex;
    align-items: stretch;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* The control is now just a transparent inner pad — no border, no bg,
   no radius (inherits from wrapper), just padding + flex layout. */
.ts-wrapper > .ts-control,
.ts-wrapper.single > .ts-control,
.ts-wrapper.multi > .ts-control,
.ts-wrapper.form-select > .ts-control,
.ts-wrapper.form-control > .ts-control,
.ts-control {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 1rem !important;
    min-height: 0 !important;
    color: var(--ds-ink) !important;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
}

/* Selected single-mode item: plain text, no chip styling. */
.ts-wrapper.single > .ts-control > .item {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--ds-ink) !important;
    line-height: inherit;
}

/* True disabled state — applied to the wrapper so the whole surface reads
   as locked, mirroring .form-control:disabled. */
.ts-wrapper.disabled,
.ts-wrapper.disabled > .ts-control,
.ts-wrapper.disabled > .ts-control * {
    background-color: var(--ds-surface-soft) !important;
    color: var(--ds-ink-4) !important;
    cursor: not-allowed !important;
}

/* Compact (.form-select-sm / .form-control-sm / .input-group-sm) — only
   the inner padding tightens. Font-size stays at the base 1rem. */
.ts-wrapper.form-select-sm > .ts-control,
.ts-wrapper.form-control-sm > .ts-control,
.input-group-sm .ts-wrapper > .ts-control {
    font-size: 1rem !important;
    padding: 0.3rem 0.55rem !important;
}

/* Inline input inside .ts-control inherits the field's size and never
   introduces its own height (otherwise the field grows with the input). */
.ts-control > input {
    min-height: 0 !important;
    line-height: 1.45 !important;
    font-size: 1rem !important;
    color: inherit;
}

/* Focus ring lives on the wrapper (since the wrapper carries the border).
   Suppress any focus border on the inner .ts-control. */
.ts-wrapper.focus,
.ts-wrapper.focus.single,
.ts-wrapper.focus.multi {
    border-color: var(--ds-ink) !important;
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07) !important;
}
.ts-wrapper.focus > .ts-control {
    border-color: transparent !important;
    box-shadow: none !important;
}
.ts-dropdown {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-md) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    margin-top: 4px !important;
    overflow: hidden;
}
.ts-dropdown,
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results {
    /* Match the .form-control / .ts-control font-size so the open dropdown
       reads at the same density as the input — without this they inherit
       Tabler's default ~1rem and feel oversized. */
    font-size: 1rem !important;
}
.ts-dropdown .option {
    padding: 0.45rem 0.7rem;
    color: var(--ds-ink-2);
    border-radius: 0;
}
.ts-dropdown .option:hover,
.ts-dropdown .active {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
}
.ts-dropdown .selected {
    background-color: var(--ds-surface-active) !important;
    color: var(--ds-ink) !important;
}
.ts-wrapper.multi .ts-control > div {
    background-color: var(--ds-surface-soft) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-sm) !important;
    color: var(--ds-ink) !important;
    font-size: 0.85rem !important;
    padding: 0.05rem 0.5rem 0.05rem 0.45rem !important;
    line-height: 1.5 !important;
}

/* -------------------------------------------------------------------------
   7. Tables
   ------------------------------------------------------------------------- */
.table {
    --tblr-table-bg: var(--ds-surface);
    --tblr-table-color: var(--ds-ink);
    --tblr-table-border-color: var(--ds-border-soft);
    --tblr-table-hover-bg: var(--ds-surface-muted);
    --tblr-table-striped-bg: var(--ds-surface-muted);
    color: var(--ds-ink);
    border-color: var(--ds-border-soft);
}
.table > :not(caption) > * > * {
    background-color: transparent;
}
.table thead th {
    background-color: var(--ds-surface) !important;
    color: var(--ds-ink-4) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    border-bottom: 1px solid var(--ds-border-soft) !important;
    border-top: 0 !important;
    padding: 0.65rem 1rem !important;
    white-space: nowrap;
}
/* Bootstrap's default rule `.table > :not(caption) > * + *` adds a 2nd
   border-top to the first body row that compounds with thead's border-bottom
   = visible darker line. Force it to a single soft separator. */
.table > :not(caption) > * + *,
.table > :not(caption) > * > * {
    border-top-color: var(--ds-border-soft) !important;
}
.table tbody td {
    padding: 0.65rem 1rem !important;
    border-color: var(--ds-border-soft) !important;
    font-size: 1rem;
    vertical-align: middle;
    color: var(--ds-ink-2);
}

/* Edge cells share the system's content padding token. Applies to ALL
   tables — inside cards, tab-panes, raw containers, .card-table from
   Tabler — so the leftmost data column always lines up with the leftmost
   tab, card-header text, modal-header text, and card-body content. */
.table thead th:first-child,
.table tbody td:first-child,
.table tfoot td:first-child {
    padding-left: var(--ds-content-padding-x) !important;
}
.table thead th:last-child,
.table tbody td:last-child,
.table tfoot td:last-child {
    padding-right: var(--ds-content-padding-x) !important;
}
.table tbody tr:hover {
    background-color: var(--ds-surface-muted) !important;
}
.table-card .table {
    margin-bottom: 0;
}

/* DataTables */
.dataTables_wrapper {
    color: var(--ds-ink);
}
.dataTables_filter input,
.dataTables_length select {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border-strong) !important;
    border-radius: var(--ds-radius-md) !important;
    color: var(--ds-ink);
    padding: 0.4rem 0.6rem;
}
.dataTables_paginate .pagination {
    margin-bottom: 0;
}
.page-link {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--ds-ink-3) !important;
    border-radius: var(--ds-radius-md) !important;
    margin: 0 1px;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
}
.page-link:hover {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
}
.page-item.active .page-link,
.page-link.active,
.active > .page-link {
    background-color: var(--ds-ink) !important;
    border-color: var(--ds-ink) !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    color: var(--ds-ink-5) !important;
    background: transparent !important;
}

#products-table > thead > tr > th {
    background-color: var(--ds-surface) !important;
}

/* -------------------------------------------------------------------------
   8. Modals
   ------------------------------------------------------------------------- */
.modal-content {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
}
.modal-header {
    padding: 1rem var(--ds-content-padding-x) 0.75rem;
    border-bottom: 1px solid var(--ds-border-soft) !important;
    background: var(--ds-surface);
}
/* .modal-title applies regardless of tag (the codebase has h5, h1 and even
   div instances historically). Fallback on bare h* inside .modal-header
   keeps modals consistent if the author forgets the .modal-title class. */
.modal-title,
.modal-header > h1:not([class*='page-']),
.modal-header > h2:not([class*='page-']),
.modal-header > h3:not([class*='page-']),
.modal-header > h4:not([class*='page-']),
.modal-header > h5:not([class*='page-']),
.modal-header > h6:not([class*='page-']) {
    font-weight: 600;
    color: var(--ds-ink);
    font-size: 0.95rem;
    letter-spacing: -0.018em;
    margin-bottom: 0;
    line-height: 1.2;
}
.modal-body {
    padding: var(--ds-content-padding-x);
    color: var(--ds-ink-2);
    line-height: 1.55;
    font-size: 1rem;
}
.modal-footer {
    padding: var(--ds-content-padding-y) var(--ds-content-padding-x);
    border-top: 1px solid var(--ds-border-soft) !important;
    background: var(--ds-surface);
    gap: 0.5rem;
}
.modal-backdrop {
    background-color: rgba(10, 10, 10, 0.35);
}
.modal-backdrop.show {
    opacity: 1;
}
.btn-close {
    opacity: 0.5;
    filter: none;
}
.btn-close:hover { opacity: 1; }

/* -------------------------------------------------------------------------
   9. Dropdowns
   ------------------------------------------------------------------------- */
.dropdown-menu {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-md) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05) !important;
    padding: 0.3rem !important;
    font-size: 1rem !important;
    color: var(--ds-ink);
    min-width: 200px;
}
.dropdown-item {
    color: var(--ds-ink-2) !important;
    padding: 0.4rem 0.6rem;
    border-radius: var(--ds-radius-sm);
    font-weight: 400;
    font-size: 1rem;
    transition: background-color 0.1s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ds-surface-active) !important;
    color: var(--ds-ink) !important;
}
.dropdown-item.text-danger { color: var(--ds-danger) !important; }
.dropdown-item.text-danger:hover { background-color: var(--ds-danger-bg) !important; color: var(--ds-danger) !important; }
.dropdown-divider { margin: 0.35rem 0 !important; border-color: var(--ds-border-soft) !important; }
.dropdown-header {
    color: var(--ds-ink-4);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-transform: none;
    padding: 0.5rem 0.7rem 0.25rem;
}

/* -------------------------------------------------------------------------
   10. Badges, alerts, toasts
   ------------------------------------------------------------------------- */
.badge {
    font-family: var(--ds-font-sans);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.22rem 0.48rem;
    border-radius: var(--ds-radius-sm);
    border: 1px solid transparent;
    letter-spacing: -0.003em;
    line-height: 1.3;
}
/* Numeric badges (counts, IDs) get mono — auto-detected by content shape */
.badge[data-count],
.badge.count,
.badge.numeric,
.badge.mono {
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    font-weight: 500;
    letter-spacing: -0.01em;
}
.badge.bg-primary,
.badge.bg-dark {
    background-color: var(--ds-ink) !important;
    color: #fff !important;
}
.badge.bg-secondary {
    background-color: var(--ds-surface-soft) !important;
    color: var(--ds-ink-2) !important;
    border-color: var(--ds-border) !important;
}
.badge.bg-success, .badge.bg-green,
.badge.bg-success-lt, .badge.bg-green-lt {
    background-color: var(--ds-success-bg) !important;
    color: var(--ds-success) !important;
    border-color: transparent !important;
}
.badge.bg-warning, .badge.bg-yellow,
.badge.bg-warning-lt, .badge.bg-yellow-lt {
    background-color: var(--ds-warning-bg) !important;
    color: var(--ds-warning) !important;
}
.badge.bg-danger, .badge.bg-red,
.badge.bg-danger-lt, .badge.bg-red-lt {
    background-color: var(--ds-danger-bg) !important;
    color: var(--ds-danger) !important;
}
.badge.bg-info, .badge.bg-blue,
.badge.bg-info-lt, .badge.bg-blue-lt {
    background-color: var(--ds-info-bg) !important;
    color: var(--ds-info) !important;
}

/* Alerts */
.alert {
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-md);
    background-color: var(--ds-surface) !important;
    color: var(--ds-ink-2);
    padding: var(--ds-space-4);
    box-shadow: none !important;
}
.alert-success { background-color: var(--ds-success-bg) !important; border-color: transparent !important; color: var(--ds-success) !important; }
.alert-warning { background-color: var(--ds-warning-bg) !important; border-color: transparent !important; color: var(--ds-warning) !important; }
.alert-danger  { background-color: var(--ds-danger-bg)  !important; border-color: transparent !important; color: var(--ds-danger)  !important; }
.alert-info    { background-color: var(--ds-info-bg)    !important; border-color: transparent !important; color: var(--ds-info)    !important; }

/* Toastr */
#toast-container > .toast,
#toast-container .toast {
    background-color: var(--ds-surface) !important;
    color: var(--ds-ink) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-md) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    opacity: 1 !important;
    padding: 0.85rem 1rem 0.85rem 3rem !important;
    background-position: 1rem center !important;
}
#toast-container > .toast:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important; }
#toast-container .toast-success { border-left: 3px solid var(--ds-success) !important; }
#toast-container .toast-warning { border-left: 3px solid var(--ds-warning) !important; }
#toast-container .toast-error   { border-left: 3px solid var(--ds-danger)  !important; }
#toast-container .toast-info    { border-left: 3px solid var(--ds-info)    !important; }
#toast-container .toast-title { font-weight: 600; color: var(--ds-ink); font-size: 0.9rem; }
#toast-container .toast-message,
#toast-container .toast .toast-body { color: var(--ds-ink-3) !important; font-size: 0.85rem; padding-left: 0 !important; }
#toast-container .toast-close-button { color: var(--ds-ink-4); opacity: 0.7; }
#toast-container .toast-progress { background-color: var(--ds-ink); opacity: 0.15; }

/* -------------------------------------------------------------------------
   11. Tabs
   ------------------------------------------------------------------------- */
/* =========================================================================
   Tabs — Linear/Vercel style: text tabs with a 1.5px ink underline on active,
   subtle muted state otherwise, no flashy hover borders, badges go neutral.
   ========================================================================= */
.nav-tabs {
    border-bottom: 1px solid var(--ds-border) !important;
    background: transparent !important;
    gap: 0;
    margin: 0 !important;
    padding: 0;
    flex-wrap: nowrap;
}
.nav-tabs .nav-item { margin: 0; }

.nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 1.5px solid transparent !important;
    background: transparent !important;
    color: var(--ds-ink-4) !important;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.55rem 0.85rem !important;
    margin: 0 0 -1px 0 !important;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
    white-space: nowrap;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.nav-tabs .nav-link:hover:not(.active) {
    color: var(--ds-ink-2) !important;
    background: transparent !important;
    border-bottom-color: transparent !important;  /* no border flash */
}
.nav-tabs .nav-link.active {
    color: var(--ds-ink) !important;
    background: transparent !important;
    border-bottom-color: var(--ds-ink) !important;
}
.nav-tabs .nav-link .ti,
.nav-tabs .nav-link i.ti {
    font-size: 0.95rem !important;
    color: currentColor;
    margin: 0 !important;
}

/* Badge inside a tab — neutral, mono, muted. Counts not alarms. */
.nav-tabs .nav-link .badge {
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 0.12rem 0.4rem;
    background-color: var(--ds-surface-soft) !important;
    color: var(--ds-ink-3) !important;
    border: 0 !important;
    margin-left: 0.15rem;
}
.nav-tabs .nav-link.active .badge {
    background-color: var(--ds-surface-active) !important;
    color: var(--ds-ink) !important;
}

/* `.card-header-tabs` (Tabler) inherits the same look */
.card-header-tabs {
    margin: 0 !important;
}
.card-header-tabs .nav-link {
    border-bottom: 1.5px solid transparent !important;
}
.card-header-tabs .nav-link.active {
    background-color: transparent !important;
    border-bottom-color: var(--ds-ink) !important;
}
.card-header-tabs .nav-link:hover:not(.active) {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* When a card-header is used solely as a tab strip, collapse all its
   padding so the tabs sit flush against the card edges. The first tab's
   own padding-left then provides the visual indent that aligns with the
   first table cell below. No `px-0` needed in markup. */
.card-header:has(> .nav-tabs),
.card-header:has(> .card-header-tabs),
.card-header.border-bottom:has(.nav-tabs) {
    padding: 0 !important;
    background: var(--ds-surface) !important;
    border-bottom: 0 !important;  /* nav-tabs draws its own border */
}

/* Remove inner padding from the nav-tabs container too */
.card-header > .nav-tabs,
.card-header > .nav-tabs.px-0,
.card-header > .card-header-tabs {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* First tab's content aligns with the first table cell's content via the
   shared --ds-content-padding-x token. */
.card-header > .nav-tabs > .nav-item:first-child > .nav-link,
.card-header > .card-header-tabs > .nav-item:first-child > .nav-link,
.flex-grow-0.card-header > .nav-tabs > .nav-item:first-child > .nav-link {
    padding-left: var(--ds-content-padding-x) !important;
}
/* Last tab gets matching right padding for symmetry on the trailing edge */
.card-header > .nav-tabs > .nav-item:last-child > .nav-link,
.card-header > .card-header-tabs > .nav-item:last-child > .nav-link {
    padding-right: var(--ds-content-padding-x) !important;
}

/* Pills */
.nav-pills .nav-link {
    color: var(--ds-ink-3);
    background: transparent;
    border-radius: var(--ds-radius-md);
}
.nav-pills .nav-link:hover { background: var(--ds-surface-muted); }
.nav-pills .nav-link.active {
    background-color: var(--ds-surface-active) !important;
    color: var(--ds-ink) !important;
}

/* -------------------------------------------------------------------------
   12. Datepicker (flatpickr) — refined clinical look
   ------------------------------------------------------------------------- */

/* Calendar container.
   Popover (default): subtle card so it stands out from the page.
   Inline: completely flat — embeds naturally in whatever parent holds it. */
.flatpickr-calendar {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    padding: 0.5rem !important;
    font-family: var(--ds-font-sans) !important;
    color: var(--ds-ink) !important;
    z-index: 9999 !important;
}
.flatpickr-calendar.inline {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-bottom-color: var(--ds-border) !important;
}
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-top-color: var(--ds-border) !important;
}

/* ── Month / year navigation ──
   Keep Flatpickr's own positioning (it uses position:absolute internally
   for the current-month label). We only restyle colors and hover. */
.flatpickr-months .flatpickr-month {
    color: var(--ds-ink) !important;
    background: transparent !important;
    fill: var(--ds-ink) !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--ds-ink-3) !important;
    fill: var(--ds-ink-3) !important;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--ds-ink) !important;
    fill: var(--ds-ink) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: currentColor !important;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
    fill: currentColor !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--ds-ink) !important;
    font-family: var(--ds-font-sans) !important;
    font-weight: 600 !important;
    background: transparent !important;
}
.flatpickr-current-month input.cur-year {
    font-family: var(--ds-font-mono) !important;
    font-feature-settings: 'tnum';
}
.flatpickr-current-month .arrowUp,
.flatpickr-current-month .arrowDown {
    border-color: var(--ds-ink-3) !important;
}
.flatpickr-current-month .arrowUp::after { border-bottom-color: var(--ds-ink-3) !important; }
.flatpickr-current-month .arrowDown::after { border-top-color: var(--ds-ink-3) !important; }

/* ── Weekdays header ── */
.flatpickr-weekdays { background-color: transparent !important; height: 2rem; }
.flatpickr-weekdaycontainer { padding: 0 !important; }
span.flatpickr-weekday {
    color: var(--ds-ink-4) !important;
    font-family: var(--ds-font-sans) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    background: transparent !important;
}

/* ── Day cells ──
   Width / height left to Flatpickr defaults so the calendar can be inline
   (full-width) or popover. We only style colors, fonts, and transitions. */
.flatpickr-days { padding: 0 !important; }
.dayContainer { padding: 0 !important; }
.flatpickr-day {
    border-radius: var(--ds-radius-sm) !important;
    color: var(--ds-ink-2) !important;
    font-family: var(--ds-font-mono) !important;
    font-feature-settings: 'tnum';
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange) {
    background-color: var(--ds-surface-muted) !important;
    border-color: transparent !important;
    color: var(--ds-ink) !important;
}

/* Today: subtle ring underneath, not solid black */
.flatpickr-day.today,
.flatpickr-calendar .dayContainer .today {
    background-color: transparent !important;
    color: var(--ds-ink) !important;
    border-color: var(--ds-ink) !important;
    font-weight: 600 !important;
}
.flatpickr-day.today:hover {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
    border-color: var(--ds-ink) !important;
}
/* When today is also selected, fill it solid */
.flatpickr-day.today.selected,
.flatpickr-day.today.startRange,
.flatpickr-day.today.endRange {
    background-color: var(--ds-ink) !important;
    color: #fff !important;
    border-color: var(--ds-ink) !important;
}

/* Selected (single date or range endpoints) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-calendar .selected {
    background-color: var(--ds-ink) !important;
    color: #fff !important;
    border-color: var(--ds-ink) !important;
    font-weight: 600 !important;
}
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background-color: var(--ds-ink-2) !important;
    border-color: var(--ds-ink-2) !important;
}

/* In-range: continuous light gray strip */
.flatpickr-day.inRange,
.flatpickr-calendar .inRange {
    background-color: var(--ds-surface-active) !important;
    color: var(--ds-ink) !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: -5px 0 0 var(--ds-surface-active), 5px 0 0 var(--ds-surface-active) !important;
}
.flatpickr-day.startRange { border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm) !important; }
.flatpickr-day.endRange   { border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0 !important; }
.flatpickr-day.startRange.endRange { border-radius: var(--ds-radius-sm) !important; }

/* Disabled / outside current month */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-disabled {
    color: var(--ds-ink-5) !important;
    background: transparent !important;
    cursor: not-allowed !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--ds-ink-5) !important;
}

/* ── Time input (when enableTime: true) ── */
.flatpickr-time {
    border-top: 1px solid var(--ds-border-soft) !important;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
}
.flatpickr-time input {
    color: var(--ds-ink) !important;
    font-family: var(--ds-font-mono) !important;
    font-feature-settings: 'tnum';
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    background: var(--ds-surface-soft) !important;
    border-radius: var(--ds-radius-sm) !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: var(--ds-surface-muted) !important;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--ds-ink-3) !important;
    font-family: var(--ds-font-mono) !important;
}

/* ── Week numbers (if enableWeekNumbers: true) ── */
.flatpickr-weeks {
    border-right: 1px solid var(--ds-border-soft) !important;
    padding: 0 0.4rem !important;
}
.flatpickr-weekwrapper .flatpickr-weeks span.flatpickr-day {
    color: var(--ds-ink-4) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

/* ── Month dropdown options (browser-rendered <option>) ── */
.flatpickr-monthDropdown-month {
    background: var(--ds-surface) !important;
    color: var(--ds-ink) !important;
}

/* -------------------------------------------------------------------------
   13. Misc utilities (kept from previous global.css)
   ------------------------------------------------------------------------- */
.navbar-nav { font-weight: 500; }

.progressbg { padding: 0.15rem 0.5rem !important; }

tr:hover { cursor: pointer; }

#selected-images {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
}
.img-added-dpz,
.add-file-element {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    position: relative;
    aspect-ratio: 1;
}
.img-added-dpz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ds-radius-md);
    background-color: var(--ds-surface-soft);
}
.dz-preview { display: none; }
#selected-images .img-added-dpz:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.file-item {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background-color: var(--ds-surface);
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border);
}

.add-file-element {
    background-color: var(--ds-surface-muted);
    border-radius: var(--ds-radius-md);
    border: 1px dashed var(--ds-border-strong);
    cursor: pointer;
}

.select-categories-item:hover {
    background-color: var(--ds-surface-muted);
    cursor: pointer;
}
.selected-category { background-color: var(--ds-surface-active); }
#product-category-ts-dropdown > .selected.active,
#product-category-ts-dropdown > .active { background-color: var(--ds-surface-muted); }
#product-category-ts-dropdown > .selected { background-color: var(--ds-surface-active); }
.dp-header-categories:hover { background-color: var(--ds-surface-muted); cursor: pointer; }

.horizontal-divider {
    width: 1px;
    height: 1.5rem;
    background-color: var(--ds-border);
}

.link-button {
    background-color: transparent;
    border: none;
    color: var(--ds-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3.5px;
}
.link-button:hover .link-text { text-decoration: underline; }
.link-button i { font-size: 19px; }

.dropzone {
    border: 1px dashed var(--ds-border-strong) !important;
    border-radius: var(--ds-radius-lg) !important;
    color: var(--ds-ink-4);
    padding: 1.25rem;
    background-color: var(--ds-surface-muted);
}
.dropzone-60, .dropzone-50, .dropzone-40, .dropzone-30, .dropzone-20 {
    border: 1px dashed var(--ds-border-strong);
    background-color: var(--ds-surface-muted);
}
.dropzone-60 { height: 60px; width: 60px; }
.dropzone-50 { height: 50px; width: 50px; }
.dropzone-40 { height: 40px; width: 40px; }
.dropzone-30 { height: 30px; width: 30px; }
.dropzone-20 { height: 20px; width: 20px; }
.dropzone-60:hover, .dropzone-50:hover, .dropzone-40:hover,
.dropzone-30:hover, .dropzone-20:hover {
    background-color: var(--ds-surface-active);
    cursor: pointer;
}

/* Google Places autocomplete */
.pac-icon { display: none; }
.pac-item {
    border: 0;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    font-family: var(--ds-font-sans);
}
.pac-item:hover, .pac-item-selected {
    background-color: var(--ds-surface-muted);
}
.pac-container {
    background-color: var(--ds-surface);
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: 5px;
    margin-top: 5px;
    z-index: 9999;
    position: fixed;
    display: inline-block;
}

.iti { width: 100%; }

/* Responsive borders helpers */
.border-bottom-sm { border-bottom: 1px solid var(--ds-border); }
@media (min-width: 768px) {
    .border-bottom-sm { border-bottom: 0; }
}
.border-bottom-md { border-bottom: 0; }
@media (min-width: 768px) {
    .border-bottom-md { border-bottom: 1px solid var(--ds-border); }
}
.border-end-sm { border-right: 1px solid var(--ds-border); }
@media (min-width: 768px) {
    .border-end-sm { border-right: 0; }
}
.border-end-md { border-right: 0; }
@media (min-width: 768px) {
    .border-end-md { border-right: 1px solid var(--ds-border); }
}

.dropdown-toggle:after { margin-top: -0.3em !important; }

/* Scroll containers */
div.dts div.dt-scroll-body,
div.dts div.dataTables_scrollBody { background: none !important; }
div.dts div.dt-scroll-body table,
div.dts div.dataTables_scrollBody table { background-color: transparent !important; }

td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-outerContainer { border-radius: var(--ds-radius-lg) !important; overflow: hidden; }
.lb-image { border: 0 !important; }

.sys-notification {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ds-border-soft);
    font-family: var(--ds-font-sans);
    background-color: var(--ds-surface);
    transition: background-color 0.1s ease;
}
.sys-notification:hover { background-color: var(--ds-surface-muted); }

/* =========================================================================
   .badge-button — status filter pills (Todas / Activos / Borrador /
   Archivados, etc). Used in 18 views (Productos, Giftcards, Servicios,
   Clientes, Ventas, Compras, Terminal, Users, Devices, Branches…).
   Works as <span>, <a>, or <button> — the browser-default <button> chrome
   is fully reset so the visual is consistent regardless of element.
   ========================================================================= */
.badge-button {
    display: inline-flex !important;
    align-items: center;
    background: transparent !important;
    color: var(--ds-ink-4) !important;
    cursor: pointer;
    padding: 0.35rem 0.75rem !important;
    border-radius: var(--ds-radius-md) !important;
    font-family: var(--ds-font-sans) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    -webkit-user-select: none;
    user-select: none;
    /* Reset native <button> chrome (background, border, outline) so the
       element doesn't appear "highlighted" just because the browser
       focused it on page-load or after a click. */
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
    text-align: center;
    box-shadow: none !important;
    outline: none !important;
}
.badge-button:hover:not(.active) {
    /* No background on hover — only color change. This prevents
       inactive pills from looking like the active one. */
    background: transparent !important;
    color: var(--ds-ink) !important;
    border-color: transparent !important;
}
.badge-button:focus,
.badge-button:focus:not(:focus-visible),
.badge-button:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-color: transparent !important;
}
/* Focus only retains background when the pill is also .active */
.badge-button.active:focus,
.badge-button.active:focus:not(:focus-visible) {
    background-color: var(--ds-surface-active) !important;
    border-color: var(--ds-border) !important;
}
.badge-button:focus-visible {
    outline: 2px solid var(--ds-ink-4) !important;
    outline-offset: 2px !important;
}
.badge-button.active {
    background-color: var(--ds-surface-active) !important;
    color: var(--ds-ink) !important;
    border-color: var(--ds-border) !important;
    font-weight: 600 !important;
}

/* Sibling spacing — they appear in markup as bare inline <span>s without
   a container, so we space them via adjacent selector. */
.badge-button + .badge-button {
    margin-left: 0.2rem;
}

/* Counter badge nested inside a .badge-button (e.g. "Sin agendar 1410"
   where 1410 is a <span class="badge"> inside the pill). The :not()
   prevents it from matching pills that ARE .badge-button themselves. */
.badge-button > .badge:not(.badge-button) {
    font-family: var(--ds-font-mono);
    font-size: 0.85rem;
    font-feature-settings: 'tnum';
    margin-left: 0.3rem;
    padding: 0.12rem 0.35rem;
    background: var(--ds-surface-soft) !important;
    color: var(--ds-ink-3) !important;
    border: 0;
}

.delete-products:hover { background-color: var(--ds-danger-bg); }

.user-name-ellipsis {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0%;
}

/* Footer */
.footer {
    background-color: var(--ds-bg) !important;
    border-top: 1px solid var(--ds-border-soft);
    color: var(--ds-ink-4);
    font-size: 0.85rem;
}

/* Print */
@media print {
    body { background: #fff !important; }
    .card { border: 1px solid #ddd !important; }
}

/* =========================================================================
   18. APP SIDEBAR — Rail (icons) + Panel (subitems)
   --------------------------------------------------------------------------
   Two-column sidebar: a 56px icon rail on the left and a 220px contextual
   panel on its right that shows the subitems of the active section.
   ========================================================================= */
:root {
    --ds-rail-width: 56px;
    --ds-panel-width: 220px;
    --ds-sidebar-width: calc(var(--ds-rail-width) + var(--ds-panel-width));
}

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1030;
    width: var(--ds-sidebar-width);
    display: flex;
    align-items: stretch;
    background: var(--ds-surface);
    border-right: 1px solid var(--ds-border);
    transition: width 0.2s ease;
}
.app-sidebar.panel-collapsed {
    width: var(--ds-rail-width);
}
.app-sidebar.panel-collapsed .app-panel {
    display: none;
}

/* Push page content to the right of the sidebar */
.page-wrapper {
    margin-left: var(--ds-sidebar-width);
    min-height: 100vh;
    transition: margin-left 0.2s ease;
}
.app-sidebar.panel-collapsed ~ .page-wrapper {
    margin-left: var(--ds-rail-width);
}

/* ─── RAIL ─────────────────────────────────────────────────────────── */
.app-rail {
    width: var(--ds-rail-width);
    flex: 0 0 var(--ds-rail-width);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;                 /* brand sits flush at the top, aligning Y=0 with page-header */
    background: var(--ds-surface-muted);
    border-right: 1px solid var(--ds-border);
}
/* Brand area aligns with the page-header (3rem) so the first rail icon
   sits flush below the top divider line of the page-header. */
.rail-brand {
    height: 3rem;
    flex: 0 0 3rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface-muted);
}
.rail-brand img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.rail-items {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.4rem;     /* breathing room added back below the brand */
    flex: 1 1 auto;
}

.rail-footer {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem;
    border-top: 1px solid var(--ds-border);
    margin-top: auto;
}

.rail-item {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-ink-3);
    background: transparent;
    border: 0;
    border-radius: var(--ds-radius-md);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.rail-item .ti {
    font-size: 1.05rem !important;
    color: currentColor;
}

/* Hover tooltip: floats to the right of the rail icon, inherits design tokens */
.rail-item .rail-tooltip {
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--ds-ink);
    color: #fff;
    padding: 0.3rem 0.55rem;
    border-radius: var(--ds-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
    z-index: 1100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.rail-item:hover .rail-tooltip,
.rail-item:focus-visible .rail-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0.25s, 0.25s, 0s;
}
.rail-item:hover {
    background: var(--ds-surface-active);
    color: var(--ds-ink);
}
.rail-item.current,
.rail-item[aria-expanded='true'] {
    background: var(--ds-surface);
    color: var(--ds-ink);
    box-shadow: inset 0 0 0 1px var(--ds-border);
}
.rail-item.current::before {
    content: '';
    position: absolute;
    left: -0.4rem;
    top: 25%;
    bottom: 25%;
    width: 2px;
    background: var(--ds-ink);
    border-radius: 2px;
}

.rail-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    /* When used as a <span> wrapping a ti-user icon, render as a circular
       chip so it doesn't conflict with the brand logo on the top-left. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface-soft);
    color: var(--ds-ink-3);
    line-height: 1;
}
.rail-avatar .ti { line-height: 1; }

/* User dropdown opens to the right of the rail */
.rail-user-wrap .dropdown-menu {
    margin-left: 0.5rem !important;
    min-width: 220px;
}
.rail-user-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.7rem;
}
.rail-user-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface-soft);
    color: var(--ds-ink-3);
    flex-shrink: 0;
}
.rail-user-card-avatar .ti { line-height: 1; }
.rail-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ds-ink);
    line-height: 1.2;
}
.rail-user-role-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 1px 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ds-ink-3);
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    text-transform: capitalize;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* ─── PANEL ────────────────────────────────────────────────────────── */
.app-panel {
    width: var(--ds-panel-width);
    flex: 0 0 var(--ds-panel-width);
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border-right: 1px solid var(--ds-border);   /* explicit right divider */
    overflow-y: auto;
    overflow-x: hidden;
}
.panel-section[hidden] { display: none !important; }
.panel-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Panel header height = 3rem, matches page-header so the line under the
   panel title sits exactly at the same Y as the page-header divider. */
.panel-header {
    height: 3rem;
    flex: 0 0 3rem;
    box-sizing: border-box;
    padding: 0 var(--ds-content-padding-x);
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 1;
}
/* Collapse / Expand buttons */
.panel-collapse-btn,
.panel-expand-btn {
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-ink-4);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.panel-collapse-btn:hover,
.panel-expand-btn:hover {
    background: var(--ds-surface-muted);
    color: var(--ds-ink);
}
.panel-collapse-btn .ti,
.panel-expand-btn .ti {
    font-size: 1rem !important;
}

/* Floating expand button — appears on the rail when panel is collapsed */
.panel-expand-btn {
    position: absolute;
    top: 0.55rem;
    right: -0.85rem;
    width: 1.7rem;
    height: 1.7rem;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    z-index: 1031;
    color: var(--ds-ink-3);
}
.app-sidebar:not(.panel-collapsed) .panel-expand-btn {
    display: none;
}

.panel-nav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.5rem 1rem;
}
.panel-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    color: var(--ds-ink-3);
    text-decoration: none;
    border-radius: var(--ds-radius-sm);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.panel-item .ti {
    font-size: 1rem !important;
    color: var(--ds-ink-4);
    flex-shrink: 0;
}
.panel-item:hover {
    background: var(--ds-surface-muted);
    color: var(--ds-ink);
    text-decoration: none;
}
.panel-item:hover .ti { color: var(--ds-ink-3); }
.panel-item.current {
    background: var(--ds-surface-active);
    color: var(--ds-ink);
}
.panel-item.current .ti { color: var(--ds-ink); }
.panel-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Hide Tabler's old `.navbar-vertical` overrides since we replaced it */
.app-sidebar.navbar-vertical { display: flex; }

/* Mobile: sidebar collapses to overlay (basic; enhance later if needed) */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); transition: transform 0.2s ease; }
    .app-sidebar.show { transform: translateX(0); }
    .page-wrapper { margin-left: 0; }
}

.bg-surface-soft { background-color: var(--ds-surface-soft) !important; }

/* =========================================================================
   DASHBOARD WIDGETS — clinical operational widgets
   ========================================================================= */
.dashboard-list {
    display: flex;
    flex-direction: column;
}
.dashboard-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.15rem;
    border-bottom: 1px solid var(--ds-border-soft);
    transition: background-color 0.12s ease;
    text-decoration: none;
    color: inherit;
}
.dashboard-list-row:hover {
    background-color: var(--ds-surface-muted);
    color: inherit;
    text-decoration: none;
}
.dashboard-list-row:last-child { border-bottom: 0; }
.dashboard-list-empty,
.dashboard-list-loading {
    padding: 1.25rem;
    text-align: center;
    color: var(--ds-ink-4);
    font-size: 0.85rem;
    font-style: italic;
}

/* Past schedule rows: subtle de-emphasis so the eye scans to active/upcoming */
.schedule-row.is-past .schedule-time { color: var(--ds-ink-3); }
.schedule-row.is-past:hover { background-color: var(--ds-surface-muted); }

/* Next-upcoming row gets a subtle left accent so it pops on scan */
.schedule-row.is-next {
    background-color: var(--ds-success-bg);
    border-left: 3px solid var(--ds-success);
}
.schedule-row.is-next:hover {
    background-color: var(--ds-success-bg);
}
.schedule-row.is-next .schedule-time-relative { color: var(--ds-success); font-weight: 600; }

/* In-progress row (current time within scheduled slot) */
.schedule-row.is-current {
    background-color: var(--ds-warning-bg);
    border-left: 3px solid var(--ds-warning);
}
.schedule-row.is-current:hover { background-color: var(--ds-warning-bg); }
.schedule-row.is-current .schedule-time-relative { color: var(--ds-warning); font-weight: 600; }

/* Status pills column (WhatsApp delivery + confirmation) */
.schedule-row .schedule-status {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    max-width: 60%;
}
/* On narrow widths (cards in col-md-7 etc.) collapse to vertical so
   pills don't crash with the patient name column. */
@media (max-width: 991px) {
    .schedule-row .schedule-status {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.15rem;
        max-width: none;
    }
}

/* Schedule row inside upcoming-schedules-list */
.schedule-row .schedule-time {
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ds-ink);
    min-width: 3.5rem;
    line-height: 1.2;
}
.schedule-row .schedule-time-relative {
    font-size: 0.85rem;
    color: var(--ds-ink-4);
    font-family: var(--ds-font-mono);
    font-weight: 400;
    margin-top: 0.1rem;
}
.schedule-row .schedule-main { flex: 1 1 auto; min-width: 0; }
.schedule-row .schedule-patient {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ds-ink);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.schedule-row .schedule-meta {
    font-size: 0.85rem;
    color: var(--ds-ink-4);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.schedule-row .schedule-meta .schedule-meta-sep { color: var(--ds-ink-5); margin: 0 0.35rem; }

/* Inventory alert row */
.alert-row .alert-name {
    flex: 1 1 auto;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ds-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.alert-row .alert-stock {
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    font-size: 0.85rem;
    color: var(--ds-ink-3);
    flex-shrink: 0;
}
.alert-row .alert-stock.is-critical { color: var(--ds-danger); font-weight: 600; }
.alert-row .alert-stock.is-low      { color: var(--ds-warning); font-weight: 600; }

/* WhatsApp message row */
.message-row .msg-main { flex: 1 1 auto; min-width: 0; }
.message-row .msg-patient {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ds-ink);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message-row .msg-meta {
    font-size: 0.85rem;
    color: var(--ds-ink-4);
    margin-top: 0.1rem;
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message-row .msg-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}
.msg-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.15rem 0.4rem;
    border-radius: var(--ds-radius-sm);
    line-height: 1.3;
    white-space: nowrap;
}
.msg-pill .ti { font-size: 0.85rem !important; }
.msg-pill.is-sent       { background: var(--ds-info-bg);    color: var(--ds-info); }
.msg-pill.is-delivered  { background: var(--ds-success-bg); color: var(--ds-success); }
.msg-pill.is-failed     { background: var(--ds-danger-bg);  color: var(--ds-danger); }
.msg-pill.is-no-phone   { background: var(--ds-surface-soft); color: var(--ds-ink-3); }
.msg-pill.is-warning    { background: var(--ds-warning-bg); color: var(--ds-warning); }
.msg-pill.is-confirmed  { background: var(--ds-success-bg); color: var(--ds-success); }
.msg-pill.is-pending    { background: var(--ds-surface-soft); color: var(--ds-ink-3); }
.msg-pill.is-info       { background: var(--ds-info-bg);    color: var(--ds-info); }
.msg-pill.is-package    { background: var(--ds-warning-bg); color: var(--ds-warning); }

/* Citas por operador — compact bar list */
.operator-list { display: flex; flex-direction: column; gap: 0.55rem; }
.operator-row {
    display: grid;
    grid-template-columns: 11rem 1fr 2.5rem;
    gap: 0.85rem;
    align-items: center;
}
.operator-name {
    font-size: 1rem;
    color: var(--ds-ink-2);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.operator-bar-track {
    height: 6px;
    background: var(--ds-surface-soft);
    border-radius: 3px;
    overflow: hidden;
}
.operator-bar-fill {
    height: 100%;
    background: var(--ds-ink);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.operator-count {
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ds-ink);
    text-align: right;
}

/* =========================================================================
   19. MEDICAL EXPEDIENTE — clinical data patterns
   --------------------------------------------------------------------------
   Patterns specific to the patient record:
     .patient-banner       Patient identity bar at the top of an expediente
     .patient-banner-stat  Each piece of patient info inside the banner
     .vital-grid           Responsive grid of vital sign cards
     .vital-card           Individual vital metric (number + unit + label)
     .section-title        Section header inside long clinical forms
     .heredity-row         Compact row for hereditary antecedents pattern
     .soap-section         SOAP note structure (Subjetivo/Objetivo/Análisis/Plan)
     .clinical-form        Scope for the full clinical history form
   ========================================================================= */

/* ─── Patient banner ─────────────────────────────────────────────────── */
.patient-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
}
.patient-banner-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--ds-surface-active);
    color: var(--ds-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ds-font-sans);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    text-transform: uppercase;
}
.patient-banner-main {
    flex: 1 1 auto;
    min-width: 0;
}
.patient-banner-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.patient-banner-meta {
    color: var(--ds-ink-4);
    font-size: 0.85rem;
    margin-top: 0.15rem;
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    letter-spacing: -0.005em;
}
.patient-banner-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.patient-banner-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.patient-banner-stat .stat-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.patient-banner-stat .stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-ink);
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}
.patient-banner-stat .stat-value.text-only {
    font-family: var(--ds-font-sans);
}
.patient-banner-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* ─── Vital signs grid ───────────────────────────────────────────────── */
.vital-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.65rem;
}
.vital-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: border-color 0.12s ease;
}
.vital-card:focus-within {
    border-color: var(--ds-ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.05);
}
.vital-card-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-ink-4);
    letter-spacing: -0.005em;
    text-transform: none;
    margin: 0;
}
.vital-card-input-row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.vital-card-input {
    flex: 1 1 auto;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    font-family: var(--ds-font-mono) !important;
    font-feature-settings: 'tnum';
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: var(--ds-ink) !important;
    letter-spacing: -0.025em;
    width: 100%;
    min-height: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.vital-card-input::placeholder {
    color: var(--ds-ink-5);
    font-weight: 400;
}
.vital-card-input:focus {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.vital-card-input[disabled],
.vital-card-input[readonly] {
    color: var(--ds-ink-3) !important;
    background: transparent !important;
}
.vital-card-unit {
    font-family: var(--ds-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-ink-4);
    flex-shrink: 0;
    letter-spacing: -0.005em;
}

/* ─── Section title (inside long clinical forms) ────────────────────── */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.5rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ds-border-soft);
}
.section-title:first-child { margin-top: 0; }
.section-title h3,
.section-title h4 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--ds-ink) !important;
    margin: 0 !important;
    letter-spacing: -0.018em;
}
.section-title .section-icon {
    width: 1.6rem;
    height: 1.6rem;
    background: var(--ds-surface-soft);
    color: var(--ds-ink-3);
    border-radius: var(--ds-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.section-title .section-icon .ti {
    font-size: 0.95rem !important;
}
.section-title .section-hint {
    color: var(--ds-ink-4);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: auto;
}

/* ─── Heredity row (compact disease + parentesco) ───────────────────── */
.heredity-row {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--ds-border-soft);
}
.heredity-row:last-child { border-bottom: 0; }
.heredity-row .form-check { margin: 0; padding-left: 1.6rem; }
.heredity-row .form-check-label {
    font-size: 1rem;
    color: var(--ds-ink-2);
    font-weight: 500;
}
.heredity-row .ts-control { background: var(--ds-surface-muted) !important; }

/* ─── SOAP sections (Evolution notes structure) ─────────────────────── */
.soap-section {
    border-left: 2px solid var(--ds-border);
    padding-left: 0.85rem;
    margin-bottom: 1.25rem;
}
.soap-section.active { border-left-color: var(--ds-ink); }
.soap-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ds-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}
.soap-section-label .ti {
    color: var(--ds-ink-4);
    font-size: 0.85rem !important;
    margin-right: 0.3rem;
}

/* ─── Clinical form scope tweaks ────────────────────────────────────── */
.clinical-form .form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-ink-3);
}
.clinical-form .form-control,
.clinical-form .form-select {
    background: var(--ds-surface);
}
.clinical-form .form-check-input {
    margin-top: 0.2rem;
}

/* ─── Evolution notes table — clinical record entries ───────────────── */
#evolution-notes-table tbody tr { cursor: pointer; }
#evolution-notes-table thead th { vertical-align: middle; }

/* Date column: stacked date over time */
.evo-date {
    line-height: 1.3;
}
.evo-date-primary {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-ink);
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
    text-transform: capitalize;
}
.evo-date-secondary {
    font-size: 0.85rem;
    color: var(--ds-ink-4);
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    margin-top: 0.1rem;
}

/* Consultation column: diagnostic tags + treatment preview */
.evo-consult-cell {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 540px;
}
.evo-diagnostics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}
.evo-diag-tag {
    display: inline-flex;
    align-items: center;
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    color: var(--ds-ink-2);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.18rem 0.5rem;
    border-radius: var(--ds-radius-sm);
    line-height: 1.3;
    letter-spacing: -0.005em;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evo-diag-more {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--ds-ink-4);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    padding: 0.18rem 0.4rem;
}
.evo-diag-empty {
    color: var(--ds-ink-4);
    font-size: 0.85rem;
    font-style: italic;
}
.evo-treatment {
    color: var(--ds-ink-3);
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Status column: stacked status pills */
.evo-status-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}
.evo-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.18rem 0.5rem;
    border-radius: var(--ds-radius-sm);
    line-height: 1.3;
    letter-spacing: -0.005em;
    white-space: nowrap;
}
.evo-status .ti { font-size: 0.85rem !important; line-height: 1; }
.evo-status-finished {
    background: var(--ds-success-bg);
    color: var(--ds-success);
}
.evo-status-pending {
    background: var(--ds-surface-soft);
    color: var(--ds-ink-3);
    border: 1px solid var(--ds-border);
}
.evo-status-controlled {
    background: var(--ds-warning-bg);
    color: var(--ds-warning);
}

/* Media count: photo icon + tabular-nums count */
.evo-media-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ds-ink-3);
    font-size: 0.85rem;
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    font-weight: 500;
}
.evo-media-count .ti {
    color: var(--ds-ink-4);
    font-size: 0.95rem !important;
}

/* Top-aligned cells in the evolution table for better timeline scanning */
#evolution-notes-table tbody td.align-top {
    vertical-align: top !important;
    padding-top: 0.85rem !important;
}

/* ─── Evolution note display modal — clinical record reader ─────────── */
.evo-modal-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem var(--ds-content-padding-x);
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface);
}
.evo-modal-header .evo-modal-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-active);
    color: var(--ds-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.evo-modal-header .evo-modal-icon .ti { font-size: 1.05rem !important; }
.evo-modal-header .evo-modal-titles { flex: 1 1 auto; min-width: 0; }
.evo-modal-header .evo-modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ds-ink);
    line-height: 1.2;
    letter-spacing: -0.018em;
    margin: 0;
}
.evo-modal-header .evo-modal-subtitle {
    color: var(--ds-ink-4);
    font-size: 0.85rem;
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    margin-top: 0.15rem;
}

.evo-modal-body { padding: var(--ds-content-padding-x); background: var(--ds-bg); }

.evo-block { margin-bottom: 1.5rem; }
.evo-block:last-child { margin-bottom: 0; }
.evo-block-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ds-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.65rem;
}
.evo-block-title .ti {
    color: var(--ds-ink-4);
    font-size: 0.95rem !important;
}
.evo-block-content {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 0.85rem 1rem;
    color: var(--ds-ink-2);
    font-size: 1rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.evo-block-content.is-empty {
    color: var(--ds-ink-5);
    font-style: italic;
}
.evo-block-actions { display: flex; gap: 0.4rem; align-items: center; }
.evo-block-pill {
    margin-left: auto;
    background: var(--ds-surface-soft);
    color: var(--ds-ink-3);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.18rem 0.45rem;
    border-radius: var(--ds-radius-sm);
    letter-spacing: -0.005em;
    text-transform: none;
}

/* Vital grid inside the modal — fixed 4 columns × 2 rows (8 vitals total)
   for visual symmetry. Collapses gracefully on narrower viewports. */
.evo-vital-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (max-width: 768px) {
    .evo-vital-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .evo-vital-grid { grid-template-columns: 1fr; }
}
.evo-vital-cell {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 0.65rem 0.85rem;
}
.evo-vital-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-ink-4);
    margin-bottom: 0.15rem;
}
.evo-vital-value {
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ds-ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.evo-vital-value .evo-vital-unit {
    font-family: var(--ds-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-ink-4);
    margin-left: 0.2rem;
}
.evo-vital-value.is-empty {
    color: var(--ds-ink-5);
    font-weight: 400;
}

/* Diagnostics table inside the modal */
.evo-dx-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}
.evo-dx-table th,
.evo-dx-table td {
    padding: 0.55rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--ds-border-soft);
    font-size: 0.85rem;
    vertical-align: top;
}
.evo-dx-table tr:last-child td { border-bottom: 0; }
.evo-dx-table th {
    background: var(--ds-surface-muted);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-ink-4);
    letter-spacing: -0.005em;
}
.evo-dx-table td.evo-dx-key {
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    color: var(--ds-ink-3);
    font-size: 0.85rem;
    width: 6rem;
    white-space: nowrap;
}
.evo-dx-table td.evo-dx-name { color: var(--ds-ink); font-weight: 500; }
.evo-dx-table td.evo-dx-obs { color: var(--ds-ink-3); }

/* Treatment block — emphasizes controlled flag */
.evo-tx-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: var(--ds-radius-sm);
    line-height: 1.3;
}
.evo-tx-flag.is-controlled {
    background: var(--ds-warning-bg);
    color: var(--ds-warning);
}
.evo-tx-flag.is-uncontrolled {
    background: var(--ds-success-bg);
    color: var(--ds-success);
}
.evo-tx-flag .ti { font-size: 0.85rem !important; }

/* Treatment sub-card — clean label + body, no auto-margin nonsense */
.evo-tx-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.5rem;
}
.evo-tx-card:last-child { margin-bottom: 0; }
.evo-tx-card-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: var(--ds-radius-sm);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.evo-tx-card-label.is-controlled {
    background: var(--ds-warning-bg);
    color: var(--ds-warning);
}
.evo-tx-card-label.is-uncontrolled {
    background: var(--ds-surface-soft);
    color: var(--ds-ink-3);
}
.evo-tx-card-text {
    color: var(--ds-ink-2);
    font-size: 1rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Photo gallery inside modal */
.evo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.35rem;
}
.evo-gallery a {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    background: var(--ds-surface-soft, #f4f5f7);
    cursor: zoom-in;
    transition: transform 0.18s ease;
}
.evo-gallery a:hover { transform: translateY(-1px); }
.evo-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.18s ease;
}
.evo-gallery a:hover img { transform: scale(1.04); }
.evo-gallery-empty {
    color: var(--ds-ink-5);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    padding: 1rem;
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-muted);
}
.evo-gallery-loading {
    display: flex;
    justify-content: center;
    padding: 1.5rem;
}

.evo-modal-footer {
    padding: 0.85rem var(--ds-content-padding-x);
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface);
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

/* -------------------------------------------------------------------------
   14. Mono in product/POS specific contexts — Caja totals, prices, MXN,
       SKU columns, ticket numbers, stock counts.
   ------------------------------------------------------------------------- */
/* Anything that ends in "MXN" / "USD" or starts with "$" anywhere in the app */
.cart-total,
.cart-subtotal,
.cart-tax,
.cart-discount,
[id*='subtotal'],
[id*='total'],
[id*='-amount'],
[id*='-price'],
[id*='-mxn'],
[class*='-amount'],
[class*='-price'],
[class*='-total'],
[data-amount],
[data-price],
[data-total],
[data-currency] {
    font-family: var(--ds-font-mono) !important;
    font-feature-settings: 'tnum', 'zero';
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Inputs masked as currency (imask, etc.) */
input[data-mask*='9'],
input[data-mask*='money'],
input[data-imask],
input.money,
input.currency,
input.tel,
input.phone {
    font-family: var(--ds-font-mono) !important;
    font-variant-numeric: tabular-nums;
}

/* Pagination + datatables info already mono via the rule above; ensure size */
.dataTables_info,
.dataTables_length,
.dataTables_length label,
.dataTables_filter label {
    font-size: 0.85rem;
    color: var(--ds-ink-4);
}
.dataTables_length label,
.dataTables_filter label { font-family: var(--ds-font-sans); }

/* Tom-select option: numeric-looking values (SKU, codes) detected via class */
.ts-dropdown .option .sku,
.ts-dropdown .option .code,
.ts-dropdown .option .id {
    font-family: var(--ds-font-mono);
    font-size: 0.85rem;
    color: var(--ds-ink-4);
    margin-left: 0.4rem;
    font-feature-settings: 'tnum';
}

/* =========================================================================
   15. SEARCH + FILTERS — homologation across all listing views
   --------------------------------------------------------------------------
   The codebase mixes 4 patterns for filter toolbars. This section forces
   them all into one coherent look without editing 30+ EJS files.
   ========================================================================= */

/* ---- Tabler's .input-icon (search input with icon on the right) ---- */
.input-icon {
    position: relative;
    display: flex;
    align-items: stretch;
}
.input-icon .form-control {
    padding-right: 2.25rem !important;
}
.input-icon .input-icon-addon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    pointer-events: none;
    color: var(--ds-ink-5);
    font-size: 0.95rem;
}
.input-icon .input-icon-addon .ti {
    font-size: 1rem;
}

/* ---- "Github" colour aliases used everywhere → grafito grade ---- */
.btn-github {
    background-color: var(--ds-ink) !important;
    border-color: var(--ds-ink) !important;
    color: #fff !important;
}
.btn-github:hover {
    background-color: var(--ds-ink-2) !important;
    border-color: var(--ds-ink-2) !important;
}
.bg-github {
    background-color: var(--ds-ink) !important;
    color: #fff !important;
}
.bg-github-lt {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink-2) !important;
}

/* ---- Filter toggle button: outline neutral, never primary ---- */
.btn[data-bs-target*='filter'],
.btn[data-bs-target*='Filter'],
.btn.btn-filter,
.btn-github.btn-icon[data-bs-target*='filter'],
.btn-github.btn-icon[data-bs-target*='Filter'] {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border-strong) !important;
    color: var(--ds-ink-2) !important;
}
.btn[data-bs-target*='filter']:hover,
.btn[data-bs-target*='Filter']:hover,
.btn.btn-filter:hover,
.btn-github.btn-icon[data-bs-target*='filter']:hover {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
    border-color: var(--ds-border-strong) !important;
}
.btn[data-bs-target*='filter'][aria-expanded='true'],
.btn[data-bs-target*='Filter'][aria-expanded='true'] {
    background-color: var(--ds-surface-active) !important;
    color: var(--ds-ink) !important;
}

/* ---- <small> used as filter-field label (legacy markup `<small for>`) ---- */
small[for],
.collapse small[for],
.collapse .card-body small,
.collapse .row small {
    display: block;
    font-size: 0.85rem !important;
    font-weight: 500;
    color: var(--ds-ink-2);
    margin-bottom: 0.3rem;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

/* ---- Filter collapse panel: clean recessed surface ---- */
.collapse[id*='filter'] > .card,
.collapse[id*='Filter'] > .card,
.collapse[id*='filter'] .card,
.collapse[id*='Filter'] .card {
    background-color: var(--ds-surface-muted) !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: none !important;
}
.collapse[id*='filter'] .card-body,
.collapse[id*='Filter'] .card-body {
    padding: 0.85rem !important;
}
.collapse[id*='filter'] .row,
.collapse[id*='Filter'] .row {
    --bs-gutter-x: 0.65rem;
    --bs-gutter-y: 0.65rem;
}

/* ---- Search-row: input + filter button. Common across views ---- */
.search-bar,
.d-flex.gap-2:has(> .form-control + .btn-icon),
.d-flex.gap-2:has(> .input-icon + .btn-icon) {
    align-items: stretch !important;
}
.search-bar .form-control,
.search-bar .input-icon {
    flex: 1 1 auto;
    min-width: 0;
}
.search-bar .btn-icon,
.search-bar .btn {
    flex-shrink: 0;
}

/* ---- Results-info row (under filters): coherent muted typography ---- */
.results-info,
.results-count,
.dataTables_info {
    color: var(--ds-ink-4);
    font-size: 0.85rem;
    font-family: var(--ds-font-sans);
}
.results-info .count,
.results-count .count,
.dataTables_info .count {
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum';
    color: var(--ds-ink-2);
}

/* =========================================================================
   16. INLINE ROW ACTIONS — ghost icons with hover-revealed semantic color
   --------------------------------------------------------------------------
   Across the codebase 7+ button styles compete in the last cell of tables
   (solid red, solid blue, outline danger, github black, plain icon, dropdown).
   Forcing them all into one consistent ghost-icon shape, with the semantic
   color appearing only on hover. Action lives on the right of the row.
   ========================================================================= */

/* Last column = actions: right-aligned, never wraps */
.table tbody td:last-child:has(.btn),
.table tbody td.actions,
.table tbody td.row-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/* Reset every flavour of action button down to a neutral icon ghost */
.table tbody td .btn,
.table tbody td .btn-icon,
.table tbody td .btn-sm,
.table tbody td a.btn,
.table tbody td button.btn {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: var(--ds-ink-4) !important;
    box-shadow: none !important;
    padding: 0.3rem !important;
    min-width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--ds-radius-sm) !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.table tbody td .btn .ti,
.table tbody td .btn-icon .ti {
    font-size: 0.95rem !important;
    margin: 0 !important;
}
.table tbody td .btn + .btn,
.table tbody td .btn + a.btn,
.table tbody td a.btn + .btn,
.table tbody td a.btn + a.btn {
    margin-left: 0.15rem !important;
}

/* Default hover: subtle gray surface */
.table tbody td .btn:hover,
.table tbody td .btn-icon:hover,
.table tbody td .btn-sm:hover {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
}

/* Semantic hover — red surfaces on destructive / delete-flagged buttons */
.table tbody td .btn-danger:hover,
.table tbody td .btn-outline-danger:hover,
.table tbody td .btn[class*='delete']:hover,
.table tbody td .btn[class*='remove']:hover,
.table tbody td .btn[class*='trash']:hover,
.table tbody td button[id*='delete']:hover,
.table tbody td button[id*='remove']:hover,
.table tbody td a[class*='delete']:hover {
    background-color: var(--ds-danger-bg) !important;
    color: var(--ds-danger) !important;
    border-color: transparent !important;
}

/* Semantic hover — neutral edit (matches the rest of the design, no blue noise) */
.table tbody td .btn-primary:hover,
.table tbody td .btn-outline-primary:hover,
.table tbody td .btn[class*='edit']:hover,
.table tbody td a[class*='edit']:hover,
.table tbody td a[href*='editar']:hover,
.table tbody td a[href*='/edit']:hover {
    background-color: var(--ds-surface-active) !important;
    color: var(--ds-ink) !important;
    border-color: transparent !important;
}

/* Semantic hover — view / detail */
.table tbody td .btn[class*='view']:hover,
.table tbody td .btn[class*='detail']:hover,
.table tbody td a[class*='view']:hover,
.table tbody td .btn[class*='show']:hover {
    background-color: var(--ds-info-bg) !important;
    color: var(--ds-info) !important;
}

/* Semantic hover — download / export */
.table tbody td .btn[class*='download']:hover,
.table tbody td .btn[class*='export']:hover,
.table tbody td a[class*='download']:hover {
    background-color: var(--ds-success-bg) !important;
    color: var(--ds-success) !important;
}

/* Kebab dropdown trigger inside a row */
.table tbody td .btn[data-bs-toggle='dropdown'] .ti-dots,
.table tbody td .btn[data-bs-toggle='dropdown'] .ti-dots-vertical {
    font-size: 1rem !important;
}
.table tbody td .btn[data-bs-toggle='dropdown']:hover {
    background-color: var(--ds-surface-muted) !important;
    color: var(--ds-ink) !important;
}

/* Hide row actions until row is hovered — Notion / Linear style.
   Only on rows that have actions (not all tbody td). */
.table tbody tr td:last-child .btn {
    opacity: 0.55;
    transition: opacity 0.1s ease, background-color 0.12s ease, color 0.12s ease;
}
.table tbody tr:hover td:last-child .btn,
.table tbody tr:focus-within td:last-child .btn {
    opacity: 1;
}

/* =========================================================================
   17. TABLES INSIDE CARDS — coherent edge alignment + tight padding
   ========================================================================= */

/* When a card-body contains nothing but a table/.table-responsive, kill
   the body padding so the table aligns to the card edges. */
.card > .card-body:has(> .table-responsive:only-child),
.card > .card-body:has(> .table:only-child),
.card-body.p-0,
.card-body.px-0 {
    padding: 0 !important;
}

/* Tabler `card-table`: remove its own border, let card border own it */
.table.card-table {
    border: 0 !important;
    margin-bottom: 0 !important;
}

/* Edge alignment for table cells inside cards is now handled by the global
   .table rule above, which uses --ds-content-padding-x. Keeping this block
   only as a safety net for Tabler `.card-table` first-cell override. */
.card-table tr td:first-child,
.card-table tr th:first-child {
    padding-left: var(--ds-content-padding-x) !important;
}
.card-table tr td:last-child,
.card-table tr th:last-child {
    padding-right: var(--ds-content-padding-x) !important;
}

/* Table directly under a card-header: no top border (header has its own) */
.card-header + .table-responsive .table thead th,
.card-header + .table thead th {
    border-top: 0 !important;
}

/* Pagination + length/info under a card table — coherent footer padding */
.card .dataTables_wrapper .row:last-child,
.card .bottom-table {
    padding: 0.65rem var(--ds-content-padding-x) !important;
    border-top: 1px solid var(--ds-border-soft);
    margin-top: 0 !important;
}

/* `.table-bordered` is intentional spreadsheet-style (Historial, etc.).
   Keep the grid but refine the border color to the design system palette
   so it reads sober rather than harsh. */
.table.table-bordered,
.table.table-bordered > :not(caption) > * > *,
.table.table-bordered thead th,
.table.table-bordered tbody td,
.table.table-bordered tfoot td {
    border-color: var(--ds-border-soft) !important;
}
.table.table-bordered thead th {
    border-bottom-color: var(--ds-border) !important;
}

/* DataTables Scroller (Historial uses it) wraps the thead in its own div
   with extra borders. Strip the wrapper chrome but keep the inner table's
   own border-collapse so .table-bordered shows a single grid line per edge. */
.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.dataTables_scrollBody,
.dts .dataTables_scrollHead,
.dts .dataTables_scrollBody,
div.dts div.dataTables_scrollHead,
div.dts div.dataTables_scrollBody,
div.dts > div {
    border: 0 !important;
    background: transparent !important;
}
.dataTables_scrollHead table,
.dataTables_scrollBody table {
    border-collapse: collapse !important;
    margin: 0 !important;
}

/* DataTables clones the <thead> inside .dataTables_scrollBody with
   aria-hidden="true" to keep column widths in sync. With .table-bordered
   the clone's cell borders render → an empty ghost row at the top.
   Collapse it to zero height while keeping its column widths intact. */
.dataTables_scrollBody > table > thead,
.dataTables_scrollBody > table > thead tr,
.dataTables_scrollBody > table > thead th,
.dataTables_scrollBody [aria-hidden='true'],
.dataTables_scrollBody [aria-hidden='true'] th,
.dataTables_scrollBody [aria-hidden='true'] td {
    height: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    overflow: hidden !important;
}
.dataTables_scrollBody > table > thead th > * {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    visibility: hidden;
}

/* ────────────────────────────────────────────────────────────────────
   Project-specific overrides previously inlined into tabler.css.
   Moved here so we can serve the unmodified tabler.min.css safely.
   ──────────────────────────────────────────────────────────────────── */

/* Tabler icon base scale (1049+ usages of `.ti`/`.ti-sm` across views).
   Component contexts override these with their own font-size below. */
.ti      { font-size: 2em; }
.ti-sm   { font-size: 1.3em; }
.ti-xs   { font-size: 1.15em; }

/* DataTables custom dom slot — pagination + length/info row at the bottom
   of every table view (81 usages). The padding rule sits inside the
   `card .bottom-table` block above; this is the standalone layout. */
.bottom-table {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bottom-table .form-select {
    padding: 0.3rem 1.5rem !important;
    border-radius: var(--ds-radius-md) !important;
}
.dataTables_paginate { padding-top: 0 !important; }
.dataTables_paginate .pagination {
    margin-bottom: 0;
    justify-content: end;
}
.dataTables_length { display: flex; align-items: center; }
.dataTables_scrollHead tr { border-bottom: 0 !important; }

/* Flatpickr theme tweaks */
.flatpickr-calendar {
    z-index: 9999 !important;
    background-color: var(--tblr-bg-surface) !important;
    border-radius: 8px;
    border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
    padding: 0px 9px;
}
.flatpickr-calendar.hasTime.noCalendar { width: 150px; }
.flatpickr-weekdaycontainer { padding: 0; }
.flatpickr-day:hover {
    border-radius: 6px;
    background-color: #e1e0e0;
}
.flatpickr-calendar .dayContainer .today {
    background-color: #464646;
    color: white;
    border-radius: 6px;
}
.flatpickr-calendar .selected {
    background-color: #c2ccef;
    border-radius: 6px;
}
.flatpickr-calendar .inRange { background-color: #c2ccef; }
.flatpickr-calendar .inRange:hover,
.flatpickr-calendar .selected :hover,
.flatpickr-calendar .endRange:hover,
.flatpickr-calendar .startRange:hover { background-color: #ccd4f3; }
.flatpickr-disabled { color: #e4e0e0; }
.flatpickr-disabled:hover {
    background-color: transparent !important;
    cursor: default !important;
}