/* ====================================================================== 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; --purple: #8b5cf6; --gold: #f0b429; --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; } @keyframes auroraShift{0%,100%{background-position:0% 0%,100% 0%,50% 100%,0% 0%}50%{background-position:30% 20%,70% 30%,30% 70%,0% 0%}} body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .20), transparent 42%), radial-gradient(circle at 88% 12%, rgba(139, 92, 246, .18), transparent 40%), radial-gradient(circle at 50% 100%, rgba(59, 130, 246, .14), transparent 48%), linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 55%, #04060c 100%); background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100%; background-attachment: fixed; animation: auroraShift 16s ease-in-out infinite; 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(circle at 18% 15%, rgba(34, 211, 238, .24) 0%, transparent 42%), radial-gradient(circle at 85% 12%, rgba(139, 92, 246, .22) 0%, transparent 40%), radial-gradient(circle at 25% 90%, rgba(59, 130, 246, .18) 0%, transparent 42%), linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg) 55%, #04060c 100%); } @keyframes loginBlobFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.1)}} @keyframes loginBlobFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.15)}} .login-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.7;pointer-events:none;z-index:0} .login-blob-a{width:420px;height:420px;top:-110px;left:-100px;background:radial-gradient(circle,var(--primary),transparent 70%); animation:loginBlobFloat1 9s ease-in-out infinite} .login-blob-b{width:380px;height:380px;bottom:-90px;right:-90px;background:radial-gradient(circle,var(--purple),transparent 70%); animation:loginBlobFloat2 11s ease-in-out infinite} .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, rgba(19, 31, 51, .68), rgba(14, 23, 38, .72)); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(148, 163, 255, .18); box-shadow: var(--shadow-lift), 0 0 60px rgba(34, 211, 238, .10); } .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; } @keyframes shimmerSweepP{0%{background-position:-150% 0}100%{background-position:250% 0}} .primary-btn { background: linear-gradient(100deg, var(--primary), var(--accent) 55%, var(--purple)); background-size: 220% 100%; color: #04121a; font-weight: 800; box-shadow: 0 10px 24px rgba(34, 211, 238, 0.25); } .primary-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(139, 92, 246, 0.4); animation: shimmerSweepP 1.1s ease; } .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); } @keyframes metricIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes metricPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}} .metric-card { padding: 16px; position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; animation: metricIn .5s cubic-bezier(.4,0,.2,1) backwards; } .metric-card:nth-of-type(1){animation-delay:.02s} .metric-card:nth-of-type(2){animation-delay:.08s} .metric-card:nth-of-type(3){animation-delay:.14s} .metric-card:nth-of-type(4){animation-delay:.2s} .metric-card:nth-of-type(5){animation-delay:.26s} .metric-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(34,211,238,.16)} .metric-card .metric-dot{position:absolute;top:12px;right:12px;width:7px;height:7px;border-radius:50%; background:var(--primary);animation:metricPulse 2.2s ease-in-out infinite} .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); } .metric-card.danger .metric-dot{background:var(--danger)} .metric-card:nth-of-type(2)::before{background:linear-gradient(90deg,var(--accent),transparent)} .metric-card:nth-of-type(2) .metric-dot{background:var(--accent)} .metric-card:nth-of-type(3)::before{background:linear-gradient(90deg,var(--purple),transparent)} .metric-card:nth-of-type(3) .metric-dot{background:var(--purple)} /* --------------------------------------------------------------------- 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 { /* Solo se imprime el recibo. Antes se imprimía toda la aplicación y además TODOS los modales (por el display:block general), y por eso salía una hoja larguísima. */ @page { margin: 0; } html, body { background: #fff !important; background-image: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; } .sidebar, .topbar, .app, .no-print, .toast, .install-banner, .login-screen { display: none !important; } /* Todos los modales ocultos... */ .modal { display: none !important; } /* ...menos el que contiene el recibo */ .modal:has(.receipt) { display: block !important; position: static !important; padding: 0 !important; background: #fff !important; inset: auto !important; } .modal:has(.receipt) .modal-card { box-shadow: none !important; border: 0 !important; max-height: none !important; height: auto !important; width: var(--receipt-width) !important; max-width: var(--receipt-width) !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0 !important; background: #fff !important; overflow: visible !important; } .modal:has(.receipt) .modal-head { display: none !important; } .receipt { width: 100% !important; background: #fff !important; color: #111 !important; page-break-inside: avoid; } } /* ====================================================================== 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; } } /* ====================================================================== COLOR Y MOVIMIENTO — cada módulo con su identidad ====================================================================== */ /* Un color propio por módulo: se reconocen de un vistazo */ .nav-item[data-view="dashboard"] { --mod: #22d3ee; } .nav-item[data-view="loans"] { --mod: #3b82f6; } .nav-item[data-view="clients"] { --mod: #8b5cf6; } .nav-item[data-view="payments"] { --mod: #10b981; } .nav-item[data-view="due"] { --mod: #f59e0b; } .nav-item[data-view="routes"] { --mod: #ec4899; } .nav-item[data-view="reports"] { --mod: #06b6d4; } .nav-item[data-view="commissions"] { --mod: #14b8a6; } .nav-item[data-view="goals"] { --mod: #a855f7; } .nav-item[data-view="expenses"] { --mod: #ef4444; } .nav-item[data-view="collaterals"] { --mod: #f97316; } .nav-item[data-view="settings"] { --mod: #64748b; } .nav-item[data-view="config"] { --mod: #64748b; } .nav-item { position: relative; transition: background .18s, color .18s, transform .18s; } .nav-item svg { color: var(--mod, var(--primary)); opacity: .85; transition: transform .2s, opacity .2s; } .nav-item:hover { transform: translateX(3px); } .nav-item:hover svg { opacity: 1; transform: scale(1.12); } /* Barrita de color a la izquierda del módulo activo */ .nav-item.active::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--mod, var(--primary)); } .nav-item.active { background: color-mix(in srgb, var(--mod, var(--primary)) 14%, transparent); } .nav-item.active svg { opacity: 1; } /* Las vistas entran suavemente al cambiar de módulo */ @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .view.active { animation: viewIn .3s ease-out; } /* Tarjetas de métricas: entran escalonadas y reaccionan al mouse */ @keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .metric-card { animation: cardIn .45s cubic-bezier(.4,0,.2,1) backwards; } .metric-card:nth-child(1) { animation-delay: .02s; } .metric-card:nth-child(2) { animation-delay: .08s; } .metric-card:nth-child(3) { animation-delay: .14s; } .metric-card:nth-child(4) { animation-delay: .20s; } .metric-card:nth-child(5) { animation-delay: .26s; } /* Filas de tabla con realce al pasar el mouse */ tbody tr { transition: background .15s; } tbody tr:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); } /* Paneles que se levantan un poco */ .panel { transition: transform .2s, box-shadow .2s; } .panel:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.18); } /* Estados con color, no solo texto */ .badge, .status-pill { transition: transform .15s; } .badge:hover, .status-pill:hover { transform: scale(1.05); } /* El monto del recibo, protagonista */ .receipt-total { letter-spacing: -.01em; } /* Botón principal con barrido de brillo */ @keyframes sweepP { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } } .primary-btn:hover { animation: sweepP 1.1s ease; } /* Se respeta a quien prefiere menos movimiento */ @media (prefers-reduced-motion: reduce) { .view.active, .metric-card, .primary-btn:hover { animation: none !important; } .nav-item:hover, .panel:hover { transform: none !important; } } /* ===== Acciones rápidas de la barra superior ===== */ .notif-punto{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%; background:var(--danger);box-shadow:0 0 0 2px var(--bg)} .avatar-top{width:36px;height:36px;border-radius:50%;border:2px solid var(--primary);cursor:pointer;padding:0; background:linear-gradient(135deg,var(--primary),var(--accent));color:#04222a;font-weight:800;font-size:.9rem; display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .18s,box-shadow .18s} .avatar-top:hover{transform:scale(1.07);box-shadow:0 0 0 3px rgba(34,211,238,.25)} .avatar-top img{width:100%;height:100%;object-fit:cover;border-radius:50%} .hidden{display:none!important}