/* Fonts loaded via in HTML — see header.html, base.html. Design tokens: :root block below. Dark theme: [data-theme="dark"] block. */ /* ═══════════════════════════════════════════════════ Tailwind v3 Preflight Overrides ─────────────────────────────────────────────────── Tailwind v3 preflight is more aggressive than v2 normalize. These overrides restore sane defaults for our design system. Must load AFTER tailwind.output.css (cascade order). ═══════════════════════════════════════════════════ */ /* v3 preflight border-color override moved to src/tailwind-input.css @layer base */ /* v3 resets headings to font-size/weight: inherit. All headings in templates use explicit classes (.page-title, .dashboard-section-title, .refund-section__title, or Tailwind text-*). Only set color inheritance — sizing comes from component classes. */ h5, h6 { font-family: var(--font-heading); color: var(--color-text-primary); } h1 { font-family: var(--font-heading); color: var(--color-text-primary); font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem); font-weight: var(--font-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); } h2 { font-family: var(--font-heading); color: var(--color-text-primary); font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.5rem); font-weight: var(--font-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } h3 { font-family: var(--font-heading); color: var(--color-text-primary); font-size: var(--text-xl); font-weight: var(--font-medium); line-height: var(--leading-snug); } h4 { font-family: var(--font-heading); color: var(--color-text-primary); font-size: var(--text-lg); font-weight: var(--font-medium); line-height: var(--leading-snug); } /* v3 strips list styling — only restore where explicitly needed via class. Most lists in this app are navigation/UI, not content lists. Use .list-disc / .list-decimal in templates for content lists. */ /* v3 sets img to display:block — keep it but ensure proper alignment */ img { vertical-align: middle; /* max-width: 100% from v3 preflight is kept — good for responsive */ /* display: block from v3 preflight is kept — override per-element if needed */ } /* Icons inside buttons/links/flex need to be inline */ button img, a img, .inline-flex img, .flex img:where(:not(.block)) { display: inline-block; } /* v3 strips paragraph margins — spacing handled by Tailwind utilities (mb-*) in templates */ /* ═══════════════════════════════════════════════════ Base Styles ═══════════════════════════════════════════════════ */ body { font-family: var(--font-body); color: var(--color-text-primary); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); /* height: 100% removed — caps body at 100vh, preventing content from growing */ display: flex; flex-direction: column; min-height: 100vh; background-color: var(--color-bg-page); overflow-x: clip; /* clip instead of hidden — prevents horizontal scroll without breaking position: sticky */ } /* Form elements inherit body font */ input, select, textarea, button { font-family: inherit; } a { text-decoration: none; color: var(--color-link); } a:hover { color: var(--color-link-hover); } ::placeholder { color: var(--color-text-placeholder); opacity: 1; } ::selection { background-color: var(--brand-primary); color: var(--color-text-inverse); } /* Layout configuration */ html { height: 100%; scroll-behavior: smooth; overflow-x: hidden; /* Structural containment — prevents any descendant from causing horizontal scroll */ } main { flex: 1 0 auto; } /* ═══════════════════════════════════════════════════ Design Tokens — Zelebrix Source: main.css :root Apps: admin (zelebrix), cargaOnline ═══════════════════════════════════════════════════ */ :root { /* ═══ Layout ═══ */ --container-max: clamp(1280px, 85vw, 2400px); --container-gutter: clamp(16px, 4vw, 32px); --container-radius: var(--radius-xl); --container-shadow: 0 6px 18px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(51, 190, 255, 0.05); /* ═══ Brand ═══ */ --brand-primary: #33BEFF; --brand-primary-dark: #0369a1; /* HSL(201°, 96%, 32%) — hue-coherent with brand-primary */ --brand-primary-hover: #00B3EF; /* HSL(195°, 100%, 47%) */ --brand-primary-active: #0099D6; /* HSL(195°, 100%, 42%) */ --brand-primary-light: #E0F7FF; /* HSL(195°, 100%, 94%) */ --brand-primary-shadow: rgba(51, 190, 255, 0.32); --brand-primary-shadow-strong: rgba(3, 105, 161, 0.35); --brand-focus-ring: rgba(51, 190, 255, 0.45); /* ═══ State Colors ═══ */ --color-success: #16a34a; /* green-600 */ --color-success-hover: #15803d; /* green-700 */ --color-success-bg: #dcfce7; /* green-100 */ --color-error: #dc2626; /* red-600 */ --color-error-hover: #b91c1c; /* red-700 */ --color-error-light: #ef4444; /* red-500 */ --color-error-bg: #fee2e2; /* red-100 */ --color-info: #2563eb; /* blue-600 */ --color-info-hover: #1d4ed8; /* blue-700 */ --color-info-bg: #dbeafe; /* blue-100 */ --color-warn: #d97706; /* amber-600 */ --color-warn-hover: #b45309; /* amber-700 */ --color-warn-bg: #fef3c7; /* amber-100 — pastel */ --color-purple: #9333ea; /* purple-600 */ /* ═══ Gray Palette ═══ */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* ═══ Blue Accent Palette ═══ */ --blue-50: #eff6ff; --blue-300: #93c5fd; --blue-800: #1e40af; /* ═══ Toggle ═══ */ --toggle-track-off: #d1d5db; /* gray-300 */ --toggle-knob-off: #E6F7FF; /* subtle brand tint */ --toggle-focus-ring: rgba(51, 190, 255, 0.35); /* ═══ Typography ═══ */ --text-3xs: 0.5625rem; /* 9px — T438: usar solo en badges ultra-compactos (CO labels legacy) */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ /* ═══ Shadows ═══ */ --shadow-color: 15, 23, 42; /* slate-900 RGB base */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(51, 190, 255, 0.04); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(51, 190, 255, 0.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 4px 12px -2px rgba(51, 190, 255, 0.08); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 8px 20px -4px rgba(51, 190, 255, 0.10); --shadow-brand-sm: 0 6px 12px var(--brand-primary-shadow); --shadow-brand-lg: 0 8px 16px var(--brand-primary-shadow-strong); --shadow-color-accent: 151, 65, 252; /* purple RGB for CTA buttons */ /* ═══ Border Radius ═══ */ --radius-xs: 2px; --radius-sm: 4px; /* 0.25rem */ --radius-md: 8px; /* 0.5rem */ --radius-lg: 12px; /* 0.75rem */ --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* pills, toggles */ /* ═══ Typography Scale — 4 niveles, fluid clamps ═══ display: hero KPI numbers h2: card titles body: default text caption: labels, metadata, tooltips */ --text-display-size: clamp(36px, 5.5vw, 52px); --text-display-leading: 1.05; --text-display-tracking: -0.025em; --text-display-weight: 700; --text-h2-size: clamp(18px, 2vw, 22px); --text-h2-leading: 1.25; --text-h2-tracking: -0.01em; --text-h2-weight: 600; --text-body-size: 16px; --text-body-leading: 1.5; --text-caption-size: 13px; --text-caption-leading: 1.4; --text-caption-tracking: 0.02em; /* ═══ Semantic Aliases — Theme layer ═══ Punto de enganche para tarea 034 (temas claro/oscuro). La 034 reasigna estos bajo [data-theme="dark"] sin tocar templates. */ --color-text-primary: var(--gray-900); --color-text-secondary: var(--gray-600); --color-text-muted: var(--gray-500); --color-text-inverse: #ffffff; /* T174 P174-7 — Token intensificado para texto muted sobre superficies elevadas (slate-700 en dark). En light el muted estandar ya supera AA sobre bg-elevated, asi que aqui mantenemos el alias. */ --color-text-muted-on-elevated: var(--color-text-muted); /* T174 P174-7 — fg intensificado para los chips de variation; sin esto el contraste 1.00 los vuelve invisibles en dark. En light se mantiene el semantic hover, que ya es AA sobre bg con alpha 12%. */ --color-variation-success-fg: var(--color-success-hover); --color-variation-error-fg: var(--color-error-hover); --color-bg-page: var(--gray-50); --color-bg-surface: #ffffff; --color-bg-elevated: var(--gray-50); --color-bg-total-row: var(--gray-100); /* #f3f4f6 — legend table TOTAL row, distinct from --color-bg-page */ --color-bg-muted: var(--gray-200); --color-border-default: var(--gray-200); --color-border-strong: var(--gray-300); --color-primary-disabled: rgba(51, 190, 255, 0.55); /* ═══ shadcn-style aliases (T149 hero v2) — map to canonical tokens ═══ The hero v2 redesign in T149 introduced shadcn-style names that did not exist in the zelebrix token system. The CSS already wrote `var(--name, fallback)` so runtime worked, but check_var_references_resolve flags the missing definitions. Map them here to the canonical equivalents. */ --color-text: var(--color-text-primary); --color-surface: var(--color-bg-surface); --color-surface-subtle: var(--color-bg-page); --color-border-subtle: var(--color-border-default); --color-neutral-50: var(--gray-50); --color-neutral-100: var(--gray-100); --color-primary-50: var(--color-info-bg); --color-primary-100: var(--color-info-bg); --color-primary-700: var(--color-info-hover); /* ═══ Semantic Aliases — Extended (tarea 039) ═══ */ --color-link: var(--brand-primary-dark); --color-link-hover: var(--brand-primary-dark); /* fallback for browsers without color-mix() */ --color-link-hover: color-mix(in srgb, var(--color-link) 80%, black); --color-text-placeholder: var(--gray-400); --color-bg-input: var(--color-bg-surface); --color-overlay: rgba(0, 0, 0, 0.4); --color-bg-disabled: var(--gray-100); --color-text-disabled: var(--gray-400); /* ═══ Extended Color Palette — KPI badge backgrounds ═══ */ --color-yellow-100: #fef9c3; --color-purple-100: #ede9fe; --color-indigo-100: #e0e7ff; --color-teal-100: #ccfbf1; --color-orange-100: #ffedd5; --color-cyan-100: #cffafe; --color-emerald-100: #d1fae5; /* ═══ Slate Palette ═══ */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* ═══ Chart Palette — colorblind-safe, min 25° hue separation ═══ Keyed by transaction type. Used by dashboard-charts.js via _css(). Data-viz colors — NOT for UI elements. All values MUST be hex. */ --chart-sin-asignar: #F4A0A0; /* 0° soft coral — unassigned transactions */ --chart-tarjeta: #7CB9E8; /* 206° blue — anchor */ --chart-efectivo: #F6D89E; /* 40° orange */ --chart-carga-online: #7ECBB4; /* 162° green */ --chart-invitacion: #D4A8EA; /* 280° lavender (was 196° — collision w/ Tarjeta) */ --chart-taptopay: var(--brand-primary); /* brand-primary — TTP es canal financiero principal */ --chart-cashback: #E8D46A; /* 48° saturated yellow (was #F5EDA6 — collision w/ Efectivo) */ --chart-panel-de-control: #9B8EC4; /* 253° indigo */ --chart-carga-masiva: #C4A87E; /* 30° sand (was 166° — collision w/ C.Online) */ --chart-correccion: #E88E8E; /* 0° soft red (was 333° rose — aligned w/ semantic error) */ --chart-tickets-app: #B3DFF0; /* 197° cyan */ --chart-descarga: #F4A582; /* 18° vermillion */ --chart-reembolso: #F0C490; /* 30° soft orange (was 331° rose — aligned w/ semantic refund) */ --chart-envio: #EDE8C3; /* 53° sand */ --chart-saldo-zelebrix: #C0C0C0; /* neutral grey */ --chart-pre-carga: #6BBF6B; /* 120° green (was 140° — collision w/ Recargas) */ --chart-recargas: #8FBF9F; /* 140° green-mint (was missing / duplicated Tarjeta) */ /* Chart: Devoluciones — border = same color at full opacity, bg via withOpacity() in JS */ --chart-devol-periodo: #93C5FD; /* blue-300 */ --chart-devol-panel: #FDBA74; /* orange-300 */ /* Chart: Ticket inventory stacked bar — hex for withOpacity()/applyFinishedOverlay() compat */ --chart-ticket-disponibles: #F0E68C; /* khaki 54° (was #E9F0A8 — better deuteranopia separation) */ --chart-ticket-vendidos: #7FD77F; /* green 120° L:67% (was #A8F0A8 L:80% — higher contrast) */ --chart-ticket-activados: #2FC1FF; /* sky 195° — safe, distinct hue */ /* ═══ Semantic Metric Colors — delegate to state colors for coherence ═══ */ --semantic-revenue: var(--color-success); /* green = income/recharges */ --semantic-consumption: var(--color-info); /* blue = activity/spend */ --semantic-refund: var(--color-warn); /* amber = attention/returns */ --semantic-correction: var(--color-error); /* red = requires review */ /* ═══ Z-index Scale ═══ */ --z-base: 0; --z-raised: 30; /* T441 H1: elements above normal flow but below sticky (e.g. dashboard-filters) */ --z-dropdown: 100; --z-sticky: 200; --z-header: 400; --z-sidebar-overlay: 450; --z-modal-backdrop: 500; --z-modal: 600; --z-popover: 700; --z-tooltip: 800; --z-toast: 900; --z-chatbot: 475; /* ═══ Layout ═══ */ --header-height: 56px; /* Desktop admin: py-2 (16px) + h-10 (40px). Mobile uses drawer top:0 */ /* ═══ Spacing Scale (4px base) ═══ */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ /* ═══ Table column sizing ═══ */ --table-cell-max-id: 22ch; /* Truncado para celdas con UUID/chipId/saldo */ /* ═══ Transitions ═══ */ --transition-fast: 150ms ease; --transition-ui: 160ms ease; /* sidebar, toggle interactions */ --transition-base: 200ms ease; --transition-normal: 200ms ease; /* modal overlay + panel */ --transition-slow: 300ms ease; /* Duration-only tokens — use in `animation` shorthand to avoid double-easing when combining with an explicit timing function. e.g. animation: fadeInUp var(--dur-slow) ease-out forwards; */ --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 300ms; --dur-flash: 1200ms; /* ═══ Icon sizes ═══ */ --icon-xs: 1.125rem; /* 18px */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* ═══ Component sizes ═══ */ --legend-swatch-size: 12px; --legend-color: var(--gray-200); /* JS overrides per-swatch; fallback prevents invisible swatches */ --touch-target-min: 2.75rem; /* 44px — WCAG 2.5.8 minimum */ --toggle-width: 2.25rem; --toggle-height: 1.25rem; /* ═══ Brand Opacity Tints — rgba(brand-primary, opacity) ═══ */ --color-brand-tint-10: rgba(51, 190, 255, 0.10); --color-brand-tint-12: rgba(51, 190, 255, 0.12); --color-brand-tint-25: rgba(51, 190, 255, 0.25); --color-brand-tint-30: rgba(51, 190, 255, 0.30); --color-brand-tint-35: rgba(51, 190, 255, 0.35); --color-brand-tint-60: rgba(51, 190, 255, 0.60); --color-brand-tint-66: rgba(51, 190, 255, 0.66); --gradient-premium: linear-gradient(144deg, #AF40FF, #5B42F3 50%); /* CargaOnline premium header */ --gradient-btn-recarga: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB); --gradient-btn-envio: linear-gradient(120deg, #00FF00, #2f9673); --gradient-btn-tickets: linear-gradient(120deg, #FF0000, #FFFF00); --gradient-btn-recibir: linear-gradient(120deg, #f59e0b, #ea580c); /* ═══ Font Families ═══ */ --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ═══ Font Weight ═══ */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ═══ Line Height ═══ */ --leading-tight: 1.2; /* headings display (h1, h2) */ --leading-snug: 1.3; /* headings small, labels, buttons */ --leading-normal: 1.5; /* body text */ --leading-relaxed: 1.6; /* long-form text, paragraphs */ /* ═══ Letter Spacing ═══ */ --tracking-tighter: -0.02em; /* h1 display */ --tracking-tight: -0.01em; /* h2 */ --tracking-normal: 0; /* body, medium headings */ --tracking-wide: 0.02em; /* buttons */ --tracking-wider: 0.05em; /* uppercase labels */ --tracking-widest: 0.08em; /* overline, micro-labels */ /* ═══ APK Builder (Ionic/Capacitor preview palette) ═══ */ --co-accent-secondary: #b3e5fc; --co-accent-success: #63ba6a; --co-accent-warning: #ffc409; --co-accent-danger: #bd2727; --co-accent-dark: #222428; /* ═══ Sidebar Layout ═══ */ --sidebar-collapsed: 64px; --sidebar-expanded: 230px; --sidebar-item-size: 44px; --sidebar-icon-size: 24px; /* ═══ White Opacity (overlays, bullets, captions) ═══ */ --color-white-22: rgba(255, 255, 255, 0.22); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-80: rgba(255, 255, 255, 0.8); /* ── Additional tokens (task 108) ── */ --icon-xl: 3rem; --touch-target: 2.75rem; --modal-max-sm: 30rem; --modal-max-md: 40rem; --border-width-thin: 1px; } @media (min-width: 1536px) { :root { --container-max: 1400px; /* Wider layout on large screens */ } } /* ═══════════════════════════════════════════════════ Dark Theme — Tarea 034 Reasigna los alias semánticos de :root. No introduce nuevas variables ni cambia selectores. Se activa via data-theme="dark" en . ═══════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Surfaces ── */ --color-bg-page: #0f172a; /* slate-900 */ --color-bg-surface: #1e293b; /* slate-800 */ --color-bg-elevated: #334155; /* slate-700 */ --color-bg-total-row: var(--color-bg-elevated); /* already distinct in dark */ --color-bg-muted: var(--slate-600); /* ── Text ── */ --color-text-primary: #f1f5f9; /* slate-100 */ --color-text-secondary: #cbd5e1; /* slate-300 */ --color-text-muted: #94a3b8; /* slate-400 — ratio ~5.4:1 vs slate-900 */ --color-text-inverse: #0f172a; /* slate-900 — texto sobre fondos claros */ /* T174 P174-7 — slate-400 sobre bg-elevated (slate-700) cae a 4.04:1, justo por debajo de AA. slate-300 sube a 6.97:1. */ --color-text-muted-on-elevated: #cbd5e1; /* slate-300 */ /* T174 P174-7 — fg intensificado para variation chips en dark: - success-fg #86efac (green-300) vs bg green-400 @12% ≈ 5.1:1 ✓ - error-fg #fca5a5 (red-300) vs bg red-400 @12% ≈ 4.9:1 ✓ */ --color-variation-success-fg: #86efac; --color-variation-error-fg: #fca5a5; /* ── Extended tokens (tarea 039) ── */ --color-link: var(--brand-primary); --color-link-hover: var(--brand-primary); /* fallback for browsers without color-mix() */ --color-link-hover: color-mix(in srgb, var(--color-link) 80%, white); --color-text-placeholder: var(--slate-500); --color-bg-input: var(--slate-700); --color-overlay: rgba(0, 0, 0, 0.65); --color-bg-disabled: var(--slate-700); --color-text-disabled: var(--slate-500); /* ── Borders ── */ --color-border-default: #334155; /* slate-700 */ --color-border-strong: #475569; /* slate-600 */ --color-border-subtle: var(--color-border-default); /* shadcn alias */ /* ── Brand adjustments ── */ --brand-primary-light: #0c2d3f; /* HSL(195°, 66%, 15%) — fondo sutil oscuro */ --brand-primary-shadow: rgba(51, 190, 255, 0.20); --brand-primary-shadow-strong: rgba(51, 190, 255, 0.30); --brand-focus-ring: rgba(51, 190, 255, 0.50); --color-brand-tint-12: rgba(51, 190, 255, 0.15); --color-primary-disabled: rgba(51, 190, 255, 0.35); /* ── State colors — more luminous for dark backgrounds ── */ --color-success: #4ade80; /* green-400 */ --color-success-hover: #22c55e; /* green-500 */ --color-success-bg: rgba(74, 222, 128, 0.12); --color-error: #f87171; /* red-400 */ --color-error-hover: #ef4444; /* red-500 */ --color-error-light: #fca5a5; /* red-300 */ --color-error-bg: rgba(248, 113, 113, 0.12); --color-warn: #fbbf24; /* amber-400 */ --color-warn-hover: #f59e0b; /* amber-500 */ --color-warn-bg: rgba(251, 191, 36, 0.12); --color-info: #60a5fa; /* blue-400 */ --color-info-hover: #3b82f6; /* blue-500 */ --color-info-bg: rgba(96, 165, 250, 0.12); --color-purple: #c084fc; /* purple-400 */ /* Badge KPI surface tints (dark) */ --color-yellow-100: rgba(250, 204, 21, 0.12); /* yellow-400 base */ --color-purple-100: rgba(168, 85, 247, 0.14); /* purple-500 base */ --color-indigo-100: rgba(129, 140, 248, 0.14); /* indigo-400 base */ --color-teal-100: rgba(45, 212, 191, 0.14); /* teal-400 base */ --color-orange-100: rgba(251, 146, 60, 0.14); /* orange-400 base */ --color-cyan-100: rgba(34, 211, 238, 0.14); /* cyan-400 base */ --color-emerald-100: rgba(52, 211, 153, 0.14); /* emerald-400 base */ --color-neutral-50: rgba(148, 163, 184, 0.08); /* slate-400 base — dark variant for kpi neutral chips */ --color-neutral-100: rgba(148, 163, 184, 0.15); /* slate-400 base — variation chip neutro sin trend */ /* ── Shadows — MD3: dark surfaces use surface-tint for elevation, shadows are subtle (lower opacity than light mode) ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(51, 190, 255, 0.06); --shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 2px 8px rgba(51, 190, 255, 0.08); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.30), 0 4px 14px -2px rgba(51, 190, 255, 0.12); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.30), 0 8px 24px -4px rgba(51, 190, 255, 0.15); --shadow-brand-sm: 0 6px 12px rgba(51, 190, 255, 0.12); --shadow-brand-lg: 0 8px 16px rgba(51, 190, 255, 0.18); /* ── Container ── */ --container-shadow: 0 6px 18px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(51, 190, 255, 0.08); /* ── Toggle ── */ --toggle-track-off: #475569; /* slate-600 */ --toggle-knob-off: #1e293b; /* slate-800 */ --toggle-focus-ring: rgba(51, 190, 255, 0.40); /* ── Chart dark overrides — vivid palette matching generatePastelColors() style. Formula: keep original hue, set S≈70% L≈60% for vibrant look on slate-900. Neutrals (taptopay, saldo-zelebrix) use S≈18% to stay muted. Adjacent hues separated by lightness tiers (52/60/68%) to avoid collisions. ── */ --chart-sin-asignar: #EA4848; /* hsl(0, 79%, 60%) */ --chart-tarjeta: #5299E0; /* hsl(210, 70%, 60%) */ --chart-efectivo: #EEDD44; /* hsl(54, 83%, 60%) */ --chart-carga-online: #52E0BD; /* hsl(165, 70%, 60%) */ --chart-invitacion: #B152E0; /* hsl(280, 70%, 60%) */ --chart-taptopay: var(--brand-primary); /* brand-primary — TTP es canal financiero principal */ --chart-cashback: #E5E972; /* hsl(62, 73%, 68%) */ --chart-panel-de-control: #7352E0; /* hsl(254, 70%, 60%) */ --chart-carga-masiva: #DAB22F; /* hsl(46, 70%, 52%) */ --chart-correccion: #DA2F51; /* hsl(348, 70%, 52%) */ --chart-tickets-app: #74C0E7; /* hsl(200, 70%, 68%) */ --chart-descarga: #EF7143; /* hsl(16, 84%, 60%) */ --chart-reembolso: #EBBE6F; /* hsl(38, 76%, 68%) */ --chart-envio: #B8DA2F; /* hsl(72, 70%, 52%) */ --chart-saldo-zelebrix: #AB8787; /* hsl(0, 18%, 60%) */ --chart-pre-carga: #69E052; /* hsl(110, 70%, 60%) */ --chart-recargas: #2FDA7F; /* hsl(148, 70%, 52%) */ --chart-devol-periodo: #0F56FA; /* hsl(222, 96%, 52%) */ --chart-devol-panel: #FB7D0E; /* hsl(28, 97%, 52%) */ --chart-ticket-disponibles: #B3E84A; /* hsl(80, 77%, 60%) */ --chart-ticket-vendidos: #2FDA4B; /* hsl(130, 70%, 52%) */ --chart-ticket-activados: #0AD6FF; /* hsl(190, 100%, 52%) */ --chart-ticket-finished-overlay-gray: 180; /* light gray for dark bg overlay */ /* ── Gradient overrides ── */ --gradient-premium: linear-gradient(144deg, #7c3aed, #4338ca 50%); --gradient-btn-recarga: linear-gradient(144deg, #9333ea, #4338ca 50%, #06b6d4); --gradient-btn-envio: linear-gradient(120deg, #22c55e, #166534); --gradient-btn-tickets: linear-gradient(120deg, #ef4444, #eab308); --gradient-btn-recibir: linear-gradient(120deg, #d97706, #c2410c); --shadow-color-accent: 147, 51, 234; /* purple-600 RGB — softer on dark */ /* T438: --co-accent-* dark overrides — valores ajustados para contraste sobre fondos dark. NO aliasar a --color-error/warn/success: paleta APK diverge intencionalmente (ver apk.html:130-133). Luminosidad reducida ~70% vs valores light; ratio AA verificado visualmente contra --color-bg-surface dark. */ --co-accent-secondary: #4fc3f7; /* light: #b3e5fc → más saturado para contraste dark */ --co-accent-success: #4caf69; /* light: #63ba6a → tono similar, AA sobre dark surface */ --co-accent-warning: #ffa726; /* light: #ffc409 → naranja-ámbar, mejor contraste dark */ --co-accent-danger: #e53535; /* light: #bd2727 → rojo más intenso sobre dark bg */ --co-accent-dark: #e8e8ea; /* light: #222428 → invertido para ser visible en dark */ } /* ═══════════════════════════════════════════════════ Dark Theme — Component Overrides Only for components that cannot use semantic tokens (e.g. tooltips with intentionally dark bg in light mode). ═══════════════════════════════════════════════════ */ /* Dark override moved after base definition — .form-control, .form-select */ /* ── Event overdue ── */ :where(html[data-theme="dark"]) .event-overdue { color: var(--color-text-muted); } /* ── Theme toggle icon visibility ── */ [data-theme="light"] .theme-icon-light, :where([data-theme="dark"]) .theme-icon-dark { display: none; } [data-theme="light"] .theme-icon-dark, /* stylelint-disable no-descending-specificity -- cross-component false positive */ :where([data-theme="dark"]) .theme-icon-light { display: block; } /* stylelint-enable no-descending-specificity */ /* Fallback when data-theme not set yet (prevents FOUC of both icons) */ html:not([data-theme]) .theme-icon-light { display: none; } html:not([data-theme]) .theme-icon-dark { display: block; } /* ═══════════════════════════════════════════════════ Dark Theme — Special Components (Fase 4) ═══════════════════════════════════════════════════ */ /* Dark override moved after base definition — .login-image */ /* ── Swiper (CargaOnline banners) ── */ /* Full-bleed banner: spans full width of parent without scrollbar gap */ .co-banner-bleed { width: 100%; margin: 0; padding: 0; } /* Swiper banner size variants + theme vars */ .swiper-banner { --swiper-theme-color: #fff; --swiper-pagination-bullet-inactive-color: var(--color-white-50); --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-size: 8px; } .swiper-banner .swiper-pagination { bottom: 12px; z-index: calc(var(--z-base) + 3); } .swiper-banner--sm { height: 140px; } .swiper-banner--md { height: 220px; } .swiper-banner--lg { height: 320px; } /* Banner images: ensure crisp rendering */ .swiper-banner .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } :where([data-theme="dark"]) .swiper { --swiper-theme-color: var(--color-text-secondary); --swiper-pagination-bullet-inactive-color: var(--color-text-muted); } /* ── Autofill: neutralize browser-imposed yellow/blue bg ── */ :where([data-theme="dark"]) input:-webkit-autofill, :where([data-theme="dark"]) input:autofill, :where([data-theme="dark"]) select:-webkit-autofill, :where([data-theme="dark"]) textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--color-bg-surface) inset; -webkit-text-fill-color: var(--color-text-primary); transition: background-color 5000s ease-in-out 0s; } /* ── SVG icons using currentColor: adapt automatically ── */ /* SVGs with hardcoded fill/stroke (Google logo, brand marks) are untouched */ :where([data-theme="dark"]) .logo-mono { filter: brightness(0) invert(1); } /* Dark override moved after base definition — .modal-content */ /* ── Footer — uses slate palette (intentionally dark in both themes) ── */ /* ═══════════════════════════════════════════════════ Dark Theme — Header & Navigation ═══════════════════════════════════════════════════ */ /* ── Header action buttons (theme toggle, etc.) ── */ .header-action-btn { display: grid; place-items: center; width: var(--touch-target-min); height: var(--touch-target-min); border-radius: var(--radius-full); border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: color var(--transition-ui), background-color var(--transition-ui); } .header-action-btn:hover, .header-action-btn:focus-visible { color: var(--brand-primary-dark); background: var(--color-bg-elevated); } /* ── Header responsive: hide elements on mobile ── */ .header-logo { height: 1.75rem; /* 28px mobile */ } .header-action-btn--desktop-only { display: none; } @media (min-width: 640px) { .header-logo { height: 2.5rem; /* 40px */ } } @media (min-width: 1024px) { .header-action-btn--desktop-only { display: grid; } } /* ── Sidebar mobile burger ── */ .sidebar-burger { display: grid; place-items: center; width: var(--touch-target-min); height: var(--touch-target-min); border: none; background: transparent; color: var(--color-text-primary); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--transition-ui); } .sidebar-burger:hover { background: var(--color-bg-elevated); } /* Dark overrides moved after base definitions — header, .inverted-color */ /* Dark overrides moved after base definitions — KPI, chart tabs */ /* Dark override moved after base definition — .badge */ /* ── General text overrides for Tailwind direct colors in HTML ── html[data-theme] raises specificity (0,1,1,0) above Tailwind (0,1,0,0) so !important is not needed. */ :where(html[data-theme="dark"]) .text-gray-700, :where(html[data-theme="dark"]) .text-gray-800, :where(html[data-theme="dark"]) .text-gray-900 { color: var(--color-text-primary); } :where(html[data-theme="dark"]) .text-gray-500, :where(html[data-theme="dark"]) .text-gray-600 { color: var(--color-text-secondary); } :where(html[data-theme="dark"]) .text-gray-400 { color: var(--color-text-muted); } /* ── Background overrides for Tailwind direct colors in HTML ── */ :where(html[data-theme="dark"]) .bg-white { background-color: var(--color-bg-surface); } :where(html[data-theme="dark"]) .bg-gray-50 { background-color: var(--color-bg-page); } :where(html[data-theme="dark"]) .bg-gray-100 { background-color: var(--color-bg-elevated); } /* ── Border overrides for Tailwind direct colors in HTML ── */ :where(html[data-theme="dark"]) .border-gray-200, :where(html[data-theme="dark"]) .border-gray-300 { border-color: var(--color-border-default); } /* ── Shadow overrides: Tailwind shadow-md/lg on dark surfaces ── */ :where(html[data-theme="dark"]) .shadow-md { box-shadow: var(--shadow-md); } :where(html[data-theme="dark"]) .shadow-lg { box-shadow: var(--shadow-lg); } /* ── Dropdown/select menus ── */ /* stylelint-disable no-descending-specificity -- cross-component false positive */ :where([data-theme="dark"]) select { /* stylelint-enable no-descending-specificity */ background-color: var(--color-bg-surface); color: var(--color-text-primary); border-color: var(--color-border-default); } /* ── Table headers & borders ── */ :where([data-theme="dark"]) table th { color: var(--color-text-primary); border-color: var(--color-border-default); } :where([data-theme="dark"]) table td { color: var(--color-text-secondary); border-color: var(--color-border-default); } :where([data-theme="dark"]) table thead { background: var(--color-bg-elevated); } /* ── Backgrounds: gray-200/300, blue-50 ── */ :where(html[data-theme="dark"]) .bg-gray-200 { background-color: var(--color-bg-elevated); } :where(html[data-theme="dark"]) .bg-gray-300 { background-color: var(--slate-600); } :where(html[data-theme="dark"]) .bg-blue-50 { background-color: var(--color-brand-tint-10); } /* ── Links: Tailwind text-blue-* ── */ html[data-theme="dark"] a.text-blue-600, html[data-theme="dark"] a.text-blue-700, :where(html[data-theme="dark"]) .text-blue-500, :where(html[data-theme="dark"]) .text-blue-600, :where(html[data-theme="dark"]) .text-blue-700 { color: var(--brand-primary); } /* ── Text: gray-300 ── */ :where(html[data-theme="dark"]) .text-gray-300 { color: var(--color-text-muted); } /* ── Semantic color overrides for Tailwind direct classes (tarea 039 Fase 0.4) ── */ /* Text colors — error */ :where(html[data-theme="dark"]) .text-red-400, :where(html[data-theme="dark"]) .text-red-500, :where(html[data-theme="dark"]) .text-red-600, :where(html[data-theme="dark"]) .text-red-700, :where(html[data-theme="dark"]) .text-red-800 { color: var(--color-error); } /* Text colors — success */ :where(html[data-theme="dark"]) .text-green-500, :where(html[data-theme="dark"]) .text-green-600, :where(html[data-theme="dark"]) .text-green-700, :where(html[data-theme="dark"]) .text-green-800 { color: var(--color-success); } /* Text colors — warn */ :where(html[data-theme="dark"]) .text-amber-700, :where(html[data-theme="dark"]) .text-orange-500, :where(html[data-theme="dark"]) .text-orange-600, :where(html[data-theme="dark"]) .text-yellow-500, :where(html[data-theme="dark"]) .text-yellow-600, :where(html[data-theme="dark"]) .text-yellow-700, :where(html[data-theme="dark"]) .text-yellow-800 { color: var(--color-warn); } /* Text colors — info */ :where(html[data-theme="dark"]) .text-blue-800 { color: var(--brand-primary); } :where(html[data-theme="dark"]) .text-purple-600 { color: var(--color-purple); } /* Background colors — light tints that blind in dark */ :where(html[data-theme="dark"]) .bg-red-50 { background-color: rgba(248, 113, 113, 0.12); } :where(html[data-theme="dark"]) .bg-green-50 { background-color: rgba(74, 222, 128, 0.12); } :where(html[data-theme="dark"]) .bg-orange-50 { background-color: rgba(251, 191, 36, 0.12); } :where(html[data-theme="dark"]) .bg-amber-50, :where(html[data-theme="dark"]) .bg-amber-50\/40 { background-color: rgba(251, 191, 36, 0.12); } :where(html[data-theme="dark"]) .bg-yellow-50 { background-color: rgba(251, 191, 36, 0.10); } :where(html[data-theme="dark"]) .bg-yellow-100 { background-color: rgba(251, 191, 36, 0.15); } /* Borders — invisible light borders in dark */ :where(html[data-theme="dark"]) .border-red-200 { border-color: rgba(248, 113, 113, 0.30); } :where(html[data-theme="dark"]) .border-red-300 { border-color: rgba(248, 113, 113, 0.35); } :where(html[data-theme="dark"]) .border-red-400 { border-color: rgba(248, 113, 113, 0.40); } :where(html[data-theme="dark"]) .border-green-200 { border-color: rgba(74, 222, 128, 0.25); } :where(html[data-theme="dark"]) .border-green-300 { border-color: rgba(74, 222, 128, 0.30); } :where(html[data-theme="dark"]) .border-blue-200 { border-color: var(--color-brand-tint-25); } :where(html[data-theme="dark"]) .border-blue-300 { border-color: var(--color-brand-tint-30); } :where(html[data-theme="dark"]) .border-yellow-200 { border-color: rgba(251, 191, 36, 0.25); } :where(html[data-theme="dark"]) .border-amber-200 { border-color: rgba(251, 191, 36, 0.25); } :where(html[data-theme="dark"]) .border-amber-300 { border-color: rgba(251, 191, 36, 0.30); } :where(html[data-theme="dark"]) .border-orange-200 { border-color: rgba(251, 191, 36, 0.25); } :where(html[data-theme="dark"]) .border-orange-400 { border-color: rgba(251, 191, 36, 0.40); } :where(html[data-theme="dark"]) .border-orange-500 { border-color: rgba(251, 191, 36, 0.50); } /* ═══════════════════════════════════════════════════ Dark Theme — Transitions, Print & A11y (Fase 5) ═══════════════════════════════════════════════════ */ /* ── Smooth theme transition — MOVED to after base component definitions (see "Theme Transition Override" section below .form-control/.form-select) ── */ /* ── Print: force light theme ── */ @media print { :root { --color-bg-page: #ffffff; --color-bg-surface: #ffffff; --color-bg-elevated: #ffffff; --color-text-primary: #000000; --color-text-secondary: #333333; --color-text-muted: #666666; --color-border-default: #cccccc; --color-border-strong: #999999; } } /* ── Reduced motion: disable ALL animations and transitions (WCAG 2.3.3) ── */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-ui: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } /* stylelint-disable declaration-no-important -- a11y: must override all animations */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* stylelint-enable declaration-no-important */ } /* ═══════════════════════════════════════════════════ Semantic Utility Classes Mapped to :root aliases for theme support (tarea 034) ═══════════════════════════════════════════════════ */ /* — Surface & Page — */ .bg-page { background-color: var(--color-bg-page); } .hover\:bg-page:hover { background-color: var(--color-bg-page); } .bg-surface { background-color: var(--color-bg-surface); } .bg-elevated { background-color: var(--color-bg-elevated); } .hover\:bg-elevated:hover { background-color: var(--color-bg-elevated); } /* stylelint-disable-next-line declaration-no-important -- Tailwind ! convention */ .hover\:\!bg-elevated:hover { background-color: var(--color-bg-elevated) !important; } /* — Text — */ /* Override Tailwind .text-primary — main.css must load after tailwind.output.css */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-inverse { color: var(--color-text-inverse); } .hover\:text-primary:hover { color: var(--color-text-primary); } /* stylelint-disable-next-line declaration-no-important -- Tailwind ! convention */ .hover\:\!text-inherit:hover { color: inherit !important; } /* — Border — */ .border-default { border-color: var(--color-border-default); } .border-strong { border-color: var(--color-border-strong); } /* — Utility — */ .scroll-list { max-height: 200px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; } /* — Scroll-list checkbox/radio items — */ .scroll-list label { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-secondary); cursor: pointer; user-select: none; } .scroll-list :where(label:hover) { color: var(--color-text-primary); } /* ═══ Color Picker Component ═══ */ .color-picker-popup { position: fixed; z-index: var(--z-popover); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-2); box-shadow: var(--shadow-md); } .color-picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); } .color-picker-action { color: var(--color-text-muted); background: none; border: none; cursor: pointer; padding: var(--space-1); border-radius: var(--radius-xs); transition: color var(--transition-fast), background-color var(--transition-fast); } .color-picker-action:hover { color: var(--color-text-primary); background: var(--color-bg-elevated); } .color-picker-action--danger { color: var(--color-error-light); } .color-picker-action--danger:hover { color: var(--color-error); background: var(--color-error-bg); } /* ═══ Editable Items Table — utility classes for inline JS-generated elements ═══ */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border-radius: var(--radius-sm); border: 2px solid transparent; background: transparent; cursor: pointer; transition: background-color var(--transition-fast); } @media (min-width: 640px) { .icon-btn { min-width: var(--touch-target-min); min-height: var(--touch-target-min); } } .icon-btn:hover { background: var(--color-bg-elevated); } .icon-btn--selected { border-color: var(--brand-primary-dark); background: var(--brand-primary-light); } .color-picker-btn { width: 28px; height: 28px; border-radius: var(--radius-md); border: 2px solid var(--color-border-strong); cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } @media (min-width: 640px) { .color-picker-btn { width: 36px; height: 36px; } } .color-picker-btn:hover { transform: scale(1.1); } .type-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-bg-surface); color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-fast); } .type-toggle-btn:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); } .type-toggle-btn--active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--color-text-inverse); } .type-toggle-btn--active:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: var(--color-text-inverse); } .input-suffix { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); pointer-events: none; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--font-medium); } /* ═══ APK Builder Component ═══ */ .apk-input { width: 100%; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-muted); background: var(--color-bg-surface); } .apk-select { width: 100%; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); padding: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); background: var(--color-bg-surface); } .apk-label { font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-primary); margin-bottom: var(--space-1); } .apk-empty-msg { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; } .apk-currency-suffix { position: absolute; right: var(--space-3); color: var(--color-text-secondary); font-weight: var(--font-semibold); } /* — CargaOnline config layout (apk.html) — The article lives in an xl:col-span-3 grid row that is ~1180px wide. Left column hosts controls + preset table, right column hosts the live preview. Without a cap the shared editable_items_table.html gives the Etiqueta column ~530px in wide viewports, which looks unbalanced against the 88px Importe column and detaches the live preview from the rest of the card. */ .co-config-layout { display: flex; flex-direction: column; } .co-config-preview { width: 100%; } @media (min-width: 1024px) { .co-config-layout { flex-direction: row; align-items: flex-start; gap: var(--space-8); } /* Left column is capped so the preset table stays at a readable width and the preview docks naturally next to it. */ .co-config-layout > *:first-child { flex: 0 1 620px; min-width: 0; } .co-config-preview { width: 340px; flex-shrink: 0; position: sticky; top: calc(var(--header-height) + var(--space-4)); } .co-config-preview #co-preview-wrap { padding: var(--space-3); min-height: 120px; } } /* — CargaOnline preset section desktop polish — */ @media (min-width: 640px) { /* The preset table fits comfortably in the capped left column; the shared .overflow-x-auto wrapper still forces a 6px horizontal scrollbar for rounding. Drop it in ≥sm so desktop renders clean. */ #co-custom-section > .overflow-x-auto { overflow: visible; } /* Presets header row (title + "+ Añadir") shares the table's effective width so the button can't float into the aisle. */ #co-custom-section > .flex.items-start { max-width: 620px; } /* The preset table width is bounded by the left column in lg+, but on sm/md it would still greedy-grow Etiqueta. Cap it so rows stay legible at tablet sizes too. */ #co-custom-section table { max-width: 620px; } /* Etiqueta column explicit upper bound — short preset labels ("50€") don't need 500px of text space. */ #co-custom-section th:nth-last-child(3), #co-custom-section td:nth-last-child(3) { max-width: 240px; } } /* — CargaOnline preset table → stacked cards on mobile (apk.html) — Tailwind table-fixed with 5 width-constrained columns collapses the ETIQUETA column to 0px on narrow viewports and stacks header labels on top of the inputs. In as a card with the inputs arranged in two rows (action row + full-width label) so every control stays reachable without horizontal scrolling. Selectors use :has() to be column-order-agnostic (TIPO may be absent when TICKETS_ENABLED is off). */ @media (max-width: 639.98px) { #co-custom-section .overflow-x-auto { overflow: visible; margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); } #co-custom-section table { display: block; width: 100%; table-layout: auto; } #co-custom-section tbody { display: block; width: 100%; } #co-custom-section thead { display: none; } /* Grid avoids the flex-wrap DOM-order problem (label sits between value and color in the JS-rendered , which would force a wrap before color/actions). Grid areas decouple visual order from DOM order so we can keep the shared component untouched. */ #co-custom-section tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "type importe color actions" "etiqueta etiqueta etiqueta etiqueta"; align-items: center; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-2); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } #co-custom-section tbody td { display: block; padding: 0; min-width: 0; } #co-custom-section tbody td:has([data-action="set-type"]) { grid-area: type; } #co-custom-section tbody td:has([data-field="value"]), #co-custom-section tbody td:has([data-field="event_id"]) { grid-area: importe; min-width: 0; } #co-custom-section tbody td:has([data-action="color"]) { grid-area: color; } #co-custom-section tbody td:has([data-action="del"]) { grid-area: actions; display: flex; gap: 1px; } #co-custom-section tbody td:has([data-field="label"]) { grid-area: etiqueta; } /* Force inputs/selects to shrink with their grid cell instead of pushing out the 1fr column to their min-content. */ #co-custom-section tbody td > div, #co-custom-section tbody td input, #co-custom-section tbody td select { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; } /* Input padding in the preset table: inputs use px-3 (12px) + a 28px padding-right to accommodate the € suffix. In the narrow importe cell (≈90px) that leaves too little space for the value, so we tighten padding on mobile only. */ #co-custom-section tbody td:has([data-field="value"]) input { padding-left: var(--space-2); padding-right: 18px; } #co-custom-section tbody td:has([data-field="value"]) .input-suffix { right: var(--space-1); } /* Tighter type toggles + action buttons so everything fits the single top row in a mobile card. !important overrides inline styles declared on the buttons by the shared component (editable_items_table.html) — the shared component can't know about the mobile compression we do here. */ #co-custom-section .type-toggle-btn { width: 26px; height: 26px; min-width: 0; min-height: 0; padding: 2px; } #co-custom-section .color-picker-action.color-picker-action { padding: 3px 2px; } #co-custom-section .color-picker-btn { width: 28px; height: 28px; } #co-custom-section tbody tr.border-b { border-bottom-width: 1px; } } /* — CargaOnline preset preview cards (JS-generated in apk.html) — */ .co-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, auto)); gap: var(--space-2); } .co-preview-card { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 2px solid var(--color-border-default); padding: var(--space-3); min-height: 80px; background: var(--color-bg-surface); cursor: pointer; text-align: center; } .co-preview-value { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text-primary); } .co-preview-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* — Preset card quantity badge + clear button (CargaOnline) — */ .card-badge { position: absolute; bottom: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); background: var(--brand-primary-dark); color: var(--color-text-inverse); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-bold); min-width: var(--icon-md); height: var(--icon-md); line-height: var(--icon-md); text-align: center; padding: 0 var(--space-1); pointer-events: none; z-index: var(--z-dropdown); } /* Decrement (-1) button on preset & ticket cards. Top-right red affordance. Replaces the legacy .card-clear (×); bulk reset still available via the global "Vaciar" cart button. */ .card-minus { position: absolute; top: calc(-1 * var(--space-2-5)); right: calc(-1 * var(--space-2-5)); width: var(--icon-lg); height: var(--icon-lg); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-full); background: var(--color-error); color: var(--color-text-inverse); font-weight: var(--font-bold); font-size: var(--text-sm); line-height: var(--icon-lg); text-align: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-xs); z-index: var(--z-dropdown); transition: background var(--transition-fast); } .card-minus:hover, .card-minus:focus-visible { background: var(--color-error-hover); } /* WCAG 2.5.5 — touch area 44x44 without changing visual size */ .card-minus::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--touch-target-min); height: var(--touch-target-min); border-radius: var(--radius-full); } /* — Global focus ring (WCAG 2.4.11 — replaces per-component repetitions) — */ :focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* Opt-in enhanced focus ring — adds glow halo on top of the global :focus-visible outline */ .focus-ring:focus-visible { box-shadow: 0 0 0 4px var(--brand-focus-ring); } /* — Status: Success (replaces broken emerald-*) — */ .bg-status-success { background-color: var(--color-success); } .bg-status-success-light { background-color: var(--color-success-bg); } .text-status-success { color: var(--color-success); } /* -- Status: Warning (replaces broken yellow/amber) -- */ .bg-status-warn { background-color: var(--color-warn); } .bg-status-warn-light { background-color: var(--color-warn-bg); } .text-status-warn { color: var(--color-warn); } .text-status-warn-dark { color: var(--color-warn-hover); } .border-status-warn { border-color: var(--color-warn); } .border-status-warn-light { border-color: var(--color-warn-bg); } /* — Status: Error — */ .bg-status-error { background-color: var(--color-error); } .bg-status-error-light { background-color: var(--color-error-bg); } .text-status-error { color: var(--color-error); } /* — Brand (replaces broken sky-*) — */ .bg-brand { background-color: var(--brand-primary); } .text-brand { color: var(--brand-primary); } .border-brand { border-color: var(--brand-primary); } .hover\:bg-brand-dark:hover { background-color: var(--brand-primary-dark); } /* — Info (replaces broken indigo-*) — */ .bg-info { background-color: var(--color-info); } .bg-info-light { background-color: var(--color-info-bg); } .text-info { color: var(--color-info); } .hover\:text-info:hover { color: var(--color-info-hover); } .border-info { border-color: var(--color-info); } .hover\:border-info:hover { border-color: var(--color-info); } .text-success { color: var(--color-success); } .text-error { color: var(--color-error); } .text-warn { color: var(--color-warn); } /* — Balance display gradients (tickets.html) — */ .balance-positive { background: var(--color-success-bg); border-color: var(--color-success); border-left-width: 3px; } .balance-negative { background: var(--color-error-bg); border-color: var(--color-error); border-left-width: 3px; } .balance-neutral { background: var(--color-info-bg); border-color: var(--color-info); border-left-width: 3px; } /* ═══════════════════════════════════════════════════ Alert System ═══════════════════════════════════════════════════ */ .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid; font-size: var(--text-sm); line-height: var(--leading-normal); } .alert-success { background-color: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success-hover); } .alert-error { background-color: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error-hover); } .alert-info { background-color: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info-hover); } :where([data-theme="dark"]) .alert-success { color: var(--color-success); } :where([data-theme="dark"]) .alert-error { color: var(--color-error); } :where([data-theme="dark"]) .alert-info { color: var(--color-info); } /* ═══════════════════════════════════════════════════ Badge System ═══════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); line-height: 1; white-space: nowrap; } .badge-success { background-color: var(--color-success-bg); color: var(--color-success-hover); } .badge-error { background-color: var(--color-error-bg); color: var(--color-error-hover); } .badge-info { background-color: var(--color-info-bg); color: var(--color-info-hover); } .badge-warning { background-color: var(--color-warn-bg); color: var(--color-warn-hover); } .badge-neutral { background-color: var(--color-bg-elevated); color: var(--color-text-secondary); } :where([data-theme="dark"]) .badge-success { color: var(--color-success); } :where([data-theme="dark"]) .badge-error { color: var(--color-error); } :where([data-theme="dark"]) .badge-info { color: var(--color-info); } :where([data-theme="dark"]) .badge-warning { color: var(--color-warn); } /* ── Badges & pills: background-color from Tailwind classes ── */ :where([data-theme="dark"]) .badge, :where(html[data-theme="dark"]) .bg-blue-100, :where(html[data-theme="dark"]) .bg-green-100, :where(html[data-theme="dark"]) .bg-amber-100, :where(html[data-theme="dark"]) .bg-orange-100, :where(html[data-theme="dark"]) .bg-red-100 { background-color: var(--color-bg-elevated); } /* ═══════════════════════════════════════════════════ Table Utilities ═══════════════════════════════════════════════════ */ .table-header { background-color: var(--color-bg-page); color: var(--color-text-muted); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: var(--space-2) var(--space-2); line-height: var(--leading-snug); vertical-align: middle; } /* Fixed-width column (e.g. status columns in refund tables) */ .col-fixed-120 { width: 120px; min-width: 120px; max-width: 120px; } /* ═══════════════════════════════════════════════════ Button Outline Variants ═══════════════════════════════════════════════════ */ .btn-danger-outline { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); min-height: var(--touch-target-min); font-size: var(--text-sm); font-weight: var(--font-semibold); font-family: var(--font-heading); line-height: var(--leading-snug); letter-spacing: var(--tracking-wide); cursor: pointer; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-error); background: var(--color-bg-surface); border: 1px solid var(--color-error); transition: background-color var(--transition-fast), color var(--transition-fast); } .btn-danger-outline:hover { background: var(--color-error-bg); color: var(--color-error-hover); } .btn-danger-outline:focus-visible { background: var(--color-error-bg); color: var(--color-error-hover); outline: 2px solid var(--color-error-light); outline-offset: 2px; } /* ═══════════════════════════════════════════════════ Card System ═══════════════════════════════════════════════════ */ .card { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* ═══════════════════════════════════════════════════ Input System — .input-base removed (0 usages in templates/JS) Inputs use .form-input/.form-control/.form-select instead. ═══════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════ Button System ═══════════════════════════════════════════════════ */ /* Shared base for all button variants */ :is(.btn-primary, .btn-danger, .btn-success, .btn-neutral, .btn-ghost) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); min-height: var(--touch-target-min); /* WCAG 2.1 SC 2.5.8 Target Size */ font-size: var(--text-sm); font-weight: var(--font-semibold); font-family: var(--font-heading); line-height: var(--leading-snug); letter-spacing: var(--tracking-wide); cursor: pointer; border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--transition-fast), box-shadow var(--transition-fast); } /* Filled variants share inverse text + no border */ :is(.btn-primary, .btn-danger, .btn-success) { border: 0; color: var(--color-text-inverse); } .btn-primary { background-color: var(--brand-primary); } .btn-primary:hover, .btn-primary:focus-visible { background-color: var(--brand-primary-dark); } .btn-primary[disabled], .btn-primary[aria-disabled="true"] { background-color: var(--color-primary-disabled); cursor: not-allowed; box-shadow: none; } .btn-primary[disabled]:hover, .btn-primary[aria-disabled="true"]:hover { background-color: var(--color-primary-disabled); } .btn-neutral { color: var(--color-text-primary); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); transition: background-color var(--transition-fast), border-color var(--transition-fast); } .btn-neutral:hover, .btn-neutral:focus-visible { background: var(--color-bg-elevated); border-color: var(--color-border-strong); } .btn-danger { background-color: var(--color-error); } .btn-danger:hover, .btn-danger:focus-visible { background-color: var(--color-error-hover); } .btn-icon-danger { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-full); background-color: var(--color-error); color: var(--color-text-inverse); cursor: pointer; transition: background-color var(--transition-fast); } .btn-icon-danger:hover, .btn-icon-danger:focus-visible { background-color: var(--color-error-hover); } .btn-success { background-color: var(--color-success); } .btn-success:hover, .btn-success:focus-visible { background-color: var(--color-success-hover); } /* Ghost button — for theme toggle (tarea 034) and tertiary actions */ .btn-ghost { border: none; background: transparent; color: var(--color-text-secondary); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium); transition: color var(--transition-fast), background-color var(--transition-fast); } .btn-ghost:hover, .btn-ghost:focus-visible { color: var(--color-text-primary); background: var(--color-bg-elevated); } /* Size modifiers */ .btn-sm { padding: var(--space-1) var(--space-3); min-height: 2rem; /* 32px — compact context */ font-size: var(--text-sm); } .btn-lg { padding: var(--space-4) var(--space-6); min-height: 3.25rem; /* 52px — prominent CTA */ font-size: var(--text-base); } /* ═══════════════════════════════════════════════════ Refund Period Filters (moved from period_list.html