/* temas.css — marca blanca (white-label). CARGAR AL FINAL. * * Cada marca tiene un `data-tema` (lo pone desde el layout, * con el valor que da App\Lib\Brand). Aquí solo se REDEFINEN las variables de color * de marca; el resto del sistema (base.css/header.css) ya las consume. El tema por * defecto ("flo", FacturaLo) usa los valores de base.css, así que no necesita bloque. * * Para una marca nueva: agrega su entrada en src/Lib/Brand.php y un bloque aquí con * su `data-tema`. Variables relevantes: * --orange / --orange-hot / --gold-bright acento de marca (botones, detalles) * --brand-accent-rgb acento en RGB (rgba del topbar/rejilla) * --topbar-c1 / --topbar-c2 / --topbar-c3 degradado oscuro del topbar */ /* ── Timbrador Xpress ────────────────────────────────────────────────────────── Azules tomados del logo (chevron + "xpress.mx"). */ body[data-tema="txp"] { --orange: #2b8fd4; /* acento principal (azul del logo) */ --orange-hot: #1c6cb0; /* acento hover/gradiente (azul profundo) */ --gold-bright: #6fb6e6; /* acento claro */ --brand-accent-rgb: 43, 143, 212; /* = --orange #2b8fd4 (para los rgba del topbar) */ --topbar-c1: #06121c; /* degradado oscuro del topbar (tinte azul) */ --topbar-c2: #0c2233; --topbar-c3: #123047; } /* Búbble blanco detrás del logo en el topbar: el logo de Timbrador Xpress tiene azules/grises que se pierden sobre el topbar oscuro. (FacturaLo no lo necesita: su logo está hecho para fondo oscuro.) */ body[data-tema="txp"] .logo-wrap { background: #ffffff; padding: 6px 16px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); } body[data-tema="txp"] .logo-img { height: 34px; } /* Logo de marca en la tarjeta de login (cuando Brand define `login_logo`). */ .login-logo { display: block; max-width: 220px; max-height: 64px; margin: 0 auto 18px; } /* ── Login CLARO de Timbrador Xpress ──────────────────────────────────────────── El login base (login.css) es oscuro/dorado (FacturaLo). Aquí, solo cuando data-tema="txp", se vuelve claro: tarjeta blanca + fondo de chevrons azules (login-bg-txp.svg). Carga después de login.css, así que estas reglas ganan. */ body[data-tema="txp"].login-body { background: #eef3f8; color: #1e293b; } body[data-tema="txp"] .login-bg { background: #eef3f8 url('/img/login-bg-txp.svg') center / cover no-repeat; } body[data-tema="txp"] .login-bg::after { display: none; } /* sin "horizonte" dorado */ body[data-tema="txp"] .login-card { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #e2e8f0; box-shadow: 0 30px 70px rgba(20, 50, 90, .18); } body[data-tema="txp"] .login-card::before { background: linear-gradient(90deg, transparent, var(--orange), transparent); } body[data-tema="txp"] .login-logo { max-width: 260px; } body[data-tema="txp"] .login-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--orange); color: var(--orange); } body[data-tema="txp"] .login-subtitle { color: var(--orange-hot); } body[data-tema="txp"] .login-field > i { color: #94a3b8; } body[data-tema="txp"] .login-field input { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; } body[data-tema="txp"] .login-field input::placeholder { color: #94a3b8; } body[data-tema="txp"] .login-field input:focus { background: #ffffff; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), .18); } body[data-tema="txp"] .login-field input:focus + i, body[data-tema="txp"] .login-field:focus-within > i { color: var(--orange); } body[data-tema="txp"] .login-btn { background: linear-gradient(135deg, var(--orange), var(--orange-hot)); color: #ffffff; box-shadow: 0 10px 30px rgba(var(--brand-accent-rgb), .3); } body[data-tema="txp"] .login-btn:hover { box-shadow: 0 14px 38px rgba(var(--brand-accent-rgb), .42); }