/* ============================================================================= tpl-finance · design system CSS puro · sin build step · sin dependencias Dirección: consola de operación y finanzas (Stripe/Linear/Mercury) Marca: TPL · verde #2A9947 como acento medido · neutros con tinte verde propio Uso: importar este archivo una sola vez, antes del resto del CSS de la app. Tema: claro por defecto. Para oscuro: ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ----------------------------------------------------------------------------- 1. TOKENS CRUDOS (paleta · no usar directamente en componentes) -------------------------------------------------------------------------- */ :root { /* Marca — verde TPL */ --green-50: #EAF6EE; --green-100: #D2EBDA; --green-200: #A8D9B8; --green-300: #6FC089; --green-400: #3DA85F; --green-500: #2A9947; /* base de marca */ --green-600: #218039; --green-700: #1A672F; --green-800: #134B23; /* Neutros — gris con leve tinte verde (propio, no Tailwind) */ --gray-50: #F7F8F7; --gray-100: #EFF1EF; --gray-150: #E7EAE7; --gray-200: #E0E3E0; --gray-300: #CDD1CD; --gray-400: #9BA29B; --gray-500: #6E756E; --gray-600: #545A54; --gray-700: #3E433E; --gray-800: #292D29; --gray-900: #181B18; --gray-950: #0E100E; --white: #FFFFFF; /* Semánticos de dato — afinados, no defaults */ --red-fg: #C5392E; --red-bg: #FBEAE8; --red-border: #F3C9C4; --amber-fg: #9A6400; --amber-bg: #FBF1DD; --amber-border: #F0DCAE; --blue-fg: #245FA6; --blue-bg: #E8F0FB; --blue-border: #C9DDF5; --teal-fg: #0F7B73; --teal-bg: #E2F4F1; --teal-border: #BEE6E0; --violet-fg: #6B4FB0; --violet-bg: #EFEAFA; --violet-border: #DBD0F2; } /* ----------------------------------------------------------------------------- 2. TOKENS SEMÁNTICOS · TEMA CLARO (esto sí usan los componentes) -------------------------------------------------------------------------- */ :root { /* Superficies */ --bg-app: var(--gray-50); --bg-surface: var(--white); --bg-surface-2: var(--gray-50); --bg-elevated: var(--white); --bg-inset: var(--gray-100); --bg-hover: var(--gray-100); --bg-active: var(--gray-150); /* Bordes */ --border: var(--gray-200); --border-strong: var(--gray-300); --border-subtle: var(--gray-150); /* Texto */ --text: var(--gray-900); --text-muted: var(--gray-600); --text-subtle: var(--gray-500); --text-faint: var(--gray-400); --text-inverse: var(--white); /* Marca / interacción */ --brand: var(--green-500); --brand-hover: var(--green-600); --brand-active: var(--green-700); --brand-tint: var(--green-50); --brand-tint-2: var(--green-100); --brand-on-tint: var(--green-700); --on-brand: var(--white); /* Foco */ --focus-ring: color-mix(in srgb, var(--green-500) 38%, transparent); /* Estados (texto sobre tint) */ --success-fg: var(--green-700); --success-bg: var(--green-50); --success-border: var(--green-200); --danger-fg: var(--red-fg); --danger-bg: var(--red-bg); --danger-border: var(--red-border); --warning-fg: var(--amber-fg); --warning-bg: var(--amber-bg); --warning-border: var(--amber-border); --info-fg: var(--blue-fg); --info-bg: var(--blue-bg); --info-border: var(--blue-border); --neutral-fg: var(--gray-600); --neutral-bg: var(--gray-100); --neutral-border: var(--gray-200); /* Dinero */ --money-pos: var(--green-700); --money-neg: var(--red-fg); /* Sombras — muy sutiles, capa fina tipo Linear */ --shadow-xs: 0 1px 2px rgba(14,16,14,.05); --shadow-sm: 0 1px 2px rgba(14,16,14,.06), 0 1px 1px rgba(14,16,14,.04); --shadow-md: 0 4px 12px rgba(14,16,14,.08), 0 1px 3px rgba(14,16,14,.06); --shadow-lg: 0 12px 32px rgba(14,16,14,.12), 0 4px 8px rgba(14,16,14,.06); --shadow-focus: 0 0 0 3px var(--focus-ring); /* Tipografía */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-micro: 11px; /* labels en mayúscula, tracked */ --fs-caption: 12px; --fs-sm: 13px; /* workhorse: tablas, controles densos */ --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.55; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --track-tight: -0.011em; --track-tighter: -0.02em; --track-wide: 0.04em; --track-caps: 0.06em; /* Espaciado — base 4px */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Radios — modestos, nada burbujeante */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* Movimiento */ --dur-fast: 120ms; --dur: 180ms; --ease: cubic-bezier(.2, .6, .2, 1); /* Alturas de control */ --h-sm: 28px; --h-md: 34px; --h-lg: 40px; /* z-index */ --z-sticky: 100; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; } /* ----------------------------------------------------------------------------- 3. TOKENS SEMÁNTICOS · TEMA OSCURO (solo se sobrescribe lo que cambia) -------------------------------------------------------------------------- */ [data-theme="dark"] { --bg-app: var(--gray-950); --bg-surface: #14171400; /* placeholder, ver línea siguiente */ --bg-surface: #161916; --bg-surface-2: #121512; --bg-elevated: #1C201C; --bg-inset: #1F231F; --bg-hover: #20251F; --bg-active: #272D26; --border: #2A2F29; --border-strong: #3A413A; --border-subtle: #232723; --text: #ECEFEC; --text-muted: #A6ADA6; --text-subtle: #828982; --text-faint: #5E655E; --text-inverse: var(--gray-950); --brand: var(--green-400); --brand-hover: var(--green-300); --brand-active: var(--green-200); --brand-tint: #16231A; --brand-tint-2: #1C3022; --brand-on-tint: var(--green-300); --on-brand: var(--gray-950); --focus-ring: color-mix(in srgb, var(--green-400) 42%, transparent); --success-fg: var(--green-300); --success-bg: #16231A; --success-border: #234C30; --danger-fg: #F09A91; --danger-bg: #2A1817; --danger-border: #5A2E29; --warning-fg: #E2B66A; --warning-bg: #271F12; --warning-border: #574521; --info-fg: #8FB8EC; --info-bg: #141E2B; --info-border: #2A4366; --neutral-fg: #A6ADA6; --neutral-bg: #20251F; --neutral-border: #2A2F29; --money-pos: var(--green-300); --money-neg: #F09A91; --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 14px 36px rgba(0,0,0,.6); } /* ----------------------------------------------------------------------------- 4. RESET + BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-feature-settings: 'cv11', 'ss01'; /* alternates más geométricos de Inter */ } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); letter-spacing: var(--track-tight); color: var(--text); background: var(--bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); } h1 { font-size: var(--fs-3xl); letter-spacing: var(--track-tighter); } h2 { font-size: var(--fs-2xl); letter-spacing: var(--track-tighter); } h3 { font-size: var(--fs-xl); letter-spacing: var(--track-tight); } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } ::selection { background: var(--brand-tint-2); color: var(--text); } /* Números siempre tabulares por defecto en datos */ .tnum, .num, td.num, .table td, .stat__value, .amount { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv11' 1; } /* Foco visible y consistente */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); } /* ----------------------------------------------------------------------------- 5. TIPOGRAFÍA — utilidades semánticas -------------------------------------------------------------------------- */ .eyebrow { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); } .caption { font-size: var(--fs-caption); color: var(--text-muted); } .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; } /* ----------------------------------------------------------------------------- 6. BOTONES -------------------------------------------------------------------------- */ .btn { --_h: var(--h-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--_h); padding: 0 var(--sp-4); font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--track-tight); border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; user-select: none; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .btn:active { transform: translateY(0.5px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn .icon { width: 15px; height: 15px; flex: none; } .btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); box-shadow: var(--shadow-xs); } .btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .btn--primary:active { background: var(--brand-active); } .btn--secondary { background: var(--bg-surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); } .btn--secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); } .btn--ghost { background: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--bg-hover); color: var(--text); } .btn--danger { background: var(--bg-surface); color: var(--danger-fg); border-color: var(--danger-border); } .btn--danger:hover { background: var(--danger-bg); } .btn--sm { --_h: var(--h-sm); padding: 0 var(--sp-3); font-size: var(--fs-caption); border-radius: var(--r-sm); } .btn--lg { --_h: var(--h-lg); padding: 0 var(--sp-5); font-size: var(--fs-base); } .btn--icon { width: var(--_h); padding: 0; } /* estado cargando */ .btn--loading { color: transparent !important; position: relative; pointer-events: none; } .btn--loading::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--on-brand); animation: spin .6s linear infinite; } .btn--secondary.btn--loading::after, .btn--ghost.btn--loading::after { color: var(--text-muted); } @keyframes spin { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- 7. CAMPOS DE FORMULARIO -------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--sp-2); } .label { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--text-muted); letter-spacing: var(--track-tight); } .input, .select, .textarea { height: var(--h-md); width: 100%; padding: 0 var(--sp-3); font-family: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .textarea { height: auto; padding: var(--sp-2) var(--sp-3); line-height: var(--lh-snug); resize: vertical; } .input::placeholder, .textarea::placeholder { color: var(--text-faint); } .input:hover, .select:hover, .textarea:hover { border-color: var(--gray-400); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); } .input[aria-invalid="true"] { border-color: var(--danger-border); } .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-fg) 22%, transparent); } .field__error { font-size: var(--fs-caption); color: var(--danger-fg); } .field__hint { font-size: var(--fs-caption); color: var(--text-subtle); } /* input con prefijo (ej: U$S) */ .input-group { display: flex; align-items: stretch; } .input-group__prefix { display: inline-flex; align-items: center; padding: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-subtle); font-family: var(--font-mono); background: var(--bg-inset); border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); } .input-group .input { border-radius: 0 var(--r-md) var(--r-md) 0; } /* ----------------------------------------------------------------------------- 8. BADGES / ESTADOS -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 var(--sp-2); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: .01em; border-radius: var(--r-sm); border: 1px solid transparent; white-space: nowrap; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; } .badge--plain::before { display: none; } .badge--neutral { color: var(--neutral-fg); background: var(--neutral-bg); border-color: var(--neutral-border); } .badge--success { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-border); } .badge--danger { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-border); } .badge--warning { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); } .badge--info { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-border); } .badge--teal { color: var(--teal-fg); background: var(--teal-bg); border-color: var(--teal-border); } .badge--violet { color: var(--violet-fg); background: var(--violet-bg); border-color: var(--violet-border); } /* ----------------------------------------------------------------------------- 9. TARJETAS / PANELES -------------------------------------------------------------------------- */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); } .card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); } .card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); } .card__body { padding: var(--sp-5); } /* KPI / stat tile — compacto, no burbujeante */ .stat { padding: var(--sp-4) var(--sp-5); } .stat__label { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); } .stat__value { margin-top: var(--sp-2); font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--track-tighter); line-height: 1; } .stat__delta { margin-top: var(--sp-2); display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: var(--fw-medium); } .stat__delta--up { color: var(--money-pos); } .stat__delta--down { color: var(--money-neg); } /* ----------------------------------------------------------------------------- 10. TABLA — el elemento firma del sistema -------------------------------------------------------------------------- */ .table-wrap { overflow: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-surface); } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); } .table thead th { position: sticky; top: 0; z-index: var(--z-sticky); text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); background: var(--bg-surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); color: var(--text); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background var(--dur-fast) var(--ease); } .table tbody tr:hover td { background: var(--bg-hover); } .table tbody tr[aria-selected="true"] td { background: var(--brand-tint); } .table .num, .table .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table .amount--pos { color: var(--money-pos); font-weight: var(--fw-medium); } .table .amount--neg { color: var(--money-neg); font-weight: var(--fw-medium); } .table .cell-strong { font-weight: var(--fw-medium); } .table .cell-id { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); } /* ----------------------------------------------------------------------------- 11. TABS -------------------------------------------------------------------------- */ .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); } .tab { position: relative; padding: var(--sp-3) var(--sp-3); margin-bottom: -1px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); background: none; border: 0; cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease); } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); } /* ----------------------------------------------------------------------------- 12. MODAL -------------------------------------------------------------------------- */ .overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: color-mix(in srgb, var(--gray-950) 45%, transparent); backdrop-filter: blur(2px); display: grid; place-items: center; padding: var(--sp-4); } .modal { width: 100%; max-width: 460px; z-index: var(--z-modal); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .modal__header { padding: var(--sp-5) var(--sp-5) var(--sp-3); } .modal__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); } .modal__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); } .modal__footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); background: var(--bg-surface-2); border-top: 1px solid var(--border-subtle); } /* ----------------------------------------------------------------------------- 13. TOAST -------------------------------------------------------------------------- */ .toast { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-width: 280px; max-width: 380px; background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--r-md); box-shadow: var(--shadow-md); font-size: var(--fs-sm); } .toast--success { border-left-color: var(--green-500); } .toast--danger { border-left-color: var(--red-fg); } .toast__title { font-weight: var(--fw-semibold); } .toast__msg { color: var(--text-muted); margin-top: 2px; } /* ----------------------------------------------------------------------------- 14. EMPTY STATE -------------------------------------------------------------------------- */ .empty { text-align: center; padding: var(--sp-12) var(--sp-6); } .empty__icon { width: 40px; height: 40px; margin: 0 auto var(--sp-4); display: grid; place-items: center; color: var(--text-subtle); background: var(--bg-inset); border-radius: var(--r-md); } .empty__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); } .empty__text { margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-sm); } .empty__actions { margin-top: var(--sp-5); display: inline-flex; gap: var(--sp-2); } /* ----------------------------------------------------------------------------- 15. MISC -------------------------------------------------------------------------- */ .kbd { display: inline-flex; align-items: center; min-width: 18px; height: 18px; padding: 0 5px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); background: var(--bg-inset); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--r-xs); } .divider { height: 1px; background: var(--border); border: 0; margin: 0; } .avatar { width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: var(--fs-caption); font-weight: var(--fw-semibold); background: var(--brand-tint); color: var(--brand-on-tint); } /* Accesibilidad: respetar reduce-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }