/* =================================================================== BobedaFiscal · Portal Fiscal · Levi's-inspired (Inter + tabular) =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { --bg: #f4f5f7; --bg2: #eceef2; --panel: rgba(255,255,255,0.92); --panel-b: rgba(255,255,255,0.97); --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.12); --red: #C8102E; --red2: #e8112f; --red-glow: rgba(200,16,46,0.18); --red-dim: rgba(200,16,46,0.06); /* Acento tematizable por cliente (default = rojo Bóveda). Solo lo usan los elementos selectivos: btn-primary, sidebar activo, avatar, glow de fondo y KPI destacada. RFC/badges/tarjetas siguen en --red. _Layout inyecta estas variables por cuando el cliente activo tiene un color propio. */ --accent: var(--red); --accent2: var(--red2); --accent-glow: var(--red-glow); --accent-dim: var(--red-dim); --accent-strong: rgba(200,16,46,0.4); --accent-contrast: #fff; /* texto sobre el color (botones/avatar) */ --accent-ink: var(--red); /* el color usado como texto sobre fondo claro */ --t1: #111318; --t2: #4b5263; --t3: #9ba3b4; --t4: #c8ccd4; --green: #16a34a; --blue: #2563eb; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--t1); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; font-feature-settings: 'cv11' 1, 'ss01' 1; } a { color: inherit; text-decoration: none; } button, input, select { font-family: inherit; font-variant-numeric: tabular-nums; } .grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.022) 1px, transparent 1px), radial-gradient(circle at top left, var(--accent-dim), transparent 50%); background-size: 40px 40px, 40px 40px, 100% 100%; } /* ============== SIDEBAR ============== */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: #fff; box-shadow: 1px 0 0 var(--border), 2px 0 14px rgba(0,0,0,.03); display: flex; flex-direction: column; z-index: 50; } .sb-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 24px; border-bottom: 1px solid var(--border); } .sb-logo { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: visible; filter: drop-shadow(0 0 10px var(--accent-glow)); } .sb-logo img, .sb-logo svg { width: 100%; height: 100%; object-fit: contain; display: block; } /* Marcador de posicion mientras la empresa no sube su logo: sus iniciales sobre su propio color. Se distingue a simple vista de un logo real, que es justo el punto. */ .sb-logo--iniciales { background: var(--accent, #0f6fbf); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .02em; filter: none; } .sb-logo--iniciales span { line-height: 1; user-select: none; } /* Admin (Bóveda Fiscal): logo completo apilado, sin el cuadro/glow de Alevart */ .sb-brand--boveda { flex-direction: column; align-items: flex-start; gap: 12px; } .sb-logo--boveda { width: auto; height: 30px; flex: none; border-radius: 0; filter: none; justify-content: flex-start; } .sb-logo--boveda img { width: auto; height: 100%; } .sb-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sb-brand-name { font-weight: 700; font-size: 17px; color: var(--t1); line-height: 1; letter-spacing: -0.3px; } .sb-brand-meta { font-size: 10.5px; color: var(--t3); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; } .sb-section-label { padding: 22px 22px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--t4); font-weight: 600; } .sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; } .sb-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px; color: var(--t2); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s; } .sb-item:hover { background: rgba(0,0,0,.025); color: var(--t1); } .sb-item.active { background: var(--accent-dim); color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent-glow); } .sb-item.disabled { opacity: .45; cursor: not-allowed; } .sb-item-icon { width: 18px; opacity: .7; font-size: 14px; text-align: center; } .sb-item.active .sb-item-icon { opacity: 1; color: var(--accent-ink); } .sb-badge { margin-left: auto; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 12px; min-width: 28px; text-align: center; letter-spacing: 0.2px; } .sb-user { margin-top: auto; padding: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .sb-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--accent-contrast); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px var(--accent-glow); flex: 0 0 36px; } .sb-user-name { font-weight: 600; font-size: 13.5px; color: var(--t1); line-height: 1.2; } .sb-user-meta { font-size: 11px; color: var(--t3); } /* ============== MAIN ============== */ .main { margin-left: 240px; min-height: 100vh; position: relative; z-index: 1; } .topbar { position: sticky; top: 0; z-index: 20; height: 64px; background: rgba(255,255,255,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 32px; gap: 18px; } .tb-title { font-weight: 700; font-size: 18px; letter-spacing: -0.3px; } .tb-sep { width: 1px; height: 20px; background: var(--border); } .tb-crumb { font-size: 13px; color: var(--t3); font-weight: 500; } .tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; background: #fff; border: 1px solid var(--border); border-radius: 16px; font-size: 12px; font-weight: 500; color: var(--t3); } .chip-strong { color: var(--t1); font-weight: 600; } .chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(22,163,74,.6); } .content { padding: 24px 32px 40px; } /* ============== KPI CARDS ============== */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .kpi { position: relative; background: var(--panel-b); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; min-height: 140px; display: flex; flex-direction: column; opacity: 0; animation: fadeUp .4s ease-out forwards; transition: transform .15s, border-color .15s, box-shadow .15s; } .kpi:hover { transform: translateY(-2px); border-color: rgba(200,16,46,.18); box-shadow: 0 6px 24px rgba(0,0,0,.04); } .kpi:nth-child(1) { animation-delay: .05s; } .kpi:nth-child(2) { animation-delay: .10s; } .kpi:nth-child(3) { animation-delay: .15s; } .kpi:nth-child(4) { animation-delay: .20s; } .kpi-primary { border-color: var(--accent-glow); background: linear-gradient(180deg, var(--accent-dim), transparent 60%), var(--panel-b); } .kpi-primary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); border-radius: 14px 14px 0 0; } .kpi-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .kpi-label { font-size: 11px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.8px; } .kpi-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,.04); color: var(--t3); font-size: 13px; display: flex; align-items: center; justify-content: center; } .kpi-primary .kpi-icon { background: var(--accent-dim); color: var(--accent-ink); } .kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--t1); line-height: 1; margin-bottom: 10px; } .kpi-primary .kpi-int { color: var(--accent-ink); } .kpi-cents { color: var(--t4); font-weight: 600; font-size: 18px; letter-spacing: -0.5px; } .kpi-sub { margin-top: auto; } .kpi-sub-line1 { font-size: 12.5px; font-weight: 600; color: var(--t2); letter-spacing: 0.2px; } .kpi-sub-line2 { font-size: 12px; color: var(--t3); margin-top: 2px; line-height: 1.4; font-weight: 400; } /* ============== FILTER PANEL ============== */ .filter-panel { background: var(--panel-b); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px 22px; margin-bottom: 20px; opacity: 0; animation: fadeUp .4s ease-out .25s forwards; } .fp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-left: 12px; border-left: 3px solid var(--red); } .fp-title { font-size: 13px; font-weight: 700; color: var(--t1); text-transform: uppercase; letter-spacing: 0.8px; } .fp-clear { font-size: 12px; font-weight: 600; color: var(--red2); cursor: pointer; background: none; border: none; padding: 0; } .fp-clear:hover { text-decoration: underline; } .fp-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); } .fp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .fp-field-label { font-size: 10.5px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.8px; } .fp-input, .fp-select { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 500; color: var(--t1); height: 38px; outline: none; transition: border-color .12s, box-shadow .12s; } .fp-input::placeholder { color: var(--t4); font-weight: 400; } .fp-input:focus, .fp-select:focus { border-color: rgba(200,16,46,.5); box-shadow: 0 0 0 3px rgba(200,16,46,.10); } .fp-actions { display: flex; gap: 8px; align-items: flex-end; } .btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; height: 38px; border-radius: 8px; cursor: pointer; text-decoration: none; line-height: 1; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; transition: box-shadow .15s, transform .05s, border-color .12s, color .12s; } .btn-primary { background: var(--accent); color: var(--accent-contrast); border: none; padding: 0 18px; box-shadow: 0 0 22px var(--accent-strong); flex: 1; min-width: 96px; } .btn-primary:hover { box-shadow: 0 0 30px var(--accent-strong); } .btn-primary:active { transform: translateY(1px); } .btn-ghost { background: #fff; color: var(--t2); border: 1px solid var(--border); padding: 0 14px; font-weight: 600; letter-spacing: 0.8px; } .btn-ghost:hover { color: var(--t1); border-color: var(--border-strong); } /* ============== TABLE CARD ============== */ .table-card { background: var(--panel-b); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; opacity: 0; animation: fadeUp .4s ease-out .30s forwards; } .table-summary { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--border); } .ts-left { display: flex; align-items: flex-start; gap: 44px; } .ts-block { display: flex; flex-direction: column; gap: 4px; } .ts-big { font-weight: 700; font-size: 28px; color: var(--t1); letter-spacing: -1px; line-height: 1; } .ts-big.red { color: var(--red2); font-size: 22px; } .ts-big-suffix { color: var(--t3); font-size: 12.5px; font-weight: 600; margin-left: 6px; letter-spacing: 0.4px; } .ts-label { font-size: 10.5px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; } .ts-actions { display: flex; gap: 8px; align-items: center; } .icon-btn { width: 36px; height: 36px; background: #fff; border: 1px solid var(--border); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--t2); cursor: pointer; transition: background .12s, color .12s, border-color .12s; font-size: 14px; } .icon-btn:hover { color: var(--t1); border-color: var(--border-strong); } .pg-current { font-size: 12.5px; color: var(--t3); padding: 0 10px; font-weight: 500; } .pg-current strong { color: var(--t1); font-weight: 700; } table.data { width: 100%; border-collapse: collapse; } table.data thead th { font-weight: 600; font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.6px; text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; } table.data thead th.right { text-align: right; } table.data tbody td { padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.04); font-size: 13px; color: var(--t1); white-space: nowrap; vertical-align: middle; } table.data tbody tr { cursor: pointer; transition: background .12s; } table.data tbody tr:hover { background: rgba(200,16,46,.03); } table.data tbody tr:last-child td { border-bottom: none; } .td-date { font-size: 13px; color: var(--t1); font-weight: 500; } .td-date-time { display: block; color: var(--t3); font-size: 11px; font-weight: 400; margin-top: 2px; } .td-rfc { color: var(--red2); font-weight: 500; font-size: 12px; letter-spacing: 0.2px; } .td-total { text-align: right; font-weight: 700; font-size: 14px; color: var(--t1); } .td-mon { font-size: 11px; color: var(--t3); font-weight: 500; } .td-uuid { color: var(--t3); font-size: 11px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; font-weight: 400; } .td-receptor { font-size: 13px; color: var(--t1); max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .badge-tipo { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; border-radius: 6px; font-size: 11px; font-weight: 700; padding: 0 7px; letter-spacing: 0.2px; } .badge-tipo-I { background: rgba(200,16,46,.10); color: var(--red); border: 1px solid rgba(200,16,46,.22); } .badge-tipo-N { background: rgba(37,99,235,.08); color: var(--blue); border: 1px solid rgba(37,99,235,.20); } .badge-tipo-E { background: rgba(22,163,74,.08); color: var(--green); border: 1px solid rgba(22,163,74,.20); } .badge-tipo-P { background: rgba(234,179,8,.10); color: #b88706; border: 1px solid rgba(234,179,8,.28); } .badge-tipo-T { background: rgba(0,0,0,.04); color: var(--t2); border: 1px solid var(--border); } .pill { display: inline-block; padding: 3px 10px; border-radius: 16px; background: rgba(37,99,235,.08); color: var(--blue); border: 1px solid rgba(37,99,235,.18); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; } .pill.muted { background: rgba(0,0,0,.03); color: var(--t3); border-color: var(--border); } /* ============== PAGINATION ============== */ .pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; border-top: 1px solid var(--border); } .pg-info { font-size: 12.5px; color: var(--t3); font-weight: 500; } .pg-info strong { color: var(--t1); font-weight: 700; } .pg-buttons { display: flex; gap: 8px; align-items: center; } .pg-btn { height: 36px; min-width: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; color: var(--t2); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; } .pg-btn:hover:not(.disabled) { color: var(--t1); border-color: var(--border-strong); } .pg-btn.disabled { opacity: .4; cursor: not-allowed; } .empty-state { padding: 70px 20px; text-align: center; font-size: 13px; color: var(--t3); } /* ============== DETAILS ============== */ .details-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .details-head h1 { margin: 0; font-weight: 700; font-size: 20px; letter-spacing: -0.4px; display: flex; align-items: center; gap: 12px; } /* En el encabezado el boton no debe estirarse: ancho segun su contenido. */ .details-head .btn-primary { flex: 0 0 auto; } .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .detail-card { background: var(--panel-b); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; opacity: 0; animation: fadeUp .35s ease-out forwards; } .detail-card-head { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--t1); text-transform: uppercase; letter-spacing: 0.6px; } .detail-card-body { padding: 16px 20px; font-size: 13px; } .detail-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 6px 0; align-items: baseline; } .detail-row .lbl { color: var(--t3); font-size: 12px; font-weight: 500; } .detail-row .val { color: var(--t1); font-size: 13px; font-weight: 500; word-break: break-all; } .detail-row .val.right { text-align: right; } .detail-row .val.strong { font-weight: 700; font-size: 22px; color: var(--red2); letter-spacing: -0.5px; } .xml-pre { background: rgba(0,0,0,.03); border: 1px solid var(--border); border-radius: 8px; padding: 14px; max-height: 420px; overflow: auto; font-family: 'SF Mono', 'Menlo', monospace; font-size: 12px; color: var(--t2); margin-top: 12px; } /* ============== ANIMATIONS ============== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ============== RESPONSIVE ============== */ @media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .fp-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .sidebar { display: none; } .main { margin-left: 0; } .kpi-grid, .fp-grid, .details-grid { grid-template-columns: 1fr; } .ts-left { gap: 22px; flex-wrap: wrap; } } /* ============== LOGIN — BobedaFiscal (split oscuro/verde) ============== */ /* Auto-contenido: define su propia paleta oscura para no heredar el tema claro/rojo del portal. El resto del portal NO se ve afectado. */ .bf-login { --bf-bg: #0a0c0b; --bf-panel: #0d100f; --bf-input: #14181700; /* base; ver regla input */ --bf-input-bg: #161b19; --bf-border: #262d2a; --bf-border-h: #3a443f; --bf-green: #aac486; /* acento (botón) */ --bf-green-h: #b8d195; --bf-green-ring:#8fae5d; --bf-t1: #edefec; --bf-t2: #aab2ac; --bf-t3: #6f7872; position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bf-bg); font-family: var(--font); color: var(--bf-t1); overflow: auto; } /* --- Panel visual (izquierda) --- */ .bf-login__hero { position: relative; background: #000; overflow: hidden; /* recorta el zoom */ display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; min-height: 100%; } /* Imagen de fondo en pseudo-elemento para animar el zoom sin mover overlay/texto */ .bf-login__hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url('/img/login-boveda.jpg') center/cover no-repeat; transform-origin: center; animation: bfHeroZoom 24s ease-in-out infinite alternate; will-change: transform; } @keyframes bfHeroZoom { from { transform: scale(1); } to { transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .bf-login__hero::before { animation: none; } } .bf-login__hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,8,7,.25) 0%, rgba(6,8,7,.10) 42%, rgba(6,8,7,.88) 100%); } .bf-login__hero-copy { position: relative; z-index: 2; max-width: 460px; } .bf-login__hero-copy h2 { font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -0.5px; margin: 0 0 12px 0; color: #fff; } .bf-login__hero-copy p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0 0 18px 0; } .bf-login__hero-tag { font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .2px; } /* Efecto "Desenfoque" (Canva): el texto entra de borroso a nitido, lento y suave, con un ligero escalonado entre las tres lineas. */ .bf-login__hero-copy h2, .bf-login__hero-copy p, .bf-login__hero-tag { animation: bfBlurIn 1.8s cubic-bezier(.22,.61,.36,1) both; } .bf-login__hero-copy h2 { animation-delay: .25s; } .bf-login__hero-copy p { animation-delay: .7s; } .bf-login__hero-tag { animation-delay: 1.15s; } @keyframes bfBlurIn { from { opacity: 0; filter: blur(16px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .bf-login__hero-copy h2, .bf-login__hero-copy p, .bf-login__hero-tag { animation: none; } } /* --- Panel formulario (derecha) --- */ .bf-login__panel { background: var(--bf-panel); display: flex; align-items: center; justify-content: center; padding: 48px 40px; } .bf-login__form-wrap { width: 100%; max-width: 380px; } .bf-login__brand { display: block; margin-bottom: 14px; } .bf-login__brand img { height: 40px; width: auto; opacity: .95; } .bf-login__brand-name { font-size: 19px; font-weight: 600; letter-spacing: -0.2px; color: var(--bf-t1); margin-bottom: 22px; } .bf-login__title { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; color: var(--bf-t1); margin: 0 0 6px 0; } .bf-login__sub { font-size: 13.5px; color: var(--bf-t3); margin: 0 0 30px 0; line-height: 1.5; } .bf-login__field { margin-bottom: 18px; } .bf-login__field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--bf-t2); margin-bottom: 7px; } .bf-login__input { width: 100%; height: 46px; background: var(--bf-input-bg); border: 1px solid var(--bf-border); border-radius: 9px; padding: 0 14px; color: var(--bf-t1); font-size: 14px; transition: border-color .15s, box-shadow .15s; } .bf-login__input::placeholder { color: var(--bf-t3); } .bf-login__input:hover { border-color: var(--bf-border-h); } .bf-login__input:focus { outline: none; border-color: var(--bf-green-ring); box-shadow: 0 0 0 3px rgba(143,174,93,.18); } .bf-login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 26px 0; } .bf-login__remember { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bf-t2); cursor: pointer; user-select: none; } .bf-login__remember input { accent-color: var(--bf-green); width: 14px; height: 14px; } .bf-login__link { font-size: 12.5px; color: var(--bf-green); font-weight: 500; text-decoration: none; } .bf-login__link:hover { text-decoration: underline; } .bf-login__submit { width: 100%; height: 48px; border: none; cursor: pointer; border-radius: 9px; background: var(--bf-green); color: #14201a; font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: .2px; transition: background .15s, transform .05s; } .bf-login__submit:hover { background: var(--bf-green-h); } .bf-login__submit:active { transform: translateY(1px); } .bf-login__error { background: rgba(200,16,46,.10); border: 1px solid rgba(200,16,46,.30); color: #f0a9b3; padding: 11px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 500; margin-bottom: 18px; } .bf-login__field-error { color: #f0a9b3; font-size: 11.5px; font-weight: 500; margin-top: 5px; display: block; } .bf-login .validation-summary-errors { display: none; } .bf-login__footer { margin-top: 30px; font-size: 12px; color: var(--bf-t3); text-align: center; line-height: 1.5; } /* --- Responsive: apila y oculta el hero --- */ @media (max-width: 880px) { .bf-login { grid-template-columns: 1fr; position: relative; min-height: 100vh; } .bf-login__hero { display: none; } .bf-login__brand { display: block; } .bf-login__panel { padding: 40px 24px; min-height: 100vh; } } /* Brand del sidebar (nombre largo del cliente) — sin relación con el login */ .sb-brand-name { font-size: 12.5px; line-height: 1.25; letter-spacing: -0.1px; } /* === Estado SAT === */ .badge-cancelado { display: inline-block; background: rgba(200,16,46,.14); color: var(--red); border: 1px solid rgba(200,16,46,.4); font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.6px; } .dot-vigente { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 4px rgba(22,163,74,.5); vertical-align: middle; } .dot-pendiente { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--t4); vertical-align: middle; } /* ============== TOOLTIP CUSTOM ============== */ .has-tooltip { position: relative; } .has-tooltip .tooltip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px); background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05); padding: 9px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--t1); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 200; letter-spacing: 0.1px; } .has-tooltip .tooltip::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: #fff; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .has-tooltip:hover .tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ────────────── Admin: cards de cliente (Vista Global) ────────────── */ .cliente-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .cliente-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; text-align: left; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; font-family: inherit; width: 100%; display: block; } .cliente-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: var(--red2); } .cliente-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; } .cliente-card-name { font-size: 16px; font-weight: 700; color: var(--t1); letter-spacing: -0.3px; } .cliente-card-rfc { font-size: 11.5px; color: var(--red2); font-weight: 500; letter-spacing: 0.3px; margin-top: 2px; } .cliente-card-razon { font-size: 12px; color: var(--t3); margin-bottom: 14px; line-height: 1.4; min-height: 32px; } .cliente-card-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ccm-label { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.5px; } .ccm-val { font-size: 14px; font-weight: 700; color: var(--t1); margin-top: 2px; font-variant-numeric: tabular-nums; } .ccm-red { color: var(--red2); } .cliente-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 11.5px; color: var(--t3); } .cliente-card-enter { color: var(--red2); font-weight: 600; } .dot-cancelado { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--red2); box-shadow: 0 0 6px rgba(232,17,47,.5); } /* ============== ADMIN (VISTA GLOBAL): rojo -> negro ============== Solo aplica con (panel de administrador). El area del cliente conserva el rojo. NO se tocan: .td-rfc, badge de Rol Global, .btn-ghost de acciones, ni las tarjetas .ccm-* del dashboard. */ /* 1) Botones primarios (Nuevo cliente/usuario, Iniciar sincronizacion, Copiar) */ body.admin-area .btn-primary { background: #000; box-shadow: 0 0 22px rgba(0,0,0,.35); } body.admin-area .btn-primary:hover { box-shadow: 0 0 30px rgba(0,0,0,.5); } /* 2) Modulo seleccionado en el sidebar: glass oscuro, letra blanca, contorno fino negro */ body.admin-area .sb-item.active { background: rgba(0,0,0,.9); color: #fff; box-shadow: inset 0 0 0 1px #000; } body.admin-area .sb-item.active .sb-item-icon { color: #fff; opacity: 1; } /* 3) Avatar "A" del admin */ body.admin-area .sb-avatar { background: #000; box-shadow: 0 0 10px rgba(0,0,0,.35); } /* 4) Glow de fondo: de rojo a oscuro */ body.admin-area .grid-bg { background-image: linear-gradient(rgba(0,0,0,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.022) 1px, transparent 1px), radial-gradient(circle at top left, rgba(0,0,0,.05), transparent 50%); } /* 5) Tarjeta KPI destacada "Clientes Activos" (Vista Global) */ body.admin-area .kpi-primary { border-color: rgba(0,0,0,.22); background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0) 60%), var(--panel-b); } body.admin-area .kpi-primary::before { background: #000; box-shadow: 0 0 10px rgba(0,0,0,.35); } body.admin-area .kpi-primary .kpi-icon { background: rgba(0,0,0,.06); color: #000; } body.admin-area .kpi-primary .kpi-int { color: #000; } body.admin-area .kpi:hover { border-color: rgba(0,0,0,.18); } /* ============== SCROLL HORIZONTAL DE TABLAS ============== Tablas con muchas columnas: barra de scroll horizontal visible y prominente (sobre todo para Windows, donde la barra es clasica). En Mac aparece overlay. */ .table-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(0,0,0,.38) rgba(0,0,0,.06); /* thumb / track */ -webkit-overflow-scrolling: touch; } .table-scroll::-webkit-scrollbar { height: 12px; } .table-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: 8px; } .table-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.38); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.55); background-clip: padding-box; }