/* ========================================================================= 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; /* Anillo de foco accesible — un solo token para checks/radios/switch. Se re-mapea en dark mode para seguir siendo visible sobre fondo oscuro. */ --ds-focus-ring: 0 0 0 3px rgba(10, 10, 10, 0.10); /* 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; /* Anillo de foco visible sobre fondo oscuro (el gris de light casi no se ve). */ --ds-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.16); /* 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; } .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; } .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; } /* ══ Checkbox + Radio ad-hoc del DS ═══════════════════════════════════════════ Control grafito con glyph blanco (palomita / punto / guion), aplicado de forma GLOBAL vía .form-check-input (300+ usos). El switch conserva su forma y thumb más abajo (+ guard de background-size). Estados: hover, checked, indeterminate, focus-visible y disabled. Dark mode: hereda tokens + --ds-focus-ring. */ .form-check-input { -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: center; border: 1.5px solid var(--ds-border-strong); border-radius: var(--ds-radius-sm); transition: background-color 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease; cursor: pointer; } /* Tamaño con presencia — solo checkbox y radio (el switch se auto-dimensiona). El border-radius va aquí (type-scoped, 0,1,1) para ganarle a la regla de Tabler `.form-check-input[type=checkbox]{border-radius:var(--tblr-border-radius)}`, que deja el checkbox como círculo (8px sobre 16px). Radio se re-fija a 50% abajo. */ .form-check-input[type="checkbox"], .form-check-input[type="radio"] { width: 1.15rem; height: 1.15rem; margin-top: 0.14em; background-color: var(--ds-surface); border-radius: var(--ds-radius-sm) !important; } .form-check-input[type="radio"] { border-radius: 50% !important; } /* Hover (no marcado): borde más presente. */ .form-check-input:hover:not(:disabled):not(:checked):not(:indeterminate) { border-color: var(--ds-ink-3); background-color: var(--ds-surface-muted); } /* Marcado: relleno grafito + glyph blanco. */ .form-check-input[type="checkbox"]:checked { background-color: var(--ds-ink) !important; border-color: var(--ds-ink) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.4 3.4L15 6.4'/%3E%3C/svg%3E"); background-size: 0.72em; } .form-check-input[type="checkbox"]:indeterminate { background-color: var(--ds-ink) !important; border-color: var(--ds-ink) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M5.5 10h9'/%3E%3C/svg%3E"); background-size: 0.72em; } .form-check-input[type="radio"]:checked { background-color: var(--ds-ink) !important; border-color: var(--ds-ink) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3.6' fill='%23fff'/%3E%3C/svg%3E"); background-size: 1em; } /* Foco accesible (token, dark-aware). */ .form-check-input:focus, .form-check-input:focus-visible { box-shadow: var(--ds-focus-ring) !important; border-color: var(--ds-ink); outline: none; } /* Deshabilitado. */ .form-check-input:disabled { opacity: 0.5; cursor: not-allowed; } .form-check-input:disabled ~ .form-check-label { opacity: 0.6; cursor: not-allowed; } /* Dark mode: el relleno marcado es --ds-ink (claro, #f5f5f5); el glyph blanco quedaría invisible. Se cambia a glyph OSCURO para conservar el contraste. */ :root[data-theme="dark"] .form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.4 3.4L15 6.4'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .form-check-input[type="checkbox"]:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%230a0a0a' stroke-width='2.6' stroke-linecap='round' d='M5.5 10h9'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3.6' fill='%230a0a0a'/%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; /* El checkbox ad-hoc fija background-size en :checked; el switch debe conservar su thumb a tamaño completo (contain), no la palomita compacta. */ background-size: contain; } .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; } .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; } /* ─── Tabs de documento deslizables en móvil (<992px) ──────────────────── La .nav-tabs de record trae `flex-wrap: nowrap` pero sin overflow, así que con 6 tabs en móvil se recortaban contra el borde (sin scroll). Aquí el contenedor pasa a scroll horizontal con scrollbar oculto y snap. El JS del layout (main.ejs) hornea auto-scroll de la tab activa a la vista y toggle de las clases .tabs-fade-* para el degradado de affordance en los bordes. */ @media (max-width: 991.98px) { .nav-tabs:not(.new-tabs):not(.card-header-tabs) { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .nav-tabs:not(.new-tabs):not(.card-header-tabs)::-webkit-scrollbar { display: none; } .nav-tabs:not(.new-tabs):not(.card-header-tabs) .nav-item { scroll-snap-align: start; } /* Degradado de borde: se desvanece el lado donde hay más tabs ocultas. El mask se aplica al viewport del scroller (no scrollea con el contenido), por eso el fade queda pegado al borde. Las clases las pone el JS según la posición de scroll — sin fade cuando no hay overflow. */ .nav-tabs.tabs-fade-end { -webkit-mask-image: linear-gradient(to right, #000 84%, transparent); mask-image: linear-gradient(to right, #000 84%, transparent); } .nav-tabs.tabs-fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%); mask-image: linear-gradient(to right, transparent, #000 12%); } .nav-tabs.tabs-fade-start.tabs-fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 84%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 84%, transparent); } } /* 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: var(--ds-surface-muted); --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