/* ================================================================ Alfaqueque · Capa de refinamiento visual ---------------------------------------------------------------- Tokens, tipografías y overrides sobre el POS existente. Se aplica cuando el tiene la clase `theme-alfaqueque` (la añade/quita alfaqueque-theme.js con ?theme=alfaqueque). Diseñado para NO tocar el código original. Si algo no queda refinado con esto, escalamos a overrides de componentes (fase B). ================================================================ */ /* ── Import de tipografías ───────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"); /* ── Tokens como variables CSS ───────────────────────────────── */ .theme-alfaqueque, .theme-alfaqueque * { --aq-noche: #12101A; --aq-noche-2: #1C1826; --aq-pergamino: #F2EDE4; --aq-blanco: #FAF8F5; --aq-teal: #5BAA98; --aq-teal-dark: #3D8A7C; --aq-teal-bg: rgba(91, 170, 152, 0.12); --aq-salvia: #3E6354; --aq-indigo: #52497A; --aq-falcata: #6B4E8A; --aq-mostaza: #B88A38; --aq-fabulae: #C94F4F; --aq-gris: #7A7880; --aq-gris-cl: #C8C5C0; --aq-gris-bg: #E8E3D8; --aq-r-sm: 4px; --aq-r: 8px; --aq-r-lg: 12px; --aq-font-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif; --aq-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --aq-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --aq-shadow-soft: 0 1px 0 rgba(18, 16, 26, 0.03), 0 1px 2px rgba(18, 16, 26, 0.04); /* Mapeo a variables Tailwind extendidas que ya usa el repo (tailwind.config.ts define estos nombres). Si el repo las expone como CSS vars, se aplican aquí también. */ --color-brand-DEFAULT: var(--aq-noche); --color-brand-50: #F5F4F6; --color-brand-100: #E9E7EC; --color-brand-200: #C9C5D1; --color-brand-300: #9B95AC; --color-brand-600: #2B2634; --color-brand-700: var(--aq-noche-2); --color-brand-800: var(--aq-noche); --color-brand-900: #0A0812; --color-gold-DEFAULT: var(--aq-teal); --color-gold-400: var(--aq-teal); --color-gold-500: var(--aq-teal-dark); --color-surface-base: var(--aq-pergamino); --color-surface-card: var(--aq-blanco); --color-surface-muted: var(--aq-gris-bg); --color-ink-DEFAULT: var(--aq-noche); --color-ink-soft: #3A3542; --color-ink-muted: var(--aq-gris); } /* ── Base global ─────────────────────────────────────────────── */ .theme-alfaqueque { background: var(--aq-pergamino); color: var(--aq-noche); font-family: var(--aq-font-sans); font-feature-settings: "tnum" 1, "lnum" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .theme-alfaqueque body { background: var(--aq-pergamino); color: var(--aq-noche); font-family: var(--aq-font-sans); } /* Titulaje en Space Grotesk (grotesque limpia, tipografía dominante de toda la app). Fraunces se retiró por completo: la serif editorial acumulaba demasiado adorno y ahora todo el titulaje habla con una sola voz. `.font-display`/`.font-serif` se mantienen apuntando aquí —los componentes del tema los usan— y resuelven también a Grotesk. */ .theme-alfaqueque h1, .theme-alfaqueque h2, .theme-alfaqueque h3, .theme-alfaqueque .font-display, .theme-alfaqueque .font-serif { font-family: var(--aq-font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; } .theme-alfaqueque h1 { font-size: clamp(2rem, 3vw, 2.5rem); } .theme-alfaqueque h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); } .theme-alfaqueque h3 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); } /* Énfasis: solo teal, sin inclinación. Space Grotesk no tiene cursiva real, así que `font-style: italic` producía una cursiva falsa (inclinada por el navegador); el color teal basta como distintivo. */ .theme-alfaqueque em, .theme-alfaqueque i { color: var(--aq-teal); font-style: normal; } /* Números tabulares en UI sans y mono en todas partes donde aparezcan cifras */ .theme-alfaqueque .font-mono, .theme-alfaqueque code, .theme-alfaqueque kbd, .theme-alfaqueque pre, .theme-alfaqueque [data-numeric], .theme-alfaqueque .tabular-nums { font-family: var(--aq-font-mono); font-feature-settings: "tnum" 1, "lnum" 1; } /* ── Overrides Tailwind frecuentes (paleta) ──────────────────── */ /* Grises → gris cálido de la paleta */ .theme-alfaqueque .bg-white { background-color: var(--aq-blanco) !important; } .theme-alfaqueque .bg-gray-50, .theme-alfaqueque .bg-slate-50, .theme-alfaqueque .bg-neutral-50, .theme-alfaqueque .bg-stone-50 { background-color: var(--aq-pergamino) !important; } .theme-alfaqueque .bg-gray-100, .theme-alfaqueque .bg-slate-100, .theme-alfaqueque .bg-neutral-100, .theme-alfaqueque .bg-stone-100 { background-color: var(--aq-gris-bg) !important; } .theme-alfaqueque .bg-gray-900, .theme-alfaqueque .bg-slate-900, .theme-alfaqueque .bg-neutral-900, .theme-alfaqueque .bg-zinc-900 { background-color: var(--aq-noche) !important; } .theme-alfaqueque .bg-gray-800, .theme-alfaqueque .bg-slate-800 { background-color: var(--aq-noche-2) !important; } /* Textos */ .theme-alfaqueque .text-gray-900, .theme-alfaqueque .text-slate-900, .theme-alfaqueque .text-neutral-900, .theme-alfaqueque .text-black { color: var(--aq-noche) !important; } .theme-alfaqueque .text-gray-700, .theme-alfaqueque .text-slate-700 { color: #3A3542 !important; } .theme-alfaqueque .text-gray-600, .theme-alfaqueque .text-slate-600, .theme-alfaqueque .text-gray-500, .theme-alfaqueque .text-slate-500 { color: var(--aq-gris) !important; } .theme-alfaqueque .text-white { color: var(--aq-pergamino) !important; } /* Bordes */ .theme-alfaqueque .border, .theme-alfaqueque .border-gray-200, .theme-alfaqueque .border-slate-200, .theme-alfaqueque .border-neutral-200 { border-color: var(--aq-gris-cl) !important; } .theme-alfaqueque .border-gray-300, .theme-alfaqueque .border-slate-300 { border-color: var(--aq-gris-cl) !important; } /* Azules → teal de marca */ .theme-alfaqueque .bg-blue-500, .theme-alfaqueque .bg-blue-600, .theme-alfaqueque .bg-indigo-500, .theme-alfaqueque .bg-indigo-600, .theme-alfaqueque .bg-primary, .theme-alfaqueque .bg-brand { background-color: var(--aq-teal) !important; color: var(--aq-noche) !important; } .theme-alfaqueque .text-blue-500, .theme-alfaqueque .text-blue-600, .theme-alfaqueque .text-indigo-600, .theme-alfaqueque .text-primary, .theme-alfaqueque .text-brand { color: var(--aq-teal) !important; } .theme-alfaqueque .border-blue-500, .theme-alfaqueque .ring-blue-500, .theme-alfaqueque .ring-primary { border-color: var(--aq-teal) !important; --tw-ring-color: var(--aq-teal) !important; } /* Tokens del repo (brand / gold / ink / surface) — alias directo */ .theme-alfaqueque .bg-brand { background-color: var(--aq-noche) !important; } .theme-alfaqueque .bg-gold, .theme-alfaqueque .bg-gold-400 { background-color: var(--aq-teal) !important; color: var(--aq-noche) !important; } .theme-alfaqueque .text-gold, .theme-alfaqueque .text-gold-400, .theme-alfaqueque .text-gold-500 { color: var(--aq-teal) !important; } .theme-alfaqueque .bg-surface, .theme-alfaqueque .bg-surface-base { background-color: var(--aq-pergamino) !important; } /* Destructivo → rojo claro cálido */ .theme-alfaqueque .bg-red-500, .theme-alfaqueque .bg-red-600, .theme-alfaqueque .bg-rose-500, .theme-alfaqueque .bg-danger { background-color: var(--aq-fabulae) !important; color: var(--aq-pergamino) !important; } .theme-alfaqueque .text-red-500, .theme-alfaqueque .text-red-600, .theme-alfaqueque .text-rose-600, .theme-alfaqueque .text-danger { color: var(--aq-fabulae) !important; } .theme-alfaqueque .border-red-500, .theme-alfaqueque .border-red-600 { border-color: var(--aq-fabulae) !important; } /* Éxito → salvia */ .theme-alfaqueque .bg-green-500, .theme-alfaqueque .bg-emerald-500, .theme-alfaqueque .bg-success { background-color: var(--aq-salvia) !important; color: var(--aq-pergamino) !important; } .theme-alfaqueque .text-green-600, .theme-alfaqueque .text-emerald-600, .theme-alfaqueque .text-success { color: var(--aq-salvia) !important; } /* Warning → mostaza (no naranja) */ .theme-alfaqueque .bg-yellow-500, .theme-alfaqueque .bg-amber-500, .theme-alfaqueque .bg-warning { background-color: var(--aq-mostaza) !important; color: var(--aq-pergamino) !important; } .theme-alfaqueque .text-yellow-600, .theme-alfaqueque .text-amber-600, .theme-alfaqueque .text-warning { color: var(--aq-mostaza) !important; } /* ── Radios ──────────────────────────────────────────────────── */ .theme-alfaqueque .rounded, .theme-alfaqueque .rounded-md, .theme-alfaqueque .rounded-lg { border-radius: var(--aq-r) !important; } .theme-alfaqueque .rounded-sm { border-radius: var(--aq-r-sm) !important; } .theme-alfaqueque .rounded-xl, .theme-alfaqueque .rounded-2xl { border-radius: var(--aq-r-lg) !important; } /* ── Botones (patrones comunes) ──────────────────────────────── */ .theme-alfaqueque button, .theme-alfaqueque .btn { font-family: var(--aq-font-sans); letter-spacing: 0.005em; font-weight: 500; } /* Botón primario (cualquier combinación habitual) */ .theme-alfaqueque .btn-primary, .theme-alfaqueque button.primary, .theme-alfaqueque button[data-variant="primary"], .theme-alfaqueque .bg-primary.rounded, .theme-alfaqueque .bg-brand.text-white { background: var(--aq-teal) !important; color: var(--aq-noche) !important; border: none !important; border-radius: var(--aq-r) !important; font-weight: 600 !important; font-family: var(--aq-font-display) !important; letter-spacing: -0.005em !important; } .theme-alfaqueque .btn-primary:hover, .theme-alfaqueque button.primary:hover { background: var(--aq-teal-dark) !important; } /* Botón ghost / secondary */ .theme-alfaqueque .btn-ghost, .theme-alfaqueque button[data-variant="ghost"], .theme-alfaqueque .btn-secondary { background: transparent !important; color: var(--aq-gris) !important; border: 1px solid var(--aq-gris-cl) !important; border-radius: var(--aq-r) !important; } /* ── Inputs ──────────────────────────────────────────────────── */ .theme-alfaqueque input[type="text"], .theme-alfaqueque input[type="email"], .theme-alfaqueque input[type="password"], .theme-alfaqueque input[type="search"], .theme-alfaqueque input[type="number"], .theme-alfaqueque input[type="tel"], .theme-alfaqueque select, .theme-alfaqueque textarea { background: var(--aq-blanco); color: var(--aq-noche); border: 1px solid var(--aq-gris-cl); border-radius: var(--aq-r); font-family: var(--aq-font-sans); font-weight: 500; } .theme-alfaqueque input:focus, .theme-alfaqueque select:focus, .theme-alfaqueque textarea:focus { outline: none; border-color: var(--aq-teal); box-shadow: 0 0 0 3px var(--aq-teal-bg); } .theme-alfaqueque input::placeholder, .theme-alfaqueque textarea::placeholder { color: var(--aq-gris); opacity: 0.85; } /* ── Sidebar (heurística: nav vertical oscuro en el repo) ────── */ .theme-alfaqueque aside, .theme-alfaqueque [role="navigation"][data-slot="sidebar"], .theme-alfaqueque nav.sidebar { background: var(--aq-noche); color: var(--aq-pergamino); } .theme-alfaqueque aside a, .theme-alfaqueque nav.sidebar a { color: var(--aq-gris); border-radius: var(--aq-r); transition: color 0.15s ease, background-color 0.15s ease; } html.theme-alfaqueque aside a:hover, html.theme-alfaqueque aside nav a:hover, html.theme-alfaqueque nav.sidebar a:hover { color: var(--aq-teal) !important; background-color: var(--aq-teal-bg) !important; } html.theme-alfaqueque aside a:hover svg, html.theme-alfaqueque aside a:hover span, html.theme-alfaqueque nav.sidebar a:hover svg, html.theme-alfaqueque nav.sidebar a:hover span { color: var(--aq-teal) !important; } .theme-alfaqueque aside a[aria-current="page"], .theme-alfaqueque aside a.active, .theme-alfaqueque nav.sidebar a.active { color: var(--aq-teal); background: var(--aq-teal-bg); font-weight: 600; } /* ── Cards ───────────────────────────────────────────────────── */ .theme-alfaqueque .card, .theme-alfaqueque [data-card], .theme-alfaqueque section.card { background: var(--aq-blanco); border: 1px solid var(--aq-gris-cl); border-radius: var(--aq-r); box-shadow: var(--aq-shadow-soft); } /* ── Labels de sección (uppercase letterspaced) ──────────────── */ .theme-alfaqueque .label-uppercase, .theme-alfaqueque [data-label="eyebrow"] { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--aq-gris); font-weight: 600; } /* ── Animación sutil ─────────────────────────────────────────── */ @keyframes aqPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .theme-alfaqueque .animate-pulse-dot { animation: aqPulse 1.6s ease-in-out infinite; } /* ── Scrollbars cálidos ──────────────────────────────────────── */ .theme-alfaqueque ::-webkit-scrollbar { width: 10px; height: 10px; } .theme-alfaqueque ::-webkit-scrollbar-track { background: var(--aq-pergamino); } .theme-alfaqueque ::-webkit-scrollbar-thumb { background: var(--aq-gris-cl); border-radius: var(--aq-r-sm); border: 2px solid var(--aq-pergamino); } .theme-alfaqueque ::-webkit-scrollbar-thumb:hover { background: var(--aq-gris); } /* ── Badge de tema activo ───────────────────────────────────── Retirado para producción (auditoría 13-07-2026). El activador ?theme=off sigue funcionando; solo desaparece el letrero. */ /* ============================================================ FASE A · Patch tras primer paseo (2026-04-28) Añade los tokens del repo (primary-*, brand-*, surface-*, ink-*, algorfa, externo, gold, etc.) que la primera versión no cubría. ============================================================ */ /* ── Tints derivados (rampas claras y oscuras) ─────────────── */ .theme-alfaqueque, .theme-alfaqueque * { --aq-teal-50: #EAF4F1; --aq-teal-100: #D6E9E3; --aq-teal-200: #B4D7CC; --aq-teal-400: #7CBFAF; --aq-teal-800: #1F4E47; --aq-fabulae-50: #F9EAEA; --aq-fabulae-100: #F2D2D2; --aq-mostaza-50: #F4ECD9; --aq-mostaza-100: #E8D9B3; --aq-salvia-50: #E5EDE8; --aq-salvia-100: #C9DAD0; --aq-falcata-bg: rgba(107, 78, 138, 0.10); } /* ── Rampa primary completa (azul → teal) ──────────────────── */ .theme-alfaqueque .bg-primary-50 { background-color: var(--aq-teal-50) !important; } .theme-alfaqueque .bg-primary-100 { background-color: var(--aq-teal-100) !important; } .theme-alfaqueque .bg-primary-200 { background-color: var(--aq-teal-200) !important; } .theme-alfaqueque .bg-primary-400 { background-color: var(--aq-teal-400) !important; } .theme-alfaqueque .bg-primary-500, .theme-alfaqueque .bg-primary-600 { background-color: var(--aq-teal) !important; } .theme-alfaqueque .bg-primary-700 { background-color: var(--aq-teal-dark) !important; } .theme-alfaqueque .bg-primary-800 { background-color: var(--aq-teal-800) !important; } .theme-alfaqueque .text-primary-400 { color: var(--aq-teal-400) !important; } .theme-alfaqueque .text-primary-500, .theme-alfaqueque .text-primary-600 { color: var(--aq-teal) !important; } .theme-alfaqueque .text-primary-700, .theme-alfaqueque .text-primary-800 { color: var(--aq-teal-dark) !important; } .theme-alfaqueque .border-primary-100 { border-color: var(--aq-teal-100) !important; } .theme-alfaqueque .border-primary-200 { border-color: var(--aq-teal-200) !important; } .theme-alfaqueque .border-primary-400, .theme-alfaqueque .border-primary-500, .theme-alfaqueque .border-primary-600 { border-color: var(--aq-teal) !important; } .theme-alfaqueque .ring-primary-100 { --tw-ring-color: var(--aq-teal-100) !important; } .theme-alfaqueque .ring-primary-200 { --tw-ring-color: var(--aq-teal-200) !important; } .theme-alfaqueque .ring-primary-400, .theme-alfaqueque .ring-primary-400\/30 { --tw-ring-color: var(--aq-teal-bg) !important; } .theme-alfaqueque .ring-primary-500 { --tw-ring-color: var(--aq-teal) !important; } /* ── Rampa brand completa (petróleo → noche) ──────────────── */ .theme-alfaqueque .bg-brand-50 { background-color: #ECECF0 !important; } .theme-alfaqueque .bg-brand-100 { background-color: #DCDAE4 !important; } .theme-alfaqueque .bg-brand-200 { background-color: #B5B0C2 !important; } .theme-alfaqueque .bg-brand-300 { background-color: #8A83A1 !important; } .theme-alfaqueque .bg-brand-400 { background-color: #5C536F !important; } .theme-alfaqueque .bg-brand-500 { background-color: #38324A !important; } .theme-alfaqueque .bg-brand-600, .theme-alfaqueque .bg-brand-700, .theme-alfaqueque .bg-brand-800, .theme-alfaqueque .bg-brand-900 { background-color: var(--aq-noche) !important; color: var(--aq-pergamino) !important; } .theme-alfaqueque .text-brand-300 { color: var(--aq-gris-cl) !important; } .theme-alfaqueque .text-brand-400, .theme-alfaqueque .text-brand-500 { color: var(--aq-gris) !important; } .theme-alfaqueque .text-brand-600, .theme-alfaqueque .text-brand-700, .theme-alfaqueque .text-brand-800, .theme-alfaqueque .text-brand-900 { color: var(--aq-noche) !important; } .theme-alfaqueque .border-brand-600, .theme-alfaqueque .border-brand-700, .theme-alfaqueque .border-brand-800 { border-color: var(--aq-noche) !important; } /* ── Surface tokens del repo ────────────────────────────────── */ .theme-alfaqueque .bg-surface-base { background-color: var(--aq-pergamino) !important; } .theme-alfaqueque .bg-surface-raised { background-color: var(--aq-blanco) !important; } .theme-alfaqueque .bg-surface-overlay { background-color: var(--aq-blanco) !important; } .theme-alfaqueque .bg-surface-subtle { background-color: var(--aq-gris-bg) !important; } .theme-alfaqueque .bg-surface-muted { background-color: var(--aq-gris-bg) !important; } .theme-alfaqueque .border-surface-border { border-color: var(--aq-gris-cl) !important; } .theme-alfaqueque .ring-surface-border { --tw-ring-color: var(--aq-gris-cl) !important; } /* ── Ink tokens del repo (texto cálido) ────────────────────── */ .theme-alfaqueque .text-ink-primary { color: var(--aq-noche) !important; } .theme-alfaqueque .text-ink-secondary { color: #3A3542 !important; } .theme-alfaqueque .text-ink-muted { color: var(--aq-gris) !important; } .theme-alfaqueque .text-ink-disabled { color: var(--aq-gris-cl) !important; } .theme-alfaqueque .text-ink-inverse { color: var(--aq-pergamino) !important; } .theme-alfaqueque .border-ink-disabled { border-color: var(--aq-gris-cl) !important; } .theme-alfaqueque .border-ink-muted { border-color: var(--aq-gris) !important; } /* ── Verde Tailwind → salvia (puntito sesión, success bgs) ─── */ .theme-alfaqueque .bg-green-50, .theme-alfaqueque .bg-emerald-50 { background-color: var(--aq-salvia-50) !important; } .theme-alfaqueque .bg-green-100, .theme-alfaqueque .bg-emerald-100 { background-color: var(--aq-salvia-100) !important; } .theme-alfaqueque .bg-green-400, .theme-alfaqueque .bg-green-500, .theme-alfaqueque .bg-emerald-400, .theme-alfaqueque .bg-emerald-500 { background-color: var(--aq-salvia) !important; } .theme-alfaqueque .text-green-700, .theme-alfaqueque .text-green-800, .theme-alfaqueque .text-emerald-700, .theme-alfaqueque .text-emerald-800 { color: var(--aq-salvia) !important; } .theme-alfaqueque .ring-green-200, .theme-alfaqueque .ring-emerald-200 { --tw-ring-color: var(--aq-salvia-100) !important; } /* ── Algorfa (verde editorial) → salvia ─────────────────────── */ .theme-alfaqueque .bg-algorfa { background-color: var(--aq-salvia) !important; color: var(--aq-pergamino) !important; } .theme-alfaqueque .bg-algorfa-light { background-color: var(--aq-salvia-100) !important; } .theme-alfaqueque .text-algorfa { color: var(--aq-salvia) !important; } .theme-alfaqueque .border-algorfa { border-color: var(--aq-salvia) !important; } .theme-alfaqueque .ring-algorfa, .theme-alfaqueque .ring-algorfa\/20 { --tw-ring-color: rgba(62, 99, 84, 0.20) !important; } /* ── Externo (azul editorial) → falcata morado ──────────────── */ .theme-alfaqueque .bg-externo { background-color: var(--aq-falcata) !important; color: var(--aq-pergamino) !important; } .theme-alfaqueque .bg-externo-light { background-color: var(--aq-falcata-bg) !important; } .theme-alfaqueque .text-externo { color: var(--aq-falcata) !important; } .theme-alfaqueque .border-externo { border-color: var(--aq-falcata) !important; } /* ── Yellow Tailwind → mostaza (warning) ─────────────────────── */ .theme-alfaqueque .bg-yellow-50, .theme-alfaqueque .bg-amber-50 { background-color: var(--aq-mostaza-50) !important; } .theme-alfaqueque .bg-yellow-100, .theme-alfaqueque .bg-amber-100 { background-color: var(--aq-mostaza-100) !important; } .theme-alfaqueque .text-yellow-700, .theme-alfaqueque .text-yellow-800, .theme-alfaqueque .text-amber-700, .theme-alfaqueque .text-amber-800 { color: var(--aq-mostaza) !important; } .theme-alfaqueque .ring-yellow-200, .theme-alfaqueque .ring-amber-200 { --tw-ring-color: var(--aq-mostaza-100) !important; } /* ── Red Tailwind — completar rampa → fabulae ────────────────── */ .theme-alfaqueque .bg-red-50, .theme-alfaqueque .bg-rose-50 { background-color: var(--aq-fabulae-50) !important; } .theme-alfaqueque .bg-red-100, .theme-alfaqueque .bg-rose-100 { background-color: var(--aq-fabulae-100) !important; } .theme-alfaqueque .border-red-100, .theme-alfaqueque .border-red-200 { border-color: var(--aq-fabulae-100) !important; } .theme-alfaqueque .text-red-400, .theme-alfaqueque .text-red-500, .theme-alfaqueque .text-red-700, .theme-alfaqueque .text-red-800, .theme-alfaqueque .text-rose-700, .theme-alfaqueque .text-rose-800 { color: var(--aq-fabulae) !important; } .theme-alfaqueque .ring-red-200 { --tw-ring-color: var(--aq-fabulae-100) !important; } /* ── Blue Tailwind 100/700/800 (badges externos varios) → teal ── */ .theme-alfaqueque .bg-blue-100 { background-color: var(--aq-teal-100) !important; } .theme-alfaqueque .text-blue-700, .theme-alfaqueque .text-blue-800 { color: var(--aq-teal-dark) !important; } /* ── Gray-100/700/800 (genéricos) → cálido ─────────────────── */ .theme-alfaqueque .bg-gray-100 { background-color: var(--aq-gris-bg) !important; } .theme-alfaqueque .text-gray-700 { color: #3A3542 !important; } .theme-alfaqueque .text-gray-800 { color: var(--aq-noche) !important; } /* ── Sidebar item activo / hover (override de bg-white slash) ── */ .theme-alfaqueque aside .bg-white\/15, .theme-alfaqueque aside .bg-white\/20, .theme-alfaqueque aside .bg-white\/25 { background-color: var(--aq-teal-bg) !important; } .theme-alfaqueque aside .ring-white\/10, .theme-alfaqueque aside .border-white\/10 { --tw-ring-color: rgba(91, 170, 152, 0.30) !important; border-color: rgba(91, 170, 152, 0.30) !important; } /* ============================================================ FASE A · Patch 2 (2026-04-28) Botones success (Cobrar, Importar) → salvia Centrado vertical de botones en filas flex (TPV footer) ============================================================ */ /* ── Botones success / confirmación → salvia ────────────────── */ .theme-alfaqueque .bg-green-600, .theme-alfaqueque .bg-green-700, .theme-alfaqueque .bg-green-800, .theme-alfaqueque .bg-emerald-600, .theme-alfaqueque .bg-emerald-700, .theme-alfaqueque .bg-emerald-800 { background-color: var(--aq-salvia) !important; color: var(--aq-pergamino) !important; } .theme-alfaqueque .hover\:bg-green-700:hover, .theme-alfaqueque .hover\:bg-green-800:hover, .theme-alfaqueque .hover\:bg-emerald-700:hover, .theme-alfaqueque .hover\:bg-emerald-800:hover, .theme-alfaqueque .active\:bg-green-700:active, .theme-alfaqueque .active\:bg-green-800:active, .theme-alfaqueque .active\:bg-emerald-700:active, .theme-alfaqueque .active\:bg-emerald-800:active { background-color: #2F4D40 !important; /* salvia oscuro */ } .theme-alfaqueque .hover\:bg-green-100:hover, .theme-alfaqueque .hover\:bg-emerald-100:hover { background-color: var(--aq-salvia-100) !important; } .theme-alfaqueque .active\:bg-green-200:active, .theme-alfaqueque .active\:bg-emerald-200:active { background-color: #B5C9BB !important; } .theme-alfaqueque .text-green-500, .theme-alfaqueque .text-green-600, .theme-alfaqueque .text-emerald-500, .theme-alfaqueque .text-emerald-600 { color: var(--aq-salvia) !important; } /* ── Centrado vertical de botones en filas flex ─────────────── */ /* Cuando un .flex contiene botones de distintos tamaños (md/lg mezclados como en el footer del TPV), align-items default es stretch y se ven descentrados. Forzamos center para que cada botón conserve su altura natural y queden alineados en el eje. */ .theme-alfaqueque main .flex > button, .theme-alfaqueque [role="dialog"] .flex > button { align-self: center; } /* ── Cards con pb-safe → respetar mínimo 1rem en desktop ────── */ /* `pb-safe` resuelve a env(safe-area-inset-bottom) que en desktop es 0px. El footer del TPV queda con los botones pegados al borde del card. Forzamos un mínimo de 1rem coincidente con el p-4 del resto del contenedor, sin perder safe-area en iOS. */ .theme-alfaqueque .pb-safe { padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important; } /* ── Botón "Cancelar" del footer del TPV → fabulae rojo ─────── */ /* El footer del TPV pone Devolución / Cancelar / Cobrar en una fila .flex.gap-2 donde Cobrar es fullWidth. El selector con :has(> button.w-full) restringe la regla a esa fila concreta y evita falsos positivos con otras toolbars de 3 botones (catálogo, modales, etc.) que NO tienen un botón fullWidth. */ .theme-alfaqueque main .flex.gap-2:has(> button.w-full) > button:nth-child(2):nth-last-child(2) { color: var(--aq-fabulae) !important; } .theme-alfaqueque main .flex.gap-2:has(> button.w-full) > button:nth-child(2):nth-last-child(2):hover { background-color: var(--aq-fabulae-50) !important; color: var(--aq-fabulae) !important; }