/* ====================================================================== JOVI SYSTEM · Prestamos Pro Tema: seguridad + tecnologia. Mobile-first (celular/tablet primero). ====================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap'); :root { --receipt-width: 300px; /* Paleta de marca — derivada del logo Jovi System */ --bg: #060a12; --bg-elevated: #0a1220; --panel: #0e1726; --panel-soft: #131f33; --panel-hover: #17253c; --line: #1e2c44; --line-bright: #2a3d5c; --text: #eef4fc; --muted: #8998b3; --muted-soft: #5f6f8c; --primary: #22d3ee; --primary-soft: #67e8f9; --primary-dark: #0e93ac; --accent: #3b82f6; --warning: #f5a524; --danger: #f43f5e; --success: #2dd4bf; --glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 24px rgba(34, 211, 238, 0.18); --shadow: 0 18px 40px rgba(0, 0, 0, 0.45); --shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.55); --radius: 14px; --radius-sm: 10px; --font-display: "Space Grotesk", "Inter", sans-serif; --font-body: "Inter", "Segoe UI", sans-serif; } /* --------------------------------------------------------------------- Tema claro — se activa poniendo data-theme="light" en --------------------------------------------------------------------- */ [data-theme="light"] { --bg: #f2f5fa; --bg-elevated: #ffffff; --panel: #ffffff; --panel-soft: #f8fafc; --panel-hover: #eef2f8; --line: #dfe6f0; --line-bright: #c7d2e2; --text: #101828; --muted: #5b6b82; --muted-soft: #8b98ab; --glow-cyan: 0 0 0 1px rgba(14, 147, 172, 0.3), 0 0 20px rgba(14, 147, 172, 0.12); --shadow: 0 12px 28px rgba(30, 41, 59, 0.10); --shadow-lift: 0 20px 45px rgba(30, 41, 59, 0.16); } [data-theme="light"] body { background: radial-gradient(1100px 560px at 12% -8%, rgba(34, 211, 238, 0.09), transparent 60%), radial-gradient(900px 480px at 100% 0%, rgba(59, 130, 246, 0.06), transparent 55%), var(--bg); } [data-theme="light"] html { color-scheme: light; } [data-theme="light"] .login-screen { background: radial-gradient(700px 420px at 50% 0%, rgba(34, 211, 238, 0.12), transparent 60%), #eef2f8; } [data-theme="light"] .login-screen::before { background-image: linear-gradient(rgba(14, 147, 172, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 147, 172, 0.10) 1px, transparent 1px); } [data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.97); } [data-theme="light"] .sidebar-overlay { background: rgba(15, 23, 42, 0.32); } [data-theme="light"] .modal { background: rgba(15, 23, 42, 0.4); } [data-theme="light"] .modal-card { box-shadow: 0 -20px 50px rgba(30, 41, 59, 0.18); } [data-theme="light"] .theme-toggle svg .sun { display: block; } [data-theme="light"] .theme-toggle svg .moon { display: none; } .theme-toggle svg .sun { display: none; } .theme-toggle svg .moon { display: block; } * { box-sizing: border-box; } ::selection { background: rgba(34, 211, 238, 0.25); color: #fff; } html { color-scheme: dark; } body { margin: 0; min-height: 100vh; background: radial-gradient(1100px 560px at 12% -8%, rgba(34, 211, 238, 0.10), transparent 60%), radial-gradient(900px 480px at 100% 0%, rgba(59, 130, 246, 0.08), transparent 55%), var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } body.locked .sidebar, body.locked .app { display: none; } /* --------------------------------------------------------------------- Aviso de instalar app --------------------------------------------------------------------- */ .install-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 70; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: rgba(10, 16, 28, 0.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-bright); transform: translateY(-100%); transition: transform 0.25s ease; } .install-banner.show { transform: translateY(0); } .install-banner-inner { display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 0 auto; } .install-banner-logo { width: 34px; height: 34px; flex-shrink: 0; } .install-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .install-banner-text strong { font-family: var(--font-display); font-size: 13px; color: #fff; } .install-banner-text span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .install-banner-close { width: 32px; min-height: 32px; flex-shrink: 0; } /* --------------------------------------------------------------------- Marca / brand --------------------------------------------------------------------- */ .brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; } .brand-mark { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #000; border: 1px solid rgba(34, 211, 238, 0.5); box-shadow: var(--glow-cyan); overflow: hidden; flex-shrink: 0; } .brand-mark img { width: 100%; height: 100%; object-fit: cover; } .brand strong, .brand span { display: block; font-family: var(--font-display); } .brand strong { font-size: 17px; font-weight: 700; letter-spacing: 0.3px; color: var(--text); } .brand span { color: var(--muted); font-size: 12px; font-family: var(--font-body); font-weight: 500; } /* --------------------------------------------------------------------- Login --------------------------------------------------------------------- */ .login-screen { min-height: 100vh; display: grid; place-items: center; padding: 22px; position: relative; overflow: hidden; background: radial-gradient(700px 420px at 50% 0%, rgba(34, 211, 238, 0.14), transparent 60%), #05080f; } .login-screen::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.08) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at 50% 20%, black, transparent 72%); } .login-screen.hidden { display: none; } .login-card { position: relative; z-index: 1; width: min(100%, 400px); padding: 30px 26px; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-soft), var(--panel)); border: 1px solid var(--line-bright); box-shadow: var(--shadow-lift); } .login-brand { margin-bottom: 26px; } .login-brand .brand-mark { width: 56px; height: 56px; } .login-brand strong { font-size: 20px; } .login-help { margin: 16px 0 0; text-align: center; } /* --------------------------------------------------------------------- Controles base --------------------------------------------------------------------- */ button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; font-family: var(--font-body); } input, select, textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); } input::placeholder, textarea::placeholder { color: var(--muted-soft); } input:focus, select:focus, textarea:focus, button:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22); } textarea { resize: vertical; } /* --------------------------------------------------------------------- Menu lateral deslizante (movil/tablet) / fijo (escritorio) --------------------------------------------------------------------- */ .sidebar-overlay { position: fixed; inset: 0; z-index: 75; background: rgba(3, 6, 12, 0.6); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .sidebar-overlay.show { opacity: 1; pointer-events: auto; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(84vw, 290px); height: 100%; padding: calc(20px + env(safe-area-inset-top)) 16px 20px; background: rgba(10, 16, 28, 0.98); backdrop-filter: blur(14px); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 26px; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; } .sidebar.open { transform: translateX(0); } .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sidebar-close { flex-shrink: 0; } .nav { display: flex; flex-direction: column; gap: 4px; } .nav-item { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; text-align: left; font-weight: 700; font-size: 14px; } .nav-item span { display: block; } .nav-item svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; } .nav-item:hover { color: var(--text); background: var(--panel-hover); } .nav-item.active { color: var(--primary-soft); background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), transparent); border-left: 3px solid var(--primary); padding-left: 10px; } .menu-toggle { flex-shrink: 0; } .topbar-title-row { display: flex; align-items: center; gap: 12px; } .app { padding: 18px 14px 28px; position: relative; } .topbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .topbar .top-actions { width: 100%; } .eyebrow { margin: 0 0 4px; color: var(--primary); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; font-family: var(--font-display); } h1, h2, p { margin-top: 0; font-family: var(--font-display); } p { font-family: var(--font-body); } h1 { margin-bottom: 0; font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: 0.2px; } h2 { font-size: 16px; font-weight: 700; margin-bottom: 14px; color: var(--text); } /* --------------------------------------------------------------------- Botones --------------------------------------------------------------------- */ .top-actions, .toolbar, .button-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .primary-btn, .ghost-btn, .link-btn, .file-btn, .icon-btn { border: 0; border-radius: var(--radius-sm); min-height: 46px; padding: 11px 18px; font-weight: 700; font-family: var(--font-body); transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; } .primary-btn { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #04222a; box-shadow: 0 10px 24px rgba(34, 211, 238, 0.25); } .primary-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(34, 211, 238, 0.35); } .primary-btn:active { transform: translateY(0); } .ghost-btn { background: var(--panel-soft); color: var(--text); border: 1px solid var(--line-bright); } .ghost-btn:hover { background: var(--panel-hover); border-color: var(--primary-dark); } .link-btn { background: transparent; color: var(--primary); padding-inline: 6px; min-height: auto; } .icon-btn { width: 40px; min-height: 40px; padding: 0; background: var(--panel-soft); color: var(--muted); border: 1px solid var(--line); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { color: var(--text); border-color: var(--primary-dark); } .file-btn { display: inline-flex; align-items: center; background: var(--panel-soft); color: var(--text); border: 1px dashed var(--line-bright); } .file-btn input { display: none; } .full { width: 100%; } /* --------------------------------------------------------------------- Vistas --------------------------------------------------------------------- */ .view { display: none; } .view.active { display: block; animation: fadeUp 0.25s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------------- Metricas --------------------------------------------------------------------- */ .metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .metric-card, .panel, .loan-card, .due-card { background: linear-gradient(180deg, var(--panel-soft), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .metric-card { padding: 16px; position: relative; overflow: hidden; } .metric-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--primary), transparent); } .metric-card span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .metric-card strong { display: block; margin-top: 8px; font-size: 21px; font-family: var(--font-display); color: var(--text); } .metric-card.danger::before { background: linear-gradient(90deg, var(--danger), transparent); } /* --------------------------------------------------------------------- Layout de contenido --------------------------------------------------------------------- */ .content-grid, .settings-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .panel { padding: 16px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .panel-head h2 { margin-bottom: 0; } .toolbar { margin-bottom: 14px; } .toolbar input, .toolbar select { width: 100%; } /* --------------------------------------------------------------------- Tablas --------------------------------------------------------------------- */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; min-width: 560px; } th, td { padding: 12px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; } td { font-size: 14px; } tbody tr:hover { background: rgba(34, 211, 238, 0.04); } .panel-table { background: linear-gradient(180deg, var(--panel-soft), var(--panel)); border-radius: var(--radius); border: 1px solid var(--line); } /* --------------------------------------------------------------------- Tablas -> tarjetas apiladas en celular (nada de scroll horizontal) --------------------------------------------------------------------- */ @media (max-width: 639px) { .responsive-cards.table-wrap-marker { /* clase auxiliar, no se usa directamente */ } table.responsive-cards { min-width: 0; border: 0; } table.responsive-cards thead { display: none; } table.responsive-cards, table.responsive-cards tbody { display: block; width: 100%; } table.responsive-cards tr { display: block; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elevated); } table.responsive-cards tr:last-child { margin-bottom: 0; } table.responsive-cards td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border: 0; text-align: right; } table.responsive-cards td:not(:last-child) { border-bottom: 1px dashed var(--line); } table.responsive-cards td::before { content: attr(data-label); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); text-align: left; flex-shrink: 0; } table.responsive-cards td[data-label=""]::before, table.responsive-cards td:not([data-label])::before { content: none; } table.responsive-cards td:not([data-label]) { justify-content: flex-start; } } /* --------------------------------------------------------------------- Tarjetas de prestamo / vencimiento --------------------------------------------------------------------- */ .loan-grid, .due-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .loan-card, .due-card { padding: 16px; } .loan-head, .due-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .loan-head h3, .due-head h3 { margin: 0; font-size: 16px; font-family: var(--font-display); color: var(--text); } .loan-code, .muted { color: var(--muted); font-size: 12.5px; } .loan-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; } .mini-stat { padding: 10px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-sm); } .mini-stat span, .mini-stat strong { display: block; } .mini-stat span { color: var(--muted); font-size: 10.5px; text-transform: uppercase; } .mini-stat strong { margin-top: 4px; font-family: var(--font-display); font-size: 14px; } .progress { height: 8px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary-dark), var(--primary)); box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); } .status { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.3px; border: 1px solid transparent; white-space: nowrap; } .status.active { background: rgba(45, 212, 191, 0.12); color: #5eead4; border-color: rgba(45, 212, 191, 0.35); } .status.late { background: rgba(244, 63, 94, 0.12); color: #fda4af; border-color: rgba(244, 63, 94, 0.35); } .status.closed { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border-color: rgba(59, 130, 246, 0.35); } .status.in-process { background: rgba(245, 165, 36, 0.14); color: #fbbf24; border-color: rgba(245, 165, 36, 0.4); } .compact-select { min-height: 34px; padding: 6px 8px; font-size: 11.5px; width: auto; } .daily-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 6px; height: 160px; padding-top: 22px; } .daily-chart-col { display: flex; flex-direction: column; align-items: center; height: 100%; } .daily-chart-value { font-size: 9.5px; color: var(--muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .daily-chart-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .daily-chart-bar { width: 60%; min-width: 10px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--primary-dark), var(--line-bright)); transition: height 0.3s ease; } .daily-chart-bar.today { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); box-shadow: 0 0 12px rgba(34, 211, 238, 0.4); } .daily-chart-day { margin-top: 6px; font-size: 10px; color: var(--muted); text-transform: capitalize; } .daily-chart-day.today { color: var(--primary-soft); font-weight: 700; } .stack-list { display: grid; gap: 10px; } .stack-item { display: flex; justify-content: space-between; gap: 14px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--line); } .stack-item strong, .stack-item span { display: block; } /* --------------------------------------------------------------------- Formularios --------------------------------------------------------------------- */ .form-row { display: grid; grid-template-columns: 1fr; gap: 4px; } label, .field-label { display: grid; gap: 6px; margin-bottom: 12px; color: #b8c4d9; font-size: 12.5px; font-weight: 700; } /* --------------------------------------------------------------------- Modales --------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-end; justify-content: center; padding: 0; background: rgba(3, 6, 12, 0.72); backdrop-filter: blur(3px); } .modal.open { display: flex; } .modal-card { width: 100%; max-height: 92vh; overflow-y: auto; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: linear-gradient(180deg, var(--panel-soft), var(--panel)); border: 1px solid var(--line-bright); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55); } .modal-card.wide, .modal-card.extra-wide { width: 100%; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .modal-head h2 { margin-bottom: 0; } /* --------------------------------------------------------------------- Toast --------------------------------------------------------------------- */ .toast { position: fixed; left: 14px; right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 60; display: none; margin: 0 auto; max-width: 420px; padding: 13px 16px; border-radius: var(--radius-sm); background: #0c1524; color: #fff; border: 1px solid var(--primary-dark); box-shadow: var(--glow-cyan), var(--shadow); font-weight: 600; font-size: 14px; } .toast.show { display: block; animation: fadeUp 0.2s ease; } .empty { padding: 18px; color: var(--muted); background: var(--bg-elevated); border: 1px dashed var(--line); border-radius: var(--radius-sm); text-align: center; font-size: 13.5px; } .danger-text { color: #fda4af; } .action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .danger-btn { background: rgba(244, 63, 94, 0.12); color: #fda4af; border: 1px solid rgba(244, 63, 94, 0.35); } .danger-btn:hover { background: rgba(244, 63, 94, 0.2); } .success-btn { background: rgba(45, 212, 191, 0.12); color: #5eead4; border: 1px solid rgba(45, 212, 191, 0.35); } .success-btn:hover { background: rgba(45, 212, 191, 0.2); } .compact-btn { min-height: 36px; padding: 8px 12px; font-size: 12px; } .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .detail-box { padding: 12px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--line); } .detail-box span, .detail-box strong { display: block; } .detail-box span { color: var(--muted); font-size: 11px; text-transform: uppercase; } .detail-box strong { margin-top: 4px; font-family: var(--font-display); } /* --------------------------------------------------------------------- Recibo (impresion en claro, se ve como papel) --------------------------------------------------------------------- */ .receipt { color: #111827; } .receipt h2 { margin-bottom: 4px; text-align: center; color: #111827; font-family: var(--font-display); } .receipt-meta { display: grid; gap: 6px; margin: 18px 0; padding: 14px; border: 1px solid #d9e1ec; border-radius: var(--radius-sm); background: #fff; } .receipt-total { padding: 14px; margin: 16px 0; border-radius: var(--radius-sm); background: #f8fafc; text-align: center; font-size: 22px; font-weight: 900; color: #111827; } .signature-line { margin-top: 40px; padding-top: 12px; border-top: 1px solid #111827; text-align: center; color: #111827; } .modal-card:has(.receipt) { background: #fff; border: none; max-width: var(--receipt-width); margin: 0 auto; } @media print { .modal-card:has(.receipt) { max-width: var(--receipt-width) !important; } } .modal-card:has(.receipt) .modal-head h2 { color: #111827; } .modal-card:has(.receipt) .icon-btn { background: #f1f5f9; color: #111827; border-color: #d9e1ec; } .mini-form { margin-top: 14px; } .compact-table { min-width: 380px; } .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* --------------------------------------------------------------------- Impresion --------------------------------------------------------------------- */ @media print { body { background: #fff; padding-bottom: 0; } .sidebar, .topbar, .no-print, .toast { display: none !important; } .app { margin: 0; padding: 0; } .modal { position: static; display: block !important; padding: 0; background: #fff; } .modal-card { box-shadow: none; border: 0; max-height: none; width: 100%; border-radius: 0; } } /* ====================================================================== TABLET — 640px en adelante ====================================================================== */ @media (min-width: 640px) { .login-card { width: min(100%, 420px); padding: 34px 32px; } .app { padding: 24px 24px 32px; } .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-row { grid-template-columns: 1fr 1fr; } .loan-grid, .due-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-grid, .report-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } .topbar { flex-direction: row; align-items: center; justify-content: space-between; } .topbar .top-actions { width: auto; } h1 { font-size: 28px; } .modal { align-items: center; padding: 20px; } .modal-card { width: min(100%, 560px); border-radius: var(--radius); max-height: 90vh; } .modal-card.wide { width: min(100%, 700px); } .modal-card.extra-wide { width: min(100%, 900px); } .toast { left: auto; right: 24px; bottom: 24px; margin: 0; } } /* ====================================================================== ESCRITORIO — 1024px en adelante (sidebar fija en vez de dock) ====================================================================== */ @media (min-width: 1024px) { .sidebar-overlay { display: none; } .menu-toggle { display: none; } .sidebar-close { display: none; } .sidebar { width: 250px; transform: none; box-shadow: none; } .app { margin-left: 250px; padding: 34px 36px; } .content-grid { grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr); } .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metrics-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .loan-grid, .due-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .modal { padding: 24px; } }