/* ═══════════════════════════════════════════════════════════════ LEGADO BARBERSHOP · Design System completo Sin @import que bloquee render. Fonts van en el HTML. ═══════════════════════════════════════════════════════════════ */ /* ── Variables globales ──────────────────────────────────────── */ :root { /* Colores marca */ --gold: #C9A24A; --gold-light: #E8C97A; --gold-dark: #9C7A2F; --gold-pale: rgba(201,162,74,.12); --gold-border: rgba(201,162,74,.22); /* Fondos */ --black: #0F0F0F; --surface: #161616; --card: #1E1E1E; --card2: #242424; --border: #2C2C2C; /* Texto */ --ivory: #E8E2D6; --gray: #CFCFCF; --muted: #777777; /* Estado */ --green: #22c55e; --red: #ef4444; --blue: #3b82f6; --orange: #f97316; --yellow: #fbbf24; /* Tipografía */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Poppins', system-ui, -apple-system, sans-serif; /* Formas */ --radius: 14px; --radius-sm: 8px; --radius-xs: 5px; /* Sombras */ --shadow: 0 4px 20px rgba(0,0,0,.4); --shadow-gold: 0 4px 24px rgba(201,162,74,.18); } /* ── Reset ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--black); color: var(--gray); min-height: 100vh; background-image: repeating-linear-gradient( 45deg, transparent, transparent 60px, rgba(201,162,74,.013) 60px, rgba(201,162,74,.013) 61px ); } /* ── Scrollbar ───────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); } /* ════════════════════════════════════════════════════════════════ COMPONENTES GLOBALES ════════════════════════════════════════════════════════════════ */ /* ── Botones ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body); font-weight: 600; text-decoration: none; white-space: nowrap; transition: opacity .2s, transform .15s, box-shadow .2s; line-height: 1; } .btn:hover { opacity: .88; transform: translateY(-1px); } .btn:active { transform: translateY(0); opacity: 1; } .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } .btn-xs { padding: 5px 10px; font-size: .72rem; } .btn-sm { padding: 7px 14px; font-size: .78rem; } .btn-md { padding: 10px 20px; font-size: .88rem; } .btn-lg { padding: 13px 26px; font-size: .96rem; } /* Variantes */ .btn-gold { background: linear-gradient(145deg, var(--gold), var(--gold-dark)); color: #0F0F0F; box-shadow: var(--shadow-gold); } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--gray); } .btn-outline:hover { border-color: var(--gold); color: var(--ivory); } .btn-danger { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.2); } .btn-success { background: rgba(34,197,94,.15); color: #86efac; border: 1px solid rgba(34,197,94,.2); } .btn-info { background: rgba(59,130,246,.15); color: #93c5fd; border: 1px solid rgba(59,130,246,.2); } .btn-ghost { background: rgba(255,255,255,.05); color: var(--gray); } /* Botón XL táctil (panel barbero) */ .btn-xl { width: 100%; padding: 24px 20px; font-size: 1rem; border-radius: var(--radius); flex-direction: column; gap: 6px; min-height: 110px; } .btn-xl .btn-icon { font-size: 1.9rem; line-height: 1; } .btn-xl .btn-label { font-size: .95rem; font-weight: 600; color: var(--ivory); } .btn-xl .btn-price { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-light); } .btn-xl .btn-dur { font-size: .7rem; color: rgba(255,255,255,.5); font-weight: 400; } /* ── Badges ───────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .69rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; } .badge-gold { background: var(--gold-pale); color: var(--gold); } .badge-green { background: rgba(34,197,94,.14); color: #86efac; } .badge-red { background: rgba(239,68,68,.14); color: #fca5a5; } .badge-blue { background: rgba(59,130,246,.14); color: #93c5fd; } .badge-orange { background: rgba(249,115,22,.14); color: #fdba74; } .badge-yellow { background: rgba(251,191,36,.14); color: #fde68a; } /* ── Cards ────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; } .card-title { font-family: var(--font-display); font-size: 1rem; color: var(--ivory); letter-spacing: .03em; } /* ── KPI Cards ────────────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; margin-bottom: 22px; } .kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--kpi-c, var(--gold)); } .kpi-card.c-gold { --kpi-c: var(--gold); } .kpi-card.c-green { --kpi-c: var(--green); } .kpi-card.c-blue { --kpi-c: var(--blue); } .kpi-card.c-red { --kpi-c: var(--red); } .kpi-card.c-orange { --kpi-c: var(--orange); } .kpi-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 7px; } .kpi-val { font-family: var(--font-display); font-size: 1.9rem; color: var(--ivory); line-height: 1; } .kpi-sub { font-size: .7rem; color: var(--muted); margin-top: 5px; } /* ── Tablas ───────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .84rem; } thead th { padding: 9px 13px; text-align: left; color: var(--muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .09em; border-bottom: 1px solid var(--border); font-weight: 500; white-space: nowrap; } tbody td { padding: 11px 13px; border-bottom: 1px solid rgba(44,44,44,.6); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: rgba(255,255,255,.018); } /* ── Formularios ──────────────────────────────────────────────── */ .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 6px; font-weight: 500; } .form-control, .form-group input, .form-group select, .form-group textarea { width: 100%; background: #111; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ivory); font-family: var(--font-body); font-size: .88rem; padding: 9px 12px; outline: none; transition: border-color .2s, box-shadow .2s; } .form-control:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,74,.1); } .form-group select option { background: #1e1e1e; } .form-group textarea { resize: vertical; min-height: 70px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width:520px) { .form-grid-2 { grid-template-columns: 1fr; } } /* ── Alertas ──────────────────────────────────────────────────── */ .alert { padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: .85rem; } .alert-error { background: rgba(239,68,68,.1); color: #fca5a5; border-left: 3px solid var(--red); } .alert-success { background: rgba(34,197,94,.1); color: #86efac; border-left: 3px solid var(--green); } .alert-info { background: rgba(59,130,246,.1); color: #93c5fd; border-left: 3px solid var(--blue); } .alert-warn { background: rgba(251,191,36,.1); color: #fde68a; border-left: 3px solid var(--yellow); } /* ── Modales ──────────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 9000; align-items: center; justify-content: center; padding: 16px; } .modal-overlay.open { display: flex; } .modal-box { background: var(--card); border: 1px solid var(--gold-border); border-radius: var(--radius); padding: 28px; width: 100%; max-width: 480px; position: relative; animation: slideUp .28s ease both; max-height: 92vh; overflow-y: auto; } .modal-box::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 999px; } .modal-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold); margin-bottom: 18px; letter-spacing: .04em; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } /* ── Ticket ───────────────────────────────────────────────────── */ .ticket-card { border: 2px dashed var(--gold); border-radius: var(--radius); padding: 28px 20px 22px; text-align: center; background: var(--surface); position: relative; } .ticket-card::before { content: 'LEGADO BARBERSHOP'; position: absolute; top: 9px; left: 0; right: 0; font-size: .58rem; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; } .ticket-number { font-family: var(--font-display); font-size: 4.5rem; color: var(--gold); line-height: 1; text-shadow: 0 0 40px rgba(201,162,74,.25); } .ticket-service { font-size: 1.05rem; color: var(--ivory); margin-top: 6px; } .ticket-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-light); margin-top: 6px; } .ticket-meta { color: var(--muted); font-size: .78rem; margin-top: 10px; line-height: 1.6; } /* ── Page header ──────────────────────────────────────────────── */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .page-title { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); letter-spacing: .04em; line-height: 1; } .page-subtitle { font-size: .73rem; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; margin-top: 3px; } /* ── Animaciones ──────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } @keyframes slideUp { from { opacity:0; transform:translateY(26px) scale(.97); } to { opacity:1; transform:none; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse-gold { 0%,100% { box-shadow: 0 0 0 0 rgba(201,162,74,.35); } 50% { box-shadow: 0 0 0 10px rgba(201,162,74,0); } } .animate-in { animation: fadeUp .4s ease both; } /* ── Loader / spinner ─────────────────────────────────────────── */ .loader { display:flex; align-items:center; justify-content:center; padding:36px; color:var(--muted); font-size:.82rem; gap:9px; } .spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; } /* ── Navbar (barber.php / caja.php) ──────────────────────────── */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 0 26px; height: 62px; background: var(--surface); border-bottom: 1px solid var(--gold-border); position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 18px rgba(0,0,0,.4); } .navbar-brand { display:flex; align-items:center; gap:11px; text-decoration:none; } .navbar-brand h1 { font-family:var(--font-display); font-size:1.25rem; color:var(--gold); letter-spacing:.07em; line-height:1; } .navbar-brand span{ display:block; font-size:.58rem; color:var(--muted); letter-spacing:.2em; text-transform:uppercase; margin-top:2px; } .navbar-nav { display:flex; align-items:center; gap:3px; } .navbar-nav a { display:flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--radius-sm); text-decoration:none; color:var(--muted); font-size:.82rem; font-weight:500; transition:background .18s, color .18s; } .navbar-nav a:hover { background:var(--gold-pale); color:var(--ivory); } .navbar-nav a.active { background:var(--gold-pale); color:var(--gold); } .navbar-user { display:flex; align-items:center; gap:12px; } .navbar-user .uname { font-size:.8rem; color:var(--muted); } .navbar-user .urole { font-size:.68rem; background:var(--gold-pale); color:var(--gold); padding:2px 10px; border-radius:999px; } .btn-logout { background:rgba(239,68,68,.1); color:#fca5a5; border-radius:var(--radius-sm); padding:6px 12px; font-size:.76rem; font-weight:600; text-decoration:none; transition:background .2s; } .btn-logout:hover { background:rgba(239,68,68,.2); } /* ── .main wrapper ────────────────────────────────────────────── */ .main { padding: 26px 28px; } @media (max-width:768px) { .main { padding: 14px; } } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width:768px) { .hide-mobile { display:none !important; } .kpi-grid { grid-template-columns: 1fr 1fr; } .navbar { padding: 0 14px; } } /* ── Ornament divider ─────────────────────────────────────────── */ .ornament { display:flex; align-items:center; gap:10px; color:rgba(201,162,74,.3); margin:18px 0; } .ornament::before, .ornament::after { content:''; flex:1; height:1px; background:rgba(201,162,74,.14); } /* ════════════════════════════════════════════════════════════════ LAYOUT SIDEBAR (index.php dashboard SPA) ════════════════════════════════════════════════════════════════ */ /* Sidebar */ body.sidebar-layout { display:flex; min-height:100vh; overflow-x:hidden; } .sidebar { width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top:0; left:0; bottom:0; z-index: 100; transition: transform .3s; } .sidebar-brand { padding: 24px 18px 18px; border-bottom: 1px solid var(--border); } .sidebar-brand h2 { font-family:var(--font-display); color:var(--gold); font-size:1.4rem; letter-spacing:.05em; line-height:1; } .sidebar-brand p { color:var(--muted); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; } nav { padding: 12px 8px; flex: 1; overflow-y: auto; } .nav-group-label { font-size:.65rem; color:var(--muted); padding:12px 12px 4px; letter-spacing:.1em; text-transform:uppercase; } nav a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--muted); font-size: .85rem; font-weight: 500; transition: background .15s, color .15s; margin-bottom: 1px; } nav a .ico { font-size: 1rem; width: 20px; text-align: center; } nav a:hover { background: rgba(201,162,74,.07); color: var(--ivory); } nav a.active { background: rgba(201,162,74,.13); color: var(--gold); } .sidebar-footer { padding: 12px 10px; border-top: 1px solid var(--border); } .user-chip { display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:9px; background:rgba(255,255,255,.04); } .avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-light)); display:flex; align-items:center; justify-content:center; color:var(--black); font-weight:700; font-size:.8rem; flex-shrink:0; } .user-chip .info strong { display:block; font-size:.8rem; color:var(--ivory); } .user-chip .info span { font-size:.68rem; color:var(--muted); } .btn-out { display:block; text-align:center; margin-top:8px; padding:7px; border-radius:8px; background:rgba(239,68,68,.1); color:#fca5a5; text-decoration:none; font-size:.76rem; font-weight:600; } .btn-out:hover { background: rgba(239,68,68,.2); } /* Main area */ .main-spa { margin-left:220px; flex:1; padding:26px 28px; min-height:100vh; } /* Page header inside SPA */ .ph { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:10px; } .ph h1 { font-family:var(--font-display); font-size:1.75rem; color:var(--gold); letter-spacing:.04em; } .ph .sub{ font-size:.75rem; color:var(--muted); letter-spacing:.07em; text-transform:uppercase; } /* SPA sections */ .section { display: none; } .section.active { display: block; } /* KPI row inside SPA (class .kpi to avoid conflict with .kpi-card) */ .kpi-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:22px; } .kpi { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; position:relative; overflow:hidden; transition:transform .2s; } .kpi:hover { transform: translateY(-2px); } .kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--ka, var(--gold)); } .kpi.g { --ka: var(--green); } .kpi.b { --ka: var(--blue); } .kpi.r { --ka: var(--red); } .kpi.o { --ka: var(--orange); } .kpi .lbl { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; } .kpi .val { font-family:var(--font-display); font-size:1.9rem; color:var(--ivory); line-height:1; } .kpi .sub { font-size:.7rem; color:var(--muted); margin-top:4px; } /* Grid helpers */ .g2 { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; } .g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; } /* Appointment rows */ .apt { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; background:rgba(255,255,255,.03); border-left:3px solid var(--gold); margin-bottom:6px; } .apt.completada { border-left-color: var(--green); opacity: .65; } .apt.cancelada { border-left-color: var(--red); opacity: .5; } .apt.en_atencion { border-left-color: var(--blue); } .apt-time { font-family:var(--font-display); font-size:1.05rem; color:var(--gold); width:44px; flex-shrink:0; } .apt-body { flex:1; min-width:0; } .apt-name { font-size:.86rem; font-weight:600; } .apt-svc { font-size:.72rem; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .apt-price { font-family:var(--font-display); font-size:1.05rem; color:var(--gold-light); } .apt-acts { display:flex; gap:5px; } /* Fidelidad dots */ .fid-bar { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; } .fid-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; } .fid-dot.done { background:var(--gold); color:var(--black); } .fid-dot.empty { background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); } .fid-dot.free { background:var(--green); color:#000; animation:pulse-gold 1.5s infinite; } /* Mobile sidebar toggle */ .m-toggle { display: none; position: fixed; top:12px; left:12px; z-index:200; background:var(--card); border:1px solid var(--border); color:var(--gold); padding:7px 9px; border-radius:8px; cursor:pointer; font-size:1.1rem; } /* Responsive SPA */ @media (max-width:900px) { body.sidebar-layout .sidebar { transform: translateX(-100%); } body.sidebar-layout .sidebar.open { transform: translateX(0); } body.sidebar-layout .main-spa { margin-left:0; padding:70px 14px 20px; } .g2, .g3 { grid-template-columns: 1fr; } .m-toggle { display: block; } } /* ════════════════════════════════════════════════════════════════ LAYOUT SIDEBAR COMPARTIDO (barberos, clientes, reportes) Mismo sidebar lateral que usa el SPA pero como páginas dedicadas. ════════════════════════════════════════════════════════════════ */ body.page-layout { display: flex; min-height: 100vh; } /* Sidebar de páginas dedicadas — misma estructura que SPA */ .sidebar { /* ya definido en LAYOUT SIDEBAR arriba */ } /* Main de páginas dedicadas */ .page-main { margin-left: 210px; flex: 1; padding: 26px 28px; } /* ── Barbero card (barberos.php) ───────────────────────────── */ .barb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap: 16px; margin-bottom: 20px; } .barb-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; } .barb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); } .barb-card.inactivo { opacity: .55; } .barb-card::before { content: ''; position: absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); } .barb-card.inactivo::before { background: var(--border); } .barb-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; } .barb-avatar { width:46px; height:46px; border-radius:50%; flex-shrink:0; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:1.3rem; color:var(--black); font-weight:700; } .barb-nombre { font-weight:600; font-size:.96rem; color:var(--ivory); } .barb-user { font-size:.72rem; color:var(--muted); margin-top:2px; } .barb-esp { font-size:.74rem; color:var(--gold); margin-top:1px; } .barb-stats { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; } .bstat { background: rgba(255,255,255,.03); border-radius:8px; padding:9px 10px; text-align:center; } .bstat .bval{ font-family:var(--font-display); font-size:1.15rem; color:var(--ivory); line-height:1; } .bstat .blbl{ font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; } .barb-acts { display:flex; gap:8px; flex-wrap:wrap; } /* ── Form panel ────────────────────────────────────────────── */ .form-panel { background:var(--card); border:1px solid var(--gold-border); border-radius:var(--radius); padding:24px 26px; margin-bottom:22px; position:relative; } .form-panel::before { content:''; position:absolute; top:0; left:10%; right:10%; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); border-radius:999px; } /* ── Clientes fidelidad dots ────────────────────────────────── */ .fid-row { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; } .fid-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; flex-shrink:0; } .fd-done { background:var(--gold); color:var(--black); } .fd-next { background:var(--green); color:#000; animation:pulse-gold 1.8s infinite; } .fd-empty { background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--muted); } /* ── Reportes filtros ──────────────────────────────────────── */ .filtros { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin-bottom:22px; } .filtros form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; } .filtros .fg { display:flex; flex-direction:column; gap:5px; } .filtros label { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; } .filtros input, .filtros select { background:#111; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--ivory); padding:8px 11px; font-size:.84rem; font-family:var(--font-body); outline:none; } .filtros input:focus, .filtros select:focus { border-color: var(--gold); } /* ── Ranking progress bars ─────────────────────────────────── */ .prog-bar { height:5px; border-radius:999px; background:var(--border); margin-top:5px; overflow:hidden; } .prog-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--gold-light)); } /* ── Historial header (clientes.php) ───────────────────────── */ .hist-header { background: linear-gradient(135deg, rgba(201,162,74,.1), rgba(201,162,74,.04)); border: 1px solid var(--gold-border); border-radius:var(--radius); padding: 20px 24px; margin-bottom:18px; } /* ── Responsive páginas dedicadas ──────────────────────────── */ @media (max-width: 900px) { body.page-layout .sidebar { transform: translateX(-100%); } body.page-layout .sidebar.open { transform: translateX(0); } body.page-layout .page-main { margin-left: 0; padding: 70px 14px 20px; } .barb-stats { grid-template-columns: 1fr 1fr; } }