/* ============================================================ Kit de marca — Sistema de asistencia Themeable: default neutro (producto) + tema Santana. Uso web: para activar el tema. Colores Santana extraídos del logo (logo_santana.png). ============================================================ */ :root { /* --- Default neutro (producto / sin marca de cliente) --- */ --brand-primary: #2563eb; /* azul neutro */ --brand-primary-600: #1d4ed8; --brand-accent: #f59e0b; --brand-accent-600: #d97706; --brand-ink: #1f2937; /* texto principal */ --brand-muted: #6b7280; /* texto secundario */ --brand-bg: #ffffff; --brand-surface: #f3f4f6; /* tarjetas / fondos suaves */ --brand-ok: #16a34a; /* éxito (marca ok) */ --brand-warn: #f59e0b; /* atraso / advertencia */ --brand-danger: #dc2626; /* error / falta */ --brand-logo: url("logo.svg"); } /* --- Tema Santana Viajes (colores del logo brújula) --- */ :root[data-brand="santana"] { --brand-primary: #06a2e4; /* cyan del aro/"S" */ --brand-primary-600: #046f9c; /* cyan oscuro */ --brand-accent: #ffc939; /* ámbar de las puntas */ --brand-accent-600: #dea130; /* ámbar profundo */ --brand-ink: #1c444c; /* teal oscuro (texto sobre claro) */ --brand-muted: #5b7680; --brand-bg: #ffffff; --brand-surface: #edf3ff; /* del CSS original del sitio */ --brand-logo: url("logo-santana.png"); } /* --- Modo oscuro (kiosco/móvil de noche) --- */ @media (prefers-color-scheme: dark) { :root { --brand-ink: #e5e7eb; --brand-muted: #9ca3af; --brand-bg: #0f172a; --brand-surface: #1e293b; } :root[data-brand="santana"] { --brand-ink: #e6f4fb; --brand-muted: #9ec7d6; --brand-bg: #08222e; --brand-surface: #0e3040; } } /* ---------- Utilidades base (opcionales, para arrancar rápido) ---------- */ .brand-logo { width: 96px; height: 96px; background: var(--brand-logo) center/contain no-repeat; } .btn-primary { background: var(--brand-primary); color: #fff; border: 0; padding: .75rem 1.25rem; border-radius: .5rem; font-weight: 600; } .btn-primary:hover { background: var(--brand-primary-600); } .btn-accent { background: var(--brand-accent); color: var(--brand-ink); border: 0; padding: .75rem 1.25rem; border-radius: .5rem; font-weight: 600; } .tag-ok { color: var(--brand-ok); } .tag-warn { color: var(--brand-warn); } .tag-danger { color: var(--brand-danger); }