/*!
* Bitto Design System
* Fuente de verdad: design_handoff_bitto/Bitto Foundations.dc.html
* design_handoff_bitto/Bitto Componentes.dc.html
* Prefijo de clases: bt-
* Tema: claro (por defecto) + oscuro ([data-theme="dark"] en )
*/
/* ==========================================================================
1. Tokens — tema claro
========================================================================== */
:root {
/* Color — marca y superficies (Foundations · Color tema claro) */
--bt-primary: #0E5A68;
--bt-primary-hover: #0A454F;
--bt-secondary: #475467;
--bt-bg: #F7F8F9;
--bt-surface: #FFFFFF;
--bt-border: #E3E7E9;
--bt-text: #10171C;
--bt-text-muted: #63727C;
/* Divisores internos (filas de tabla, separadores) — más claros que --bt-border */
--bt-divider: #F0F2F3;
/* Bordes de controles (checkbox/radio/dropzone sin foco) */
--bt-control-border: #C6CFD3;
/* Texto/relleno deshabilitado */
--bt-disabled-bg: #F0F2F3;
--bt-disabled-text: #9AA7B2;
/* Semánticos (Foundations · Color tema claro) */
--bt-success: #12805C;
--bt-warning: #B7791F;
--bt-danger: #C0392B;
--bt-info: #2A6FB0;
--bt-ai: #6E56CF;
/* Tintes 8-10% de cada semántico, tal como aparecen en los mockups */
--bt-primary-tint: rgba(14, 90, 104, 0.10);
--bt-secondary-tint: rgba(71, 84, 103, 0.10);
--bt-muted-tint: rgba(99, 114, 124, 0.10);
--bt-success-tint: rgba(18, 128, 92, 0.10);
--bt-warning-tint: rgba(183, 121, 31, 0.10);
--bt-danger-tint: rgba(192, 57, 43, 0.10);
--bt-info-tint: rgba(42, 111, 176, 0.10);
--bt-ai-tint: rgba(110, 86, 207, 0.10);
--bt-ai-border: rgba(110, 86, 207, 0.35);
--bt-ai-bg: rgba(110, 86, 207, 0.05);
--bt-danger-border: rgba(192, 57, 43, 0.25);
/* Tipografía */
--bt-font-ui: 'Instrument Sans', sans-serif;
--bt-font-mono: 'IBM Plex Mono', monospace;
/* Espaciado — escala base 4px */
--bt-space-4: 4px;
--bt-space-8: 8px;
--bt-space-12: 12px;
--bt-space-16: 16px;
--bt-space-24: 24px;
--bt-space-32: 32px;
--bt-space-48: 48px;
/* Radios */
--bt-radius-sm: 6px; /* controles pequeños */
--bt-radius-md: 8px; /* inputs, botones */
--bt-radius-lg: 12px; /* tarjetas, modal */
--bt-radius-pill: 999px;
/* Elevación (Foundations · Elevación) */
--bt-shadow-sm: 0 1px 2px rgba(16, 23, 28, 0.05); /* tarjetas */
--bt-shadow-md: 0 4px 12px rgba(16, 23, 28, 0.08); /* popover */
--bt-shadow-lg: 0 12px 32px rgba(16, 23, 28, 0.14); /* modal */
--bt-shadow-toast: 0 8px 24px rgba(16, 23, 28, 0.18);
/* Scrim de modal (no especificado por hex exacto en el handoff; tinte
neutro derivado de --bt-text para consistencia con el resto del sistema) */
--bt-scrim: rgba(16, 23, 28, 0.45);
/* Fila de tabla operativa */
--bt-row-height: 44px;
/* Texto sobre relleno sólido de --bt-primary (botón primario, pill/tab
activo, logo). En claro #0E5A68 es lo bastante oscuro para texto blanco
(~7.9:1). En oscuro el primario se aclara a #3D93A3 (ver más abajo) para
que siga siendo legible como TEXTO/ícono sobre el fondo oscuro — pero
eso mismo baja el contraste de un relleno sólido con texto blanco
encima a ~3.55:1, insuficiente para AA en texto pequeño. El mockup dark
(design_handoff_bitto/Bitto App Dark.dc.html: botón "+ Nuevo ticket",
logo "b", pill "Todos · N") resuelve esto con texto OSCURO sobre ese
mismo relleno — Task 14. */
--bt-on-primary: #FFFFFF;
}
/* ==========================================================================
1b. Tokens — tema oscuro (preparado)
========================================================================== */
[data-theme="dark"] {
--bt-primary: #3D93A3;
--bt-primary-hover: #5FAAB8;
--bt-secondary: #9AA7B2;
--bt-bg: #0C1214;
--bt-surface: #131B1E;
--bt-border: #24312F;
--bt-text: #ECF1F2;
--bt-text-muted: #8FA0A8;
/* Ver nota en :root — el mockup dark usa texto oscuro (igual a --bt-bg)
sobre el relleno sólido de --bt-primary para mantener AA. */
--bt-on-primary: #0C1214;
/* Sin valores duales dedicados en el handoff: se reutiliza --bt-border,
el neutro más cercano ya definido para el tema oscuro. */
--bt-divider: #24312F;
--bt-control-border: #24312F;
--bt-disabled-bg: #24312F;
--bt-disabled-text: #8FA0A8;
/* Los semánticos no tienen valores alternos en el handoff; se mantienen
iguales (ya cumplen contraste AA sobre las superficies oscuras). */
--bt-success: #12805C;
--bt-warning: #B7791F;
--bt-danger: #C0392B;
--bt-info: #2A6FB0;
--bt-ai: #6E56CF;
--bt-primary-tint: rgba(61, 147, 163, 0.16);
--bt-secondary-tint: rgba(154, 167, 178, 0.14);
--bt-muted-tint: rgba(143, 160, 168, 0.14);
--bt-success-tint: rgba(18, 128, 92, 0.18);
--bt-warning-tint: rgba(183, 121, 31, 0.18);
--bt-danger-tint: rgba(192, 57, 43, 0.18);
--bt-info-tint: rgba(42, 111, 176, 0.18);
--bt-ai-tint: rgba(110, 86, 207, 0.18);
--bt-ai-border: rgba(110, 86, 207, 0.4);
--bt-ai-bg: rgba(110, 86, 207, 0.1);
--bt-danger-border: rgba(192, 57, 43, 0.35);
--bt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
--bt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
--bt-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
--bt-shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.5);
--bt-scrim: rgba(0, 0, 0, 0.6);
}
/* ==========================================================================
2. Reset mínimo
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bt-bg);
color: var(--bt-text);
font-family: var(--bt-font-ui);
-webkit-font-smoothing: antialiased;
transition: background-color .15s ease, color .15s ease;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--bt-primary); text-decoration: none; }
a:hover { color: var(--bt-primary-hover); text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* ==========================================================================
3. Tipografía base (Foundations · Tipografía)
========================================================================== */
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; } /* Display */
h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } /* H1 */
h3 { font-size: 20px; font-weight: 700; } /* H2 */
h4 { font-size: 16px; font-weight: 600; } /* H3 */
p, body { font-size: 14px; line-height: 1.5; font-weight: 400; }
small { font-size: 13px; }
.bt-caption {
font-size: 12px;
font-weight: 600;
color: var(--bt-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bt-mono {
font-family: var(--bt-font-mono);
font-size: 13px;
font-weight: 500;
}
/* ==========================================================================
4. Botones (Componentes · Botones y acciones)
========================================================================== */
.bt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--bt-font-ui);
font-size: 13px;
font-weight: 600;
line-height: 1;
border: none;
border-radius: var(--bt-radius-md);
padding: 10px 16px;
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
white-space: nowrap;
}
.bt-btn--primary {
background: var(--bt-primary);
color: var(--bt-on-primary);
}
.bt-btn--primary:hover { background: var(--bt-primary-hover); }
.bt-btn--secondary {
background: var(--bt-surface);
color: var(--bt-text);
border: 1px solid var(--bt-border);
}
.bt-btn--secondary:hover { background: var(--bt-bg); }
.bt-btn--ghost {
background: transparent;
color: var(--bt-primary);
padding: 10px 12px;
}
.bt-btn--ghost:hover { background: var(--bt-primary-tint); }
.bt-btn--danger {
background: var(--bt-danger-tint);
color: var(--bt-danger);
border: 1px solid var(--bt-danger-border);
}
.bt-btn--danger:hover { background: rgba(192, 57, 43, 0.14); }
.bt-btn--ai {
background: var(--bt-ai);
color: #FFFFFF;
border-radius: 7px;
padding: 7px 12px;
font-size: 12px;
}
.bt-btn--ai:hover { background: #5C42B8; }
.bt-btn--sm {
font-size: 12px;
border-radius: 7px;
padding: 6px 12px;
}
.bt-btn:disabled,
.bt-btn[disabled] {
background: var(--bt-disabled-bg);
color: var(--bt-disabled-text);
border-color: transparent;
cursor: not-allowed;
}
.bt-btn:disabled:hover,
.bt-btn[disabled]:hover { background: var(--bt-disabled-bg); }
/* ==========================================================================
5. Formularios (Componentes · Formularios)
========================================================================== */
.bt-label {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--bt-text);
margin-bottom: 6px;
}
.bt-label__required { color: var(--bt-danger); }
.bt-input,
.bt-textarea {
width: 100%;
font-family: var(--bt-font-ui);
font-size: 14px;
padding: 9px 12px;
border: 1px solid var(--bt-border);
border-radius: var(--bt-radius-md);
color: var(--bt-text);
background: var(--bt-surface);
transition: border-color .12s ease, outline-color .12s ease;
}
.bt-input::placeholder,
.bt-textarea::placeholder { color: var(--bt-disabled-text); }
.bt-input:focus,
.bt-textarea:focus,
.bt-select:focus {
outline: 2px solid var(--bt-primary-tint);
border-color: var(--bt-primary);
}
.bt-input:focus-visible,
.bt-textarea:focus-visible,
.bt-select:focus-visible { outline-color: var(--bt-primary-tint); }
.bt-textarea {
min-height: 96px;
resize: vertical;
line-height: 1.5;
}
.bt-input.is-invalid,
.bt-textarea.is-invalid,
.bt-select.is-invalid {
border-color: var(--bt-danger);
}
.bt-select {
width: 100%;
appearance: none;
-webkit-appearance: none;
font-family: var(--bt-font-ui);
font-size: 14px;
padding: 9px 34px 9px 12px;
border: 1px solid var(--bt-border);
border-radius: var(--bt-radius-md);
color: var(--bt-text);
background-color: var(--bt-surface);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
[data-theme="dark"] .bt-select {
background-image: url("data:image/svg+xml;utf8,");
}
.bt-field-error {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--bt-danger);
margin-top: 6px;
}
.bt-field-hint {
font-size: 12px;
color: var(--bt-text-muted);
margin-top: 6px;
}
/* Checkbox / radio / switch — soporte adicional para formularios del panel */
.bt-checkbox,
.bt-radio {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--bt-text);
cursor: pointer;
}
.bt-checkbox input,
.bt-radio input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.bt-checkbox__box,
.bt-radio__box {
width: 16px;
height: 16px;
flex-shrink: 0;
border: 1.5px solid var(--bt-control-border);
background: var(--bt-surface);
box-sizing: border-box;
}
.bt-checkbox__box { border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.bt-radio__box { border-radius: var(--bt-radius-pill); }
.bt-checkbox input:checked ~ .bt-checkbox__box {
background: var(--bt-primary);
border-color: var(--bt-primary);
}
.bt-checkbox input:checked ~ .bt-checkbox__box::after {
content: '';
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
}
.bt-radio input:checked ~ .bt-radio__box {
border: 5px solid var(--bt-primary);
}
.bt-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; color: var(--bt-text); }
.bt-switch input { position: absolute; opacity: 0; width: 34px; height: 19px; margin: 0; cursor: pointer; }
.bt-switch__track {
width: 34px;
height: 19px;
border-radius: var(--bt-radius-pill);
background: var(--bt-control-border);
position: relative;
display: inline-block;
flex-shrink: 0;
transition: background-color .12s ease;
}
.bt-switch__track::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 15px; height: 15px;
border-radius: var(--bt-radius-pill);
background: #FFFFFF;
transition: left .12s ease;
}
.bt-switch input:checked ~ .bt-switch__track { background: var(--bt-primary); }
.bt-switch input:checked ~ .bt-switch__track::after { left: 17px; }
.bt-dropzone {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1.5px dashed var(--bt-control-border);
border-radius: var(--bt-radius-md);
padding: 14px;
background: var(--bt-bg);
font-size: 13px;
color: var(--bt-text-muted);
cursor: pointer;
}
.bt-dropzone strong { color: var(--bt-primary); font-weight: 600; }
/* ==========================================================================
6. Badges (Foundations · Estados semánticos + Prioridad)
========================================================================== */
.bt-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
border-radius: var(--bt-radius-pill);
padding: 4px 12px;
white-space: nowrap;
}
.bt-badge::before {
content: '';
width: 7px;
height: 7px;
border-radius: var(--bt-radius-pill);
background: currentColor;
flex-shrink: 0;
}
.bt-badge--no-dot::before { content: none; }
.bt-badge--new { color: var(--bt-info); background: var(--bt-info-tint); }
.bt-badge--progress { color: var(--bt-primary); background: var(--bt-primary-tint); }
.bt-badge--resolved { color: var(--bt-success); background: var(--bt-success-tint); }
.bt-badge--closed { color: var(--bt-text-muted); background: var(--bt-muted-tint); }
.bt-badge--low { color: var(--bt-text-muted); background: var(--bt-muted-tint); }
.bt-badge--medium { color: var(--bt-secondary); background: var(--bt-secondary-tint); }
.bt-badge--high { color: var(--bt-warning); background: var(--bt-warning-tint); }
.bt-badge--success { color: var(--bt-success); background: var(--bt-success-tint); }
.bt-badge--warning { color: var(--bt-warning); background: var(--bt-warning-tint); }
.bt-badge--danger { color: var(--bt-danger); background: var(--bt-danger-tint); }
.bt-badge--info { color: var(--bt-info); background: var(--bt-info-tint); }
.bt-badge--ai { color: var(--bt-ai); background: var(--bt-ai-tint); }
/* ==========================================================================
7. Tarjetas
========================================================================== */
.bt-card {
background: var(--bt-surface);
border: 1px solid var(--bt-border);
border-radius: var(--bt-radius-lg);
padding: var(--bt-space-24);
box-shadow: var(--bt-shadow-sm);
}
.bt-card--sm { padding: var(--bt-space-16); border-radius: var(--bt-radius-md); }
/* Bloque de sugerencia de IA (Foundations · Tratamiento de IA) */
.bt-ai-block {
border: 1px solid var(--bt-ai-border);
background: var(--bt-ai-bg);
border-radius: 10px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.bt-ai-block__label {
font-size: 12px;
font-weight: 700;
color: var(--bt-ai);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ==========================================================================
8. Tabla operativa (Componentes · Operación) — filas de 44px
========================================================================== */
.bt-table {
border: 1px solid var(--bt-border);
border-radius: 10px;
overflow: hidden;
width: 100%;
background: var(--bt-surface);
}
.bt-table__head {
display: grid;
background: var(--bt-bg);
border-bottom: 1px solid var(--bt-border);
padding: 0 16px;
height: 40px;
align-items: center;
font-size: 12px;
font-weight: 600;
color: var(--bt-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bt-table__row {
display: grid;
padding: 0 16px;
height: var(--bt-row-height);
align-items: center;
font-size: 13px;
border-bottom: 1px solid var(--bt-divider);
background: var(--bt-surface);
cursor: pointer;
}
.bt-table__row:last-child { border-bottom: none; }
.bt-table__row:hover { background: var(--bt-bg); }
.bt-table__row--danger { background: var(--bt-danger-tint); }
.bt-table__cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 12px;
}
/* ==========================================================================
9. Modal (con scrim)
========================================================================== */
.bt-modal {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
align-items: center;
justify-content: center;
padding: var(--bt-space-24);
}
.bt-modal.is-open { display: flex; }
.bt-modal__scrim {
position: fixed;
inset: 0;
background: var(--bt-scrim);
}
.bt-modal__dialog {
position: relative;
width: 440px;
max-width: 100%;
max-height: calc(100vh - 48px);
overflow: auto;
background: var(--bt-surface);
border-radius: var(--bt-radius-lg);
box-shadow: var(--bt-shadow-lg);
padding: var(--bt-space-24);
display: flex;
flex-direction: column;
gap: 14px;
}
.bt-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bt-modal__title { font-size: 15px; font-weight: 700; color: var(--bt-text); }
.bt-modal__subtitle { font-size: 12px; color: var(--bt-text-muted); }
.bt-modal__close {
background: none;
border: none;
padding: 0;
font-size: 16px;
line-height: 1;
color: var(--bt-text-muted);
cursor: pointer;
}
.bt-modal__close:hover { color: var(--bt-text); }
/* body: agrupa los campos entre header y footer (primer uso real de
.bt-modal en la app — ver views/settings/payments.php y projects.php). */
.bt-modal__body { display: flex; flex-direction: column; gap: 14px; }
.bt-modal__field { display: flex; flex-direction: column; gap: 6px; }
.bt-modal__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.bt-modal__footer-actions { display: flex; gap: 8px; }
.bt-modal__footer-hint {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--bt-text-muted);
}
/* ==========================================================================
10. Toast
========================================================================== */
.bt-toast-region {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1100;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 360px;
}
.bt-toast {
display: flex;
align-items: center;
gap: 10px;
background: #10171C;
color: #FFFFFF;
border-radius: 10px;
padding: 12px 14px;
box-shadow: var(--bt-shadow-toast);
font-size: 13px;
font-weight: 600;
}
.bt-toast__action {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
margin-left: auto;
cursor: pointer;
}
.bt-toast--success::before { content: ''; width: 16px; height: 16px; border-radius: 999px; background: var(--bt-success); flex-shrink: 0; }
.bt-toast--danger::before { content: ''; width: 16px; height: 16px; border-radius: 999px; background: var(--bt-danger); flex-shrink: 0; }
.bt-toast--info::before { content: ''; width: 16px; height: 16px; border-radius: 999px; background: var(--bt-info); flex-shrink: 0; }
/* ==========================================================================
11. Avatar
========================================================================== */
.bt-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: var(--bt-radius-pill);
background: var(--bt-secondary);
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
}
.bt-avatar--sm { width: 22px; height: 22px; font-size: 10px; }
.bt-avatar--lg { width: 56px; height: 56px; font-size: 19px; }
.bt-avatar--primary { background: var(--bt-primary); }
.bt-avatar--info { background: var(--bt-info); }
.bt-avatar--warning { background: var(--bt-warning); }
.bt-avatar--muted { background: var(--bt-text-muted); }
/* Task 14 — --bt-secondary/--bt-text-muted se aclaran en oscuro a propósito
para servir como TEXTO legible sobre fondos oscuros (Foundations dark:
#9AA7B2/#8FA0A8), pero ese mismo valor usado como RELLENO sólido del
avatar por defecto (topbar del panel, ver views/layouts/panel.php) y de
--bt-avatar--muted ("Sin asignar", ver views/ticket/index.php) deja el
texto blanco encima en ~2.5:1 de contraste — falla AA. El mockup dark
(App Dark.dc.html, avatar "—" de fila sin asignar) usa un gris más oscuro
y fijo para ese relleno neutro; se replica ese valor solo en oscuro. */
[data-theme="dark"] .bt-avatar { background: #5C6B73; }
[data-theme="dark"] .bt-avatar--muted { background: #5C6B73; }
/* ==========================================================================
12. Pill (etiqueta neutra, ej. "Lote 1 · Foundations")
========================================================================== */
.bt-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--bt-text-muted);
background: var(--bt-surface);
border: 1px solid var(--bt-border);
border-radius: var(--bt-radius-pill);
padding: 3px 10px;
}
/* ==========================================================================
13. Banner de vista previa (módulos sin backend — global-constraints)
========================================================================== */
.bt-preview-banner {
display: flex;
align-items: flex-start;
gap: 10px;
border: 1px solid var(--bt-info-tint);
border-color: rgba(42, 111, 176, 0.3);
background: var(--bt-info-tint);
border-radius: 10px;
padding: 12px 14px;
font-size: 13px;
color: var(--bt-info);
}
/* ==========================================================================
14. Dropdown (soporte para Bitto.dropdown por delegación)
========================================================================== */
.bt-dropdown { position: relative; display: inline-block; }
.bt-dropdown__menu {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 200px;
background: var(--bt-surface);
border: 1px solid var(--bt-border);
border-radius: var(--bt-radius-md);
box-shadow: var(--bt-shadow-md);
padding: 6px;
z-index: 200;
}
.bt-dropdown.is-open .bt-dropdown__menu { display: block; }
.bt-dropdown__item {
display: block;
width: 100%;
text-align: left;
font-size: 13px;
color: var(--bt-text);
background: none;
border: none;
border-radius: var(--bt-radius-sm);
padding: 8px 10px;
cursor: pointer;
}
.bt-dropdown__item:hover { background: var(--bt-bg); }
/* ==========================================================================
15. Utilidades de layout — stack (columna con gap) y row
========================================================================== */
.bt-stack-4 { display: flex; flex-direction: column; gap: 4px; }
.bt-stack-8 { display: flex; flex-direction: column; gap: 8px; }
.bt-stack-12 { display: flex; flex-direction: column; gap: 12px; }
.bt-stack-16 { display: flex; flex-direction: column; gap: 16px; }
.bt-stack-24 { display: flex; flex-direction: column; gap: 24px; }
.bt-stack-32 { display: flex; flex-direction: column; gap: 32px; }
.bt-stack-48 { display: flex; flex-direction: column; gap: 48px; }
.bt-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* ==========================================================================
16. Media queries base
========================================================================== */
@media (max-width: 768px) {
.bt-table__head { display: none; }
.bt-table__row {
display: flex;
flex-direction: column;
align-items: flex-start;
height: auto;
padding: 12px 16px;
gap: 4px;
}
.bt-modal__dialog { width: 100%; }
}
@media (max-width: 390px) {
.bt-card { padding: var(--bt-space-16); }
.bt-btn { padding: 10px 14px; }
.bt-modal { padding: var(--bt-space-12); }
}