/* public/assets/css/app.css */ /* ========================= Base (común) ========================= */ :root{ --radius: 16px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; --ring: 0 0 0 4px rgba(96,165,250,.25); } *{ box-sizing:border-box; } html, body { height:100%; } a{ text-decoration:none; } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; } } /* Utilidades */ .u-muted{ color: var(--muted); } /* ========================= LOGIN (scoped) Agrega: ========================= */ body.page-login{ --bg: #25054d; --surface: rgba(255,255,255,.08); --surface-2: rgba(255,255,255,.12); --border: rgba(255,255,255,.14); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.70); --primary: #60a5fa; --primary-2: #3b82f6; --danger: #ef4444; --shadow: 0 24px 80px rgba(0,0,0,.45); margin:0; font-family: var(--font); color: var(--text); background: radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,.28), transparent 55%), radial-gradient(900px 500px at 90% 30%, rgba(96,165,250,.20), transparent 60%), radial-gradient(900px 600px at 50% 110%, rgba(16,185,129,.12), transparent 55%), var(--bg); display:grid; place-items:center; padding: 24px; } .page-login .auth{ width:100%; max-width: 440px; background: linear-gradient(180deg, var(--surface), rgba(255,255,255,.06)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow:hidden; } .page-login .auth__inner{ padding: 28px; } .page-login .brand{ display:flex; flex-direction:column; align-items:center; gap: 12px; margin-bottom: 18px; text-align:center; } .page-login .brand__logo{ width: 72px; height: 72px; border-radius: 18px; background: rgba(255,255,255,.10); border: 1px solid var(--border); display:grid; place-items:center; overflow:hidden; } .page-login .brand__logo img{ width: 100%; height: 100%; object-fit: contain; padding: 10px; } .page-login .brand__title{ margin:0; font-size: 22px; letter-spacing: .2px; line-height: 1.2; } .page-login .brand__subtitle{ margin:0; font-size: 13px; color: var(--muted); } .page-login form{ display:grid; gap: 14px; margin-top: 18px; } .page-login .field{ display:grid; gap: 8px; } .page-login label{ font-size: 13px; color: var(--muted); } .page-login .control{ position:relative; } .page-login input{ width:100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,0,0,.18); color: var(--text); outline: none; font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .page-login input::placeholder{ color: rgba(255,255,255,.42); } .page-login input:focus{ border-color: rgba(96,165,250,.6); box-shadow: var(--ring); background: rgba(0,0,0,.26); } .page-login .control__btn{ position:absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); padding: 6px 8px; border-radius: 10px; cursor: pointer; } .page-login .control__btn:focus{ outline:none; box-shadow: var(--ring); } .page-login .row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; } .page-login .check{ display:flex; align-items:center; gap: 10px; font-size: 13px; color: var(--muted); user-select:none; } .page-login .check input{ width: 18px; height: 18px; margin:0; accent-color: var(--primary-2); } .page-login a{ color: var(--primary); font-size: 13px; } .page-login a:hover{ text-decoration: underline; } .page-login .btn{ width:100%; border: 0; border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 14px; color: #08111f; background: linear-gradient(180deg, var(--primary), var(--primary-2)); cursor: pointer; transition: transform .05s ease, filter .15s ease; } .page-login .btn:active{ transform: translateY(1px); } .page-login .btn:disabled{ cursor:not-allowed; filter: grayscale(.2) opacity(.75); } .page-login .msg{ min-height: 18px; font-size: 13px; color: var(--danger); } .page-login .footer{ padding: 14px 28px 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; text-align:center; } /* ========================= DASHBOARD (scoped) Agrega: ========================= */ .page-dashboard .brand-logo{ width: 60px; height: 60px; border-radius: 12px; object-fit: contain; background: #eef2ff; border: 1px solid var(--border); padding: 6px; } body.page-dashboard{ --bg:#f8fafc; --surface:#fff; --border:#e2e8f0; --text:#0f172a; --muted:#64748b; --primary:#2563eb; --shadow: 0 10px 30px rgba(2,6,23,.08); margin:0; font-family: var(--font); background: var(--bg); color: var(--text); } .page-dashboard a{ color:inherit; } .page-dashboard .app{ min-height:100vh; display:grid; grid-template-columns:260px 1fr; } .page-dashboard .sidebar{ background:var(--surface); border-right:1px solid var(--border); padding:18px; position:sticky; top:0; height:100vh; } .page-dashboard .brand{ display:flex; gap:12px; align-items:center; margin-bottom:18px; } .page-dashboard .logo{ width:40px; height:40px; border-radius:12px; background:#eef2ff; border:1px solid var(--border); } .page-dashboard .brand h1{ font-size:14px; margin:0; } .page-dashboard .brand p{ margin:2px 0 0; font-size:12px; color:var(--muted); } .page-dashboard .nav{ display:grid; gap:6px; margin-top:12px; } .page-dashboard .nav a{ padding:10px 12px; border-radius:12px; color:var(--text); } .page-dashboard .nav a:hover{ background:#f1f5f9; } .page-dashboard .nav a.active{ background:#eaf2ff; color:#0b2a7a; border:1px solid #cfe0ff; } .page-dashboard .sidebar__actions{ margin-top:18px; } .page-dashboard .main{ display:flex; flex-direction:column; min-width:0; } .page-dashboard .topbar{ height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--border); background:rgba(248,250,252,.85); backdrop-filter: blur(6px); position:sticky; top:0; } .page-dashboard .topbar__title{ font-size:13px; } .page-dashboard .user{ display:flex; flex-direction:column; align-items:flex-end; } .page-dashboard .user strong{ font-size:13px; } .page-dashboard .user span{ font-size:12px; color:var(--muted); } .page-dashboard .content{ padding:20px; max-width:1100px; width:100%; } .page-dashboard .page-title{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:12px 0 18px; } .page-dashboard .page-title h2{ margin:0; font-size:22px; } .page-dashboard .page-title p{ margin:6px 0 0; color:var(--muted); font-size:13px; } .page-dashboard .grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:14px; } .page-dashboard .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; min-width:0; } .page-dashboard .card h3{ margin:0 0 10px; font-size:14px; } .page-dashboard .stat{ font-size:28px; font-weight:700; margin:0; } .page-dashboard .hint{ margin:6px 0 0; color:var(--muted); font-size:12px; } .page-dashboard .col-4{ grid-column:span 4; } .page-dashboard .col-8{ grid-column:span 8; } .page-dashboard .col-12{ grid-column:span 12; } .page-dashboard .btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-weight:600; font-size:13px; } .page-dashboard .btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; } .page-dashboard .btn:hover{ filter:brightness(.98); } .page-dashboard .btn.primary:hover{ filter:brightness(.95); } .page-dashboard .table{ width:100%; border-collapse:collapse; } .page-dashboard .table th, .page-dashboard .table td{ padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; font-size:13px; } .page-dashboard .table th{ color:var(--muted); font-weight:600; } .page-dashboard .row-actions{ display:flex; gap:10px; } .page-dashboard .quick-actions{ display:grid; gap:10px; margin-top:10px; } @media (max-width: 1024px){ .page-dashboard .app{ grid-template-columns:1fr; } .page-dashboard .sidebar{ position:relative; height:auto; } } @media (max-width: 720px){ .page-dashboard .col-4, .page-dashboard .col-8{ grid-column:span 12; } .page-dashboard .user{ display:none; } } /* ========================= Session timeout modal ========================= */ .session-timeout-overlay{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 23, .55); z-index: 9999; } .session-timeout-card{ width: 100%; max-width: 420px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 20px 60px rgba(2,6,23,.25); padding: 18px; color: #0f172a; } .session-timeout-title{ margin: 0 0 10px; font-size: 16px; } .session-timeout-text{ margin: 0 0 14px; font-size: 13px; color: #334155; line-height: 1.45; } .session-timeout-actions{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .st-btn{ border: 1px solid #e2e8f0; background: #fff; border-radius: 12px; padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 13px; } .st-btn-primary{ background: #2563eb; border-color: #2563eb; color: #fff; } .st-btn:hover{ filter: brightness(.98); } .st-btn-primary:hover{ filter: brightness(.95); } /* Sidebar como columna para empujar el footer al final */ .page-client-lite .sidebar{ display: flex; flex-direction: column; } /* Header del sidebar */ .page-client-lite .sidebar-header{ display: block; } .page-client-lite .brand-center{ display:flex; justify-content:center; align-items:center; margin-bottom: 10px; } .page-client-lite .brand-center img{ height: 50px; width:auto; display:block; } /* Datos del usuario debajo del logo (en negritas) */ .page-client-lite .session-box{ text-align:center; font-size: 12px; color: rgba(15,23,42,.75); line-height: 1.4; } .page-client-lite .session-box strong{ color: #0f172a; } /* Separador antes del menú */ .page-client-lite .sidebar-sep{ height: 1px; background: rgba(15,23,42,.12); margin: 14px 8px 14px; } /* Footer abajo */ .page-client-lite .sidebar-footer{ margin-top: auto; /* <-- clave para irse al fondo */ padding-top: 18px; display:flex; justify-content:center; } /* Burbuja/logo cliente */ .page-client-lite .client-bubble{ display:flex; justify-content:center; } .page-client-lite .client-bubble .circle{ width: 160px; height: 160px; border-radius: 999px; background: #ffffff; box-shadow: var(--shadow); border: 10px solid rgba(255,255,255,.55); display:grid; place-items:center; overflow:hidden; } .page-client-lite .client-bubble img{ width:100%; height:100%; object-fit:contain; padding: 18px; } .page-client-lite .client-bubble .placeholder{ font-weight: 900; font-size: 18px; text-align:center; line-height: 1.1; } /* ========================= CLIENT DASHBOARD (light) ========================= */ body.page-client-lite{ --bg:#0b2a57; /* franja azul del lado */ --panel:#ffffff; /* fondo principal */ --sidebar:#eae4f7; /* sidebar lila */ --sidebar-2:#d7d4ff; /* hover/active */ --text:#0f172a; --muted:#64748b; --card:#ffffff; --border: rgba(15, 23, 42, .10); --shadow: 0 10px 26px rgba(2,6,23,.12); --accent:#3b82f6; /* azul */ --accent-2:#8b5cf6; /* morado */ margin:0; min-height:100vh; font-family: var(--font); color: var(--text); background: linear-gradient(90deg, var(--bg) 0 72px, var(--panel) 72px 100%); } .page-client-lite .layout{ min-height:100vh; display:grid; grid-template-columns: 260px 1fr; } .page-client-lite .sidebar{ background: var(--sidebar); padding: 22px 18px; position: sticky; top: 0; height: 100vh; border-right: 1px solid rgba(0,0,0,.06); } .page-client-lite .brand{ display:flex; align-items:center; gap: 10px; margin-bottom: 18px; } .page-client-lite .brand img{ height: 26px; width:auto; display:block; } .page-client-lite .nav{ display:grid; gap: 8px; margin-top: 10px; } .page-client-lite .nav a{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 12px 12px; border-radius: 12px; color: var(--text); background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); font-weight: 700; font-size: 14px; } .page-client-lite .nav a small{ font-weight: 800; color: var(--accent); } .page-client-lite .nav a:hover{ background: rgba(255,255,255,.80); } .page-client-lite .nav a.active{ background: #fff; border-color: rgba(59,130,246,.35); box-shadow: 0 0 0 4px rgba(59,130,246,.12); } .page-client-lite .nav .chev{ font-weight: 900; color: rgba(59,130,246,.85); } .page-client-lite .client-bubble{ margin-top: auto; display:grid; place-items:center; padding-top: 30px; } .page-client-lite .client-bubble .circle{ width: 160px; height: 160px; border-radius: 999px; background: #ffffff; box-shadow: var(--shadow); border: 10px solid rgba(255,255,255,.55); display:grid; place-items:center; overflow:hidden; } .page-client-lite .client-bubble img{ width:100%; height:100%; object-fit:contain; padding: 18px; } .page-client-lite .client-bubble .placeholder{ font-weight: 900; font-size: 18px; text-align:center; line-height: 1.1; } /* MAIN */ .page-client-lite .main{ padding: 18px 22px; } .page-client-lite .title{ font-size: 34px; font-weight: 900; text-align:center; margin: 8px 0 18px; } .page-client-lite .toprow{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .page-client-lite .pill{ display:flex; align-items:center; gap: 12px; font-weight: 800; font-size: 18px; } .page-client-lite .pill .box{ width: 70px; height: 32px; background:#fff; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(2,6,23,.10); } .page-client-lite .filter{ width: 360px; max-width: 100%; background:#fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 20px rgba(2,6,23,.10); padding: 10px 12px; display:flex; align-items:center; justify-content:space-between; gap: 10px; } .page-client-lite .filter strong{ font-size: 14px; } .page-client-lite .filter input{ border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 13px; outline:none; } .page-client-lite .filter input:focus{ box-shadow: 0 0 0 4px rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); } /* Cards */ .page-client-lite .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 28px; } .page-client-lite .card{ background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 18px; min-height: 240px; } .page-client-lite .card h3{ margin: 0 0 12px; font-size: 18px; } .page-client-lite .kpi{ display:flex; align-items:center; justify-content:center; height: calc(100% - 32px); font-size: 60px; font-weight: 900; } .page-client-lite .col-4{ grid-column: span 4; } .page-client-lite canvas{ width: 100% !important; height: 180px !important; } /* Responsive */ @media (max-width: 980px){ body.page-client-lite{ background: var(--panel); } .page-client-lite .layout{ grid-template-columns: 1fr; } .page-client-lite .sidebar{ position: relative; height: auto; } .page-client-lite .client-bubble{ padding-top: 16px; } } @media (max-width: 820px){ .page-client-lite .col-4{ grid-column: span 12; } .page-client-lite .title{ font-size: 28px; } } }