/* =========================================================================
SKIN CARE CLINIC — DESIGN SYSTEM v2 "AURA"
──────────────────────────────────────────────────────────────────────────
Foundations:
• Chrome neutro estilo ElevenLabs: blancos, bordes hairline 1px,
botones primarios grafito, sombras suaves en capas (no pesadas).
• COLOR VIVE EN EL CONTENIDO, no en el chrome: paleta de 8 acentos
(blue/cyan/teal/green/amber/orange/rose/violet) para avatares,
icon-tiles, chips, badges, barras y estados.
• Estados semánticos saturados-pero-refinados (no Bootstrap-neón,
no sage apagado).
• Geist (UI/headings) + Geist Mono (números, totales, IDs, tickets).
• Mucho aire: paddings generosos, radios amplios, line-height alto.
• Reskin de Tabler/Bootstrap vía CSS variables (sin tocar EJS).
========================================================================= */
/* -------------------------------------------------------------------------
1. Tokens
------------------------------------------------------------------------- */
:root {
/* Root = 13px so 1rem IS the body baseline. Single source of truth
for the design system's rem cascade. Body uses 1rem; running-text
surfaces (.table tbody td, .modal-body, .panel-item) also use 1rem.
The interactive control layer (.btn, .form-control, .form-select,
.dropdown-*, .ts-control, .nav-tabs.new-tabs) instead reads from
--ds-control-font (a touch under 1rem) so controls feel tighter
than prose while every input matches button height via --ds-control-h.
Headings and labels scale relative to this 13px unit.
REGLA DURA: la tipografía SIEMPRE en rem (nunca px → no escala con
este baseline) y NUNCA por debajo de 0.72rem (piso de metadata:
overlines, thead, nav-tabs). Texto legible ≥ 0.8rem. */
font-size: 13px;
/* 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 semánticos — entonados a la paleta Apollo (tierra/menta),
manteniendo contraste AA del texto sobre su pastel. */
--ds-success: #3e7b46;
--ds-success-bg: #e8f3e8;
--ds-warning: #a16207;
--ds-warning-bg: #f7efd8;
--ds-danger: #d14034;
--ds-danger-bg: #fbe9e7;
--ds-info: #4353c5;
--ds-info-bg: #e7eafc;
/* ───── ACCENT PALETTE (Apollo) ──────────────────────────────────────
SOLO colores Apollo: negro + lime héroe + los pasteles de su
sistema (periwinkle, lavanda, beige, rosa, oliva). Los NOMBRES de
los tokens se conservan (blue/teal/violet/…) para que todo el CSS
y JS que los referencia siga funcionando — solo cambia el valor. */
--ds-accent-blue: #4353c5; /* periwinkle */
--ds-accent-blue-bg: #e7eafc;
--ds-accent-cyan: #4a6286; /* slate */
--ds-accent-cyan-bg: #e9eff7;
--ds-accent-teal: #6b7a00; /* oliva-lime */
--ds-accent-teal-bg: #f4fbd7;
--ds-accent-green: #3e7b46; /* menta */
--ds-accent-green-bg: #e8f3e8;
--ds-accent-amber: #95652a; /* beige/tan */
--ds-accent-amber-bg: #f4ebdc;
--ds-accent-orange: #b05c13;
--ds-accent-orange-bg: #f8eadd;
--ds-accent-rose: #b13693; /* rosa Apollo */
--ds-accent-rose-bg: #f9e5f5;
--ds-accent-violet: #6552d0; /* lavanda */
--ds-accent-violet-bg: #ebe7fd;
/* Lime héroe Apollo — reservado para EL CTA de la pantalla
(Start/Upgrade en Apollo). Texto siempre oscuro encima. */
--ds-lime: #dfff54;
--ds-lime-hover: #d2f53e;
--ds-lime-ink: #1f2502;
/* Radius — contenidos, auditados contra Handle: cards ~10px, arte
mesh ~12px, controles ~8px. Menos agresivo que la etapa ElevenLabs
(14/20 se sentía inflado junto a la tipografía editorial). */
--ds-radius-sm: 6px;
--ds-radius-md: 8px;
--ds-radius-lg: 10px;
--ds-radius-xl: 12px;
/* Sombras en capas — muy suaves, tinte slate (16,24,40) en vez de
negro puro para que no ensucien los pasteles. */
--ds-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
--ds-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
--ds-shadow-md: 0 6px 24px rgba(16, 24, 40, 0.07), 0 2px 6px rgba(16, 24, 40, 0.04);
--ds-shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.1), 0 4px 12px rgba(16, 24, 40, 0.05);
/* 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;
/* Altura compartida de page-header, rail-brand, panel-header y
mobile-topbar. Una sola fuente de verdad para la línea Y=0. */
--ds-header-h: 3.5rem;
/* Interactive controls — single source of truth for the font size and
the height shared by EVERY clickable/typeable control: buttons,
dropdowns, .form-control, .form-select, .input-group-text and the
Tom-Select wrapper. --ds-control-font is a touch smaller than the
1rem body baseline so the control layer reads tighter than running
text; --ds-control-h is set comfortably above the natural content
height of all of them so min-height dominates and every input ends
up exactly as tall as a button. Change these two numbers to retune
the whole control layer at once. */
--ds-control-font: 0.9rem;
--ds-control-h: 2.4rem;
/* 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.4rem;
--ds-content-padding-y: 1rem;
/* 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;
/* ── Alias de compatibilidad ──────────────────────────────────────────
Algunas vistas usan nombres NO canónicos (`--ds-line`, `--ds-surface-2`,
`--ds-ink-1`, `--ds-accent`…) con fallback hex CLARO hardcodeado, que no
adaptaba a dark. Apuntándolos al token real, adaptan solos (y dejan de
depender del hex). El canon sigue siendo el token real; esto es un puente. */
--ds-line: var(--ds-border);
--ds-surface-2: var(--ds-surface-muted);
--ds-ink-1: var(--ds-ink);
--ds-accent: var(--ds-accent-violet);
--ds-accent-soft: var(--ds-accent-violet-bg);
/* Icono del empty state canónico (inbox de línea). Mask → toma el color
del token y adapta a dark. Una sola fuente para listas/tablas/charts. */
--ds-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h3l3 3h4l3 -3h3'/%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-12a1 1 0 0 1 1 -1z'/%3E%3C/svg%3E");
}
/* =========================================================================
DARK MODE — base (Fase 1). Solo remapea los tokens --ds-*; como TODO el
sistema (chrome incluido) consume var(--ds-*), la mayoría se adapta sola.
Los stragglers con hex hardcodeado se barren por vista en la Fase 2.
Se activa con (toggle en la topbar + localStorage).
========================================================================= */
/* Brand logo — el isotipo de Circadis vive sobre superficies que siguen el
tema (--ds-surface). Por defecto se usa la variante AZUL (_light) para fondos
claros; en modo oscuro se intercambia al trazo BLANCO. Un solo punto de
control: todo ![]()
que apunte al _light.svg se swappea vía `content`. */
:root[data-theme="dark"] img[src*="circadis_min_logo_light.svg"] {
content: url("/public/static/logo/circadis_min_logo.svg");
}
:root[data-theme="dark"] {
color-scheme: dark;
/* Surfaces — negro NEUTRO (grises puros R=G=B, sin tinte azul), jerarquía
por elevación al estilo Vercel/Linear. */
--ds-bg: #0a0a0a; /* fondo de página */
--ds-surface: #161616; /* cards, modales, sidebar, topbar */
--ds-surface-muted: #1f1f1f; /* hovers, table headers */
--ds-surface-soft: #262626; /* chips, badges suaves */
--ds-surface-active: #2f2f2f; /* selected, pressed */
/* Ink — gris neutro, sin blanco puro (#fff cansa sobre negro) */
--ds-ink: #f5f5f5;
--ds-ink-2: #d6d6d6;
--ds-ink-3: #a8a8a8;
--ds-ink-4: #808080;
--ds-ink-5: #5c5c5c;
/* Borders — grises neutros sólidos */
--ds-border: #2a2a2a;
--ds-border-strong: #3a3a3a;
--ds-border-soft: #1e1e1e;
/* Semánticos — texto más brillante, pastel → tinte oscuro del tono */
--ds-success: #6fce8a; --ds-success-bg: #16271b;
--ds-warning: #e0b65f; --ds-warning-bg: #2a2310;
--ds-danger: #ec7a70; --ds-danger-bg: #2c1714;
--ds-info: #8ea2ff; --ds-info-bg: #181d33;
/* Acentos Apollo — mismo nombre, valor adaptado a fondo oscuro */
--ds-accent-blue: #8ea2ff; --ds-accent-blue-bg: #181d33;
--ds-accent-cyan: #93b2d8; --ds-accent-cyan-bg: #161f2a;
--ds-accent-teal: #c3d65a; --ds-accent-teal-bg: #20240e;
--ds-accent-green: #6fce8a; --ds-accent-green-bg: #16271b;
--ds-accent-amber: #d9aa6a; --ds-accent-amber-bg: #271d10;
--ds-accent-orange: #e09a5d; --ds-accent-orange-bg: #2a1c10;
--ds-accent-rose: #e589cb; --ds-accent-rose-bg: #2a1426;
--ds-accent-violet: #b3a5f2; --ds-accent-violet-bg: #1e1a33;
/* Lime héroe se conserva (el CTA debe seguir saltando), texto oscuro encima */
/* Sombras — negro real y más profundas (sobre oscuro el tinte slate no lee) */
--ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
--ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
--ds-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40);
--ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.60), 0 4px 12px rgba(0, 0, 0, 0.50);
/* Tabler/Bootstrap derivados que NO cuelgan de --ds-* directamente */
--tblr-dark: #f5f5f5;
--tblr-light: #1f1f1f;
--tblr-body-color: var(--ds-ink);
--tblr-border-color: var(--ds-border);
--bs-body-color: var(--ds-ink);
--bs-border-color: var(--ds-border);
}
/* -------------------------------------------------------------------------
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.55;
}
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;
}
/* Links sin subrayado SIEMPRE (decisión de diseño — ElevenLabs-style):
el hover comunica con color, no con underline. */
a {
color: var(--ds-ink);
text-decoration: none;
}
a:hover {
color: var(--ds-ink-2);
text-decoration: none;
}
hr, .dropdown-divider {
border-color: var(--ds-border) !important;
opacity: 1;
}
::selection { background: #f0ffb3; color: var(--ds-ink); }
/* Scrollbars finos y neutros — parte del "aire" del sistema */
* { scrollbar-width: thin; scrollbar-color: #d4d4d4 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
background: #d4d4d4;
border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }
*::-webkit-scrollbar-track { background: transparent; }
/* -------------------------------------------------------------------------
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: var(--ds-header-h) !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 — pegado bajo la
topbar fija (misma altura --ds-header-h en desktop y móvil). */
.page-header.position-sticky,
.page-header[style*='sticky'] {
position: sticky !important;
top: var(--ds-header-h) !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: 1rem;
font-weight: 550;
letter-spacing: -0.015em;
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:
Clientes / Editar
.
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 — Geist Mono, hairline weight.
OJO: nunca seleccionar `.card .h2` a secas — los títulos de texto dentro
de cards (ej. el "Bienvenido" del login) se volvían mono. Los números
reales ya quedan cubiertos por los selectores de forma de la sección 14
([id*='total'], .amount, …) y por los fw-* de abajo. */
.h1.font-weight-medium,
.h2.font-weight-medium,
.h1.fw-medium,
.h2.fw-medium,
.h1.fw-bold,
.h2.fw-bold,
[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;
/* Segmented box: separa del contenido. La regla global `.nav-tabs {
margin: 0 !important }` anula los utilities `mb-*` del markup, así que
el aire inferior se fija aquí. */
margin-bottom: 1rem !important;
}
.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-family: var(--ds-font-sans) !important; /* selector de vista: sans, no mono */
font-size: var(--ds-control-font) !important;
font-weight: 500;
letter-spacing: -0.005em;
text-transform: none;
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;
}
/* Offcanvas de Historial de citas (540px): la regla global
`.nav-tabs { margin: 0 !important }` anula el `mx-3` del markup, así que la
barra de tabs quedaba pegada a los bordes del panel y la última tab
("Consentimientos") se recortaba (más aún con scrollbar de layout).
Restauramos el inset horizontal para alinear con el contenido (`.p-3`). */
#orderDataOffCanvas .nav-tabs.new-tabs {
margin-left: 1rem !important;
margin-right: 1rem !important;
}
.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: var(--ds-shadow-xs) !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;
}
/* Homologación del tamaño de TÍTULOS DE CARD. Muchos títulos van como
h3/h4/h5 crudos dentro de un `.card-body` (directos o en su fila-header
flex), así que se veían de distinto tamaño según el tag. Aquí toman todos
el tamaño de `.card-title`. Se excluyen los títulos especiales del DS
(display-title, home-section-title, page-*, stat/kpi). */
.card-body > h1:not([class*='display-']):not([class*='home-']):not([class*='page-']),
.card-body > h2:not([class*='display-']):not([class*='home-']):not([class*='page-']),
.card-body > h3:not([class*='display-']):not([class*='home-']):not([class*='page-']),
.card-body > h4:not([class*='display-']):not([class*='home-']):not([class*='page-']),
.card-body > h5:not([class*='display-']):not([class*='home-']):not([class*='page-']),
.card-body > .d-flex > h1:not([class*='display-']):not([class*='home-']):not([class*='page-']),
.card-body > .d-flex > h2:not([class*='display-']):not([class*='home-']):not([class*='page-']),
.card-body > .d-flex > h3:not([class*='display-']):not([class*='home-']):not([class*='page-']),
.card-body > .d-flex > h4:not([class*='display-']):not([class*='home-']):not([class*='page-']),
.card-body > .d-flex > h5:not([class*='display-']):not([class*='home-']):not([class*='page-']) {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.25;
color: var(--ds-ink);
margin-bottom: 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: var(--ds-control-font);
border-radius: var(--ds-radius-md) !important;
padding: 0.4rem 0.95rem;
min-height: var(--ds-control-h);
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;
/* Centrado real de icono + texto: flex, no vertical-align. El gap
sustituye los espacios/márgenes manuales entre icono y label. */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
}
.btn-sm { padding: 0.2rem 0.6rem; font-size: 0.8rem; min-height: 1.9rem; }
.btn-lg { padding: 0.5rem 1.2rem; font-size: 0.95rem; min-height: 2.7rem; }
/* Square icon buttons stay exactly as tall as their text siblings (shared
--ds-control-h) so toolbars line up; width matches height to keep square. */
.btn-icon { padding: 0.4rem; min-width: var(--ds-control-h); min-height: var(--ds-control-h); }
.btn-icon.btn-sm { padding: 0.25rem; min-width: 1.9rem; min-height: 1.9rem; }
.btn-icon.btn-lg { padding: 0.55rem; min-width: 2.7rem; min-height: 2.7rem; }
.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: var(--ds-bg) !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: var(--ds-bg) !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:
- 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: none !important;
background: var(--ds-surface-muted) !important;
border-radius: var(--ds-radius-md);
}
/* ─── 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: #116232 !important;
border-color: #116232 !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: color-mix(in srgb, var(--ds-success-bg), var(--ds-success) 8%) !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: #92400e !important;
border-color: #92400e !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: color-mix(in srgb, var(--ds-warning-bg), var(--ds-warning) 8%) !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: #b42318 !important;
border-color: #b42318 !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: color-mix(in srgb, var(--ds-danger-bg), var(--ds-danger) 8%) !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: #1d4ed8 !important;
border-color: #1d4ed8 !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: color-mix(in srgb, var(--ds-info-bg), var(--ds-info) 8%) !important;
color: var(--ds-info) !important;
}
/* ─── ICON ALIGNMENT WITHIN BUTTONS ───────────────────────────────────
Tamaño normalizado: el icono apenas mayor que el texto (1.1em), nunca
el 1.3em de .ti-sm — dentro de un botón el icono acompaña, no domina.
El centrado vertical lo hace el flex del .btn. */
.btn .ti,
.btn i,
.btn .ti-sm,
.btn .ti-xs {
font-size: 1.1em !important;
line-height: 1;
flex-shrink: 0;
}
.btn-icon .ti,
.btn-icon i {
font-size: 1.15em !important;
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.75rem !important;
min-height: var(--ds-control-h);
font-size: var(--ds-control-font) !important;
line-height: 1.4 !important;
box-shadow: none !important;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
/* Multi-line fields grow from the shared control height but aren't pinned
to it — let the rows define the box. */
textarea.form-control { min-height: calc(var(--ds-control-h) * 1.6); }
/* 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: 0.8rem !important;
padding: 0.2rem 0.55rem !important;
min-height: 1.9rem;
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.5rem 0.85rem !important;
min-height: 2.7rem;
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;
}
/* ─── Choice cards — radios/checkbox como tarjetas grandes seleccionables ───
Reutilizable en formularios: . El estado seleccionado
usa :has() sobre el input nativo (sin JS). */
.choice-cards { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice-card {
position: relative; flex: 1 1 0; min-width: 9.5rem; margin: 0; cursor: pointer;
display: flex; align-items: center; gap: 0.75rem;
padding: 0.8rem 0.95rem;
border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
background: var(--ds-surface);
transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.choice-card:hover { border-color: var(--ds-border-strong); background: var(--ds-surface-muted); }
.choice-card > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; margin: 0; }
.choice-card-icon {
width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--ds-radius-sm);
display: inline-flex; align-items: center; justify-content: center;
background: var(--ds-surface-soft); color: var(--ds-ink-3);
transition: background-color 0.12s ease, color 0.12s ease;
}
.choice-card-icon .ti { font-size: 1.25rem !important; }
.choice-card-body { display: flex; flex-direction: column; min-width: 0; }
.choice-card-label { font-size: 0.95rem; font-weight: 600; color: var(--ds-ink); line-height: 1.25; }
.choice-card-hint { font-size: 0.8rem; color: var(--ds-ink-4); line-height: 1.3; }
/* El check explícito se sentía tosco — la selección se comunica con borde
grafito + icono invertido. El check queda oculto (markup inerte). */
.choice-card-check { display: none; }
/* Seleccionado — borde grafito limpio (1px, sin doble borde) + icono invertido */
.choice-card.is-selected { border-color: var(--ds-ink); }
.choice-card.is-selected .choice-card-icon { background: var(--ds-ink); color: var(--ds-bg); }
.choice-card:has(> input:checked) { border-color: var(--ds-ink); }
.choice-card:has(> input:checked) .choice-card-icon { background: var(--ds-ink); color: var(--ds-bg); }
/* Foco por teclado (el input nativo está oculto) */
.choice-card:has(> input:focus-visible) { box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07); border-color: var(--ds-ink); }
.choice-card:has(> input:disabled) { opacity: 0.55; cursor: not-allowed; }
/* Uploader de evidencia — dos vías de subida igual de visibles (equipo / celular).
Reutilizable: notas de evolución y modales de evidencia de citas (agenda/servicios).
La tarjeta "equipo" lleva un transparente encima → habilita clic
y arrastrar-soltar nativo. La tarjeta "celular" es un botón que muestra el QR inline. */
.ev-evidence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; }
.ev-drop {
position: relative; display: flex; align-items: center; gap: 0.85rem; margin: 0; width: 100%;
padding: 1rem 1.1rem; text-align: left; cursor: pointer;
border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface);
transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.ev-drop:hover { border-color: var(--ds-ink); background: var(--ds-surface-muted); }
.ev-drop.is-dragover { border-color: var(--ds-ink); border-style: solid; background: var(--ds-surface-muted); box-shadow: inset 0 0 0 2px var(--ds-border-strong); }
.ev-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ev-drop--mobile { border-style: solid; }
.ev-drop--mobile.is-active { border-color: var(--ds-ink); background: var(--ds-surface-muted); }
.ev-drop-ic {
flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: var(--ds-radius-sm);
display: inline-flex; align-items: center; justify-content: center;
background: var(--ds-surface-soft); color: var(--ds-ink-3);
}
.ev-drop--mobile .ev-drop-ic { background: var(--ds-accent-violet-bg); color: var(--ds-accent-violet); }
.ev-drop-ic .ti { font-size: 1.35rem !important; }
.ev-drop-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ev-drop-title { font-size: 0.9rem; font-weight: 600; color: var(--ds-ink); }
.ev-drop-hint { font-size: 0.78rem; line-height: 1.3; color: var(--ds-ink-4); }
.ev-drop-qr { margin-left: auto; flex: 0 0 auto; color: var(--ds-ink-4); font-size: 1.15rem !important; }
.ev-qr-steps { display: inline-block; text-align: left; margin: 0 auto 0.75rem; padding-left: 1.1rem; color: var(--ds-ink-3); font-size: 0.85rem; line-height: 1.5; }
/* QR inline (modales de cita): se revela al activar "Subir desde tu celular" */
.ev-qr-inline { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--ds-border-soft); }
.ev-qr-inline .small { color: var(--ds-ink-4); }
/* 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);
}
/* Modo oscuro: el fondo del checkbox marcado es --ds-ink (casi blanco), sobre el
que la palomita blanca por defecto de Tabler queda invisible — el control se
ve como una caja clara vacía. Se invierte el trazo a oscuro. Solo aplica a
[type=checkbox]: switches (--tblr-form-switch-bg) y radios usan otra imagen. */
:root[data-theme="dark"] .form-check-input:checked[type="checkbox"] {
--tblr-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5 6.5 11 12 5.5'/%3E%3C/svg%3E");
}
/* 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. */
/* Switch estilo Apollo: más alto y con presencia — un toggle es una
decisión, no un checkbox disfrazado. El contenedor es flex para que
el label viva SIEMPRE al lado (el padding/float de Bootstrap rompía
la línea con el switch grande). */
.form-switch {
display: flex;
align-items: center;
gap: 0.5rem;
padding-left: 0 !important;
min-height: 0;
}
.form-switch .form-check-input {
border-radius: 2em !important;
width: 2.7em !important;
height: 1.5em !important;
flex-shrink: 0;
float: none !important;
margin-left: 0 !important;
margin-top: 0 !important;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.form-switch .form-check-label {
white-space: nowrap;
cursor: pointer;
}
.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: var(--ds-control-h) !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.75rem !important;
font-size: var(--ds-control-font) !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: 0.8rem !important;
padding: 0.2rem 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-wrapper.form-select-sm,
.ts-wrapper.form-control-sm,
.input-group-sm .ts-wrapper { min-height: 1.9rem !important; }
.ts-control > input {
min-height: 0 !important;
line-height: 1.4 !important;
font-size: var(--ds-control-font) !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: var(--ds-shadow-md) !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: var(--ds-control-font) !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;
}
/* TomSelect renderiza su dropdown como hijo del .ts-wrapper (no en ), así
que un ancestro con overflow:hidden (típicamente .card / .card-body) CORTA las
opciones que sobresalen. Mientras el dropdown está abierto (.dropdown-active),
dejamos que el contenedor desborde para que se vean completas; al cerrarse
vuelve a recortar. Fix global: aplica a cualquier card con un TomSelect activo. */
.card:has(.ts-wrapper.dropdown-active),
.card-body:has(.ts-wrapper.dropdown-active),
.modal-body:has(.ts-wrapper.dropdown-active) {
overflow: visible !important;
}
/* El dropdown debe flotar por encima de las tarjetas siguientes al desbordar. */
.ts-dropdown { z-index: 60 !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;
}
/* Headers de tabla en mono uppercase (lenguaje Handle): la cabecera es
metadata, no contenido — overline quieto que deja brillar las filas.
Aplica a TODA tabla del sistema. */
.table thead th {
background-color: var(--ds-surface) !important;
color: var(--ds-ink-4) !important;
/* Cabecera = metadata, pero en SANS: el acento lo dan mayúsculas +
letter-spacing, sin el peso "terminal" del mono (el mono se reserva
para números/tnum y overlines). */
font-family: var(--ds-font-sans) !important;
font-weight: 600 !important;
font-size: 0.72rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-bottom: 1px solid var(--ds-border-soft) !important;
border-top: 0 !important;
padding: 0.75rem 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;
}
/* Filas con aire Handle: ~52px de alto, hover con transición */
.table tbody td {
padding: 0.85rem 1rem !important;
border-color: var(--ds-border-soft) !important;
font-size: 1rem;
vertical-align: middle;
color: var(--ds-ink-2);
}
.table tbody tr { transition: background-color 0.1s ease; }
/* ─── Chevron de drill-down (primera celda, patrón Handle) ───────────
Afordancia de "esta fila abre algo": gris fantasma que se asoma al
hover de la fila. | */
.table td.row-chevron,
.table th.row-chevron {
width: 2.2rem !important;
padding-right: 0 !important;
text-align: center;
}
.table td.row-chevron .ti {
font-size: 0.9rem !important;
color: var(--ds-ink-5);
transition: color 0.12s ease, transform 0.12s ease;
}
.table tbody tr:hover td.row-chevron .ti {
color: var(--ds-ink-2);
transform: translateX(2px);
}
/* ─── Count badge (el "1" junto al nombre en Handle) ───────────────── */
.count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--ds-radius-sm);
background: var(--ds-surface-soft);
border: 1px solid var(--ds-border-soft);
color: var(--ds-ink-3);
font-family: var(--ds-font-mono);
font-feature-settings: 'tnum';
font-size: 0.7rem;
font-weight: 600;
line-height: 1;
flex-shrink: 0;
}
/* 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;
}
/* Corrección de doble-indentación: cuando la tabla vive DENTRO de un
`.card-body` que YA tiene padding (no `.p-0`), las celdas de borde y la
barra inferior de DataTables NO deben volver a aplicar el padding de
contenido — si no, la tabla queda ~1 columna más indentada que el título
y los filtros de la misma card. Las tablas edge-to-edge (en `.card >
.table-responsive` o `.card-body.p-0`) no se ven afectadas. */
.card-body:not(.p-0) .table thead th:first-child,
.card-body:not(.p-0) .table tbody td:first-child,
.card-body:not(.p-0) .table tfoot td:first-child {
padding-left: 0 !important;
}
.card-body:not(.p-0) .table thead th:last-child,
.card-body:not(.p-0) .table tbody td:last-child,
.card-body:not(.p-0) .table tfoot td:last-child {
padding-right: 0 !important;
}
.card-body:not(.p-0) .dataTables_wrapper > .row:first-child,
.card-body:not(.p-0) .dataTables_wrapper > .row:last-child,
.card-body:not(.p-0) .bottom-table {
padding-left: 0 !important;
padding-right: 0 !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: var(--ds-bg) !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: var(--ds-shadow-lg) !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: 1rem;
letter-spacing: -0.018em;
margin-bottom: 0;
line-height: 1.25;
}
/* Subtítulo de modal — UNA línea de contexto bajo el título. Recipe slim
compartido por todos los modales (sin breadcrumb overline: el modal ya
se abre desde un contexto conocido). */
.modal-subtitle {
margin: 0.2rem 0 0;
font-size: 0.85rem;
line-height: 1.45;
color: var(--ds-ink-4);
max-width: 64ch;
}
.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; }
/* Dark mode: invert the black close glyph so the X stays visible on dark surfaces */
:root[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* -------------------------------------------------------------------------
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: var(--ds-shadow-md) !important;
padding: 0.35rem !important;
font-size: var(--ds-control-font) !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: var(--ds-control-font);
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.9rem;
padding: 0.24rem 0.5rem;
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: var(--ds-bg) !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,
.badge.bg-azure, .badge.bg-azure-lt {
background-color: var(--ds-info-bg) !important;
color: var(--ds-info) !important;
}
/* Familia completa de tonos Tabler → paleta de acentos del sistema.
Cualquier vista puede usar bg-purple-lt, bg-teal-lt, etc. y obtiene
un chip pastel coherente en vez del color crudo de Tabler. */
.badge.bg-purple, .badge.bg-purple-lt,
.badge.bg-indigo, .badge.bg-indigo-lt,
.badge.bg-violet, .badge.bg-violet-lt {
background-color: var(--ds-accent-violet-bg) !important;
color: var(--ds-accent-violet) !important;
border-color: transparent !important;
}
.badge.bg-pink, .badge.bg-pink-lt {
background-color: var(--ds-accent-rose-bg) !important;
color: var(--ds-accent-rose) !important;
border-color: transparent !important;
}
.badge.bg-cyan, .badge.bg-cyan-lt {
background-color: var(--ds-accent-cyan-bg) !important;
color: var(--ds-accent-cyan) !important;
border-color: transparent !important;
}
.badge.bg-teal, .badge.bg-teal-lt {
background-color: var(--ds-accent-teal-bg) !important;
color: var(--ds-accent-teal) !important;
border-color: transparent !important;
}
.badge.bg-orange, .badge.bg-orange-lt {
background-color: var(--ds-accent-orange-bg) !important;
color: var(--ds-accent-orange) !important;
border-color: transparent !important;
}
.badge.bg-lime, .badge.bg-lime-lt {
background-color: var(--ds-accent-green-bg) !important;
color: var(--ds-accent-green) !important;
border-color: transparent !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; }
/* =========================================================================
Toasts (ds-toast) — motor propio del DS (public/scripts/ds-toast.js) con la
API de toastr. Chrome neutro; el color vive en el icon-tile (tint semántico)
y en el acento lateral por `inset box-shadow` (regla dura #3 — nunca
border-left). Overline mono como etiqueta de estado, mensaje en sans.
========================================================================= */
#ds-toast-container {
position: fixed;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0.85rem;
max-width: 100vw;
pointer-events: none; /* solo los toasts capturan eventos */
}
#ds-toast-container.toast-top-right { top: calc(var(--ds-header-h, 3.5rem) + 0.25rem); right: 0; align-items: flex-end; }
#ds-toast-container.toast-top-left { top: calc(var(--ds-header-h, 3.5rem) + 0.25rem); left: 0; align-items: flex-start; }
#ds-toast-container.toast-bottom-right { bottom: 0; right: 0; align-items: flex-end; }
#ds-toast-container.toast-bottom-left { bottom: 0; left: 0; align-items: flex-start; }
#ds-toast-container.toast-top-center { top: calc(var(--ds-header-h, 3.5rem) + 0.25rem); left: 50%; transform: translateX(-50%); align-items: center; }
#ds-toast-container.toast-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; }
.ds-toast {
pointer-events: auto;
position: relative;
display: flex;
align-items: flex-start;
gap: 0.9rem;
width: 24rem;
max-width: calc(100vw - 1.7rem);
padding: 1.05rem 1.15rem;
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-lg);
box-shadow: var(--ds-shadow-lg);
overflow: hidden;
cursor: default;
opacity: 0;
transform: translateX(14px);
transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-toast--in { opacity: 1; transform: none; }
.ds-toast--out { opacity: 0; transform: translateX(14px); }
/* Contenedores a la izquierda: la animación entra/sale por ese lado. */
#ds-toast-container.toast-top-left .ds-toast,
#ds-toast-container.toast-bottom-left .ds-toast { transform: translateX(-14px); }
#ds-toast-container.toast-top-left .ds-toast--in,
#ds-toast-container.toast-bottom-left .ds-toast--in { transform: none; }
#ds-toast-container.toast-top-left .ds-toast--out,
#ds-toast-container.toast-bottom-left .ds-toast--out { transform: translateX(-14px); }
.ds-toast-content { flex: 1 1 auto; min-width: 0; }
/* Estado = status-chip: ■ + overline mono con color semántico (sin caja ni barra). */
.ds-toast-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.4rem;
font-family: var(--ds-font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ds-toast-label::before {
content: '';
width: 9px;
height: 9px;
background: currentColor;
flex-shrink: 0;
}
.ds-toast--success .ds-toast-label { color: var(--ds-success); }
.ds-toast--warning .ds-toast-label { color: var(--ds-warning); }
.ds-toast--error .ds-toast-label { color: var(--ds-danger); }
.ds-toast--info .ds-toast-label { color: var(--ds-info); }
.ds-toast-message {
margin: 0;
font-family: var(--ds-font-sans);
font-size: 0.95rem;
font-weight: 450;
line-height: 1.45;
color: var(--ds-ink);
overflow-wrap: anywhere;
}
.ds-toast-close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
margin: -0.2rem -0.25rem 0 0;
padding: 0;
border: 0;
background: transparent;
border-radius: var(--ds-radius-sm);
color: var(--ds-ink-4);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.ds-toast-close:hover { background: var(--ds-surface-muted); color: var(--ds-ink-2); }
.ds-toast-close .ti { font-size: 1.05rem !important; }
.ds-toast-progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: transparent;
}
.ds-toast-progress-bar {
display: block;
width: 100%;
height: 100%;
border-radius: 0 2px 2px 0;
opacity: 0.55;
}
.ds-toast--success .ds-toast-progress-bar { background: var(--ds-success); }
.ds-toast--warning .ds-toast-progress-bar { background: var(--ds-warning); }
.ds-toast--error .ds-toast-progress-bar { background: var(--ds-danger); }
.ds-toast--info .ds-toast-progress-bar { background: var(--ds-info); }
@media (max-width: 480px) {
#ds-toast-container { left: 0; right: 0; align-items: stretch; }
#ds-toast-container.toast-top-center,
#ds-toast-container.toast-bottom-center { transform: none; }
.ds-toast { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.ds-toast { transition: opacity 0.18s ease; transform: none; }
.ds-toast--out { transform: none; }
}
/* -------------------------------------------------------------------------
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; }
/* Tabs en mono uppercase (lenguaje Handle) — GLOBAL: toda .nav-tabs de la
app (expedientes, productos, agentes…). Los .new-tabs (segmented
control) y .nav-pills (filtros) conservan sans: son selectores de
vista, no navegación de documento. */
.nav-tabs .nav-link {
border: 0 !important;
border-bottom: 1.5px solid transparent !important;
background: transparent !important;
color: var(--ds-ink-4) !important;
font-family: var(--ds-font-mono) !important;
font-weight: 600;
font-size: 0.8rem !important;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.6rem 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;
}
/* Espacio uniforme entre una nav-tabs de navegación de documento (record) y su
primer bloque de contenido. Reemplaza los `margin-bottom` inline dispares
(1 / 1.2 / 1.4rem) que cada vista traía. Excluye .new-tabs (segmented control)
y .card-header-tabs (van flush dentro del card). */
.nav-tabs:not(.new-tabs):not(.card-header-tabs) + .tab-content,
.nav-tabs:not(.new-tabs):not(.card-header-tabs) + .money-cells,
.nav-tabs:not(.new-tabs):not(.card-header-tabs) + .stat-strip {
margin-top: 1.2rem;
}
/* `.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: var(--ds-shadow-md) !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 ──
Tabler's flatpickr.css positions each piece with hardcoded absolute
offsets (current-month at top:1.15rem, arrows at top:0.75rem) that don't
line up vertically. We override that to a single flex row so the prev/next
arrows and the "Month Year" label are all centered on the same baseline,
regardless of font size or locale. */
.flatpickr-months {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.25rem;
padding: 0.25rem 0.25rem 0.5rem !important;
}
.flatpickr-months .flatpickr-month {
color: var(--ds-ink) !important;
background: transparent !important;
fill: var(--ds-ink) !important;
position: static !important;
flex: 1 1 auto !important;
height: auto !important;
overflow: visible !important;
}
.flatpickr-current-month {
position: static !important;
left: auto !important;
top: auto !important;
width: 100% !important;
justify-content: center !important;
padding: 0 !important;
transform: none !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
flex: 0 0 auto !important;
/* ink-2 (no ink-3): las flechas a ink-3 casi no se ven en dark. */
color: var(--ds-ink-2) !important;
fill: var(--ds-ink-2) !important;
border-radius: var(--ds-radius-sm);
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;
background: var(--ds-surface-muted) !important;
}
/* ── FullCalendar — tema GLOBAL (todos los calendarios) ──────────────────────
Mapea las variables internas de FC a tokens DS para que CUALQUIER instancia
(.fc) adapte al dark mode: agenda, agenda quirúrgica, consultorios, salas de
cirugía, calendarios en ficha de cliente, etc. Sin esto FC usa sus defaults
claros (#ddd/#fff) que no cambian con el tema. (Antes vivía scoped en
Agenda.ejs; movido aquí para que aplique a todos.) */
.fc {
--fc-border-color: var(--ds-border-soft);
--fc-page-bg-color: var(--ds-surface);
--fc-neutral-bg-color: var(--ds-surface-muted);
--fc-neutral-text-color: var(--ds-ink-3);
--fc-today-bg-color: color-mix(in srgb, var(--ds-accent) 7%, transparent);
--fc-now-indicator-color: var(--ds-danger);
--fc-event-bg-color: var(--ds-surface-muted);
--fc-event-border-color: var(--ds-border);
--fc-event-text-color: var(--ds-ink);
--fc-list-event-hover-bg-color: var(--ds-surface-muted);
--fc-highlight-color: var(--ds-surface-active);
--fc-non-business-color: var(--ds-surface-soft);
}
.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: var(--ds-bg) !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: var(--ds-bg) !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;
}
.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; }
/* ── Week selection (agenda mini-calendar, weekSelect plugin) ──
weekSelect tags every day of the chosen week with `.week.selected` and the
week under the cursor with `.inRange`. Each renders as ONE continuous band
(rounded ends, no per-cell gaps), with a clear hierarchy between states:
· selected week → solid dark band
· hover preview week → soft gray band
· hover over selected → dark band lifted one step (intentional feedback) */
/* Selected week: dark continuous band */
.flatpickr-day.week.selected {
background-color: var(--ds-ink) !important;
color: var(--ds-bg) !important;
border-color: transparent !important;
border-radius: 0 !important;
box-shadow: -5px 0 0 var(--ds-ink), 5px 0 0 var(--ds-ink) !important;
}
.flatpickr-day.week.selected:nth-child(7n + 1) {
border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm) !important;
box-shadow: 5px 0 0 var(--ds-ink) !important;
}
.flatpickr-day.week.selected:nth-child(7n) {
border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0 !important;
box-shadow: -5px 0 0 var(--ds-ink) !important;
}
/* Hover preview week (not the selected one): soft gray continuous band */
.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.inRange:nth-child(7n + 1) {
border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm) !important;
box-shadow: 5px 0 0 var(--ds-surface-active) !important;
}
.flatpickr-day.inRange:nth-child(7n) {
border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0 !important;
box-shadow: -5px 0 0 var(--ds-surface-active) !important;
}
/* Hover OVER the already-selected week: keep it dark, lift one step so the
hover reads as deliberate feedback instead of muddying the selected band. */
.flatpickr-day.week.selected.inRange {
background-color: var(--ds-ink-2) !important;
color: #fff !important;
box-shadow: -5px 0 0 var(--ds-ink-2), 5px 0 0 var(--ds-ink-2) !important;
}
.flatpickr-day.week.selected.inRange:nth-child(7n + 1) {
box-shadow: 5px 0 0 var(--ds-ink-2) !important;
}
.flatpickr-day.week.selected.inRange:nth-child(7n) {
box-shadow: -5px 0 0 var(--ds-ink-2) !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