/* ═══════════════════════════════════════════════ CONCENTRADOR DE PAGADURÍAS — Shared Stylesheet ════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap'); /* ─── CSS Variables ─────────────────────────── */ :root { --bg: #f4f6f9; --surface: #ffffff; --surface2: #f8f9fb; --surface3: #eef0f4; --border: #e2e6ec; --border2: #cdd2da; --text: #1a2332; --text2: #4a5568; --text3: #8a95a3; --accent: #1558d6; --accent-hover: #1a6bef; --accent-subtle: #1558d614; --green: #1a9e4a; --green-subtle: #1a9e4a14; --yellow: #b7750a; --yellow-subtle: #f59e0b18; --red: #d42b2b; --red-subtle: #d42b2b12; --purple: #6c3fc7; --purple-subtle: #6c3fc714; --orange: #c2610a; --sidebar-bg: #1a2440; --radius: 8px; --radius-lg: 12px; --sidebar-w: 240px; --sidebar-collapsed: 60px; --transition: 0.2s ease; --font-scale: 1; } /* Font scale utility — applied via JS on */ html { font-size: calc(14px * var(--font-scale)); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.5; } /* ─── Buttons ───────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-family: inherit; font-size: .9em; font-weight: 500; cursor: pointer; border: 1px solid; transition: all var(--transition); text-decoration: none; white-space: nowrap; user-select: none; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-secondary { background: var(--surface); border-color: var(--border2); color: var(--text2); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text2); } .btn-ghost:hover { background: var(--surface3); color: var(--text); border-color: var(--border); } .btn-danger { background: var(--red-subtle); border-color: #d42b2b44; color: var(--red); } .btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); } .btn-success { background: var(--green-subtle); border-color: #1a9e4a44; color: var(--green); } .btn-success:hover { background: var(--green); color: #fff; border-color: var(--green); } .btn-warning { background: var(--yellow-subtle); border-color: #b7750a44; color: var(--yellow); } .btn-warning:hover { background: var(--yellow); color: #fff; border-color: var(--yellow); } .btn-sm { padding: 5px 11px; font-size: .82em; } .btn-xs { padding: 3px 8px; font-size: .76em; border-radius: 4px; } .btn-lg { padding: 10px 22px; font-size: 1em; border-radius: 8px; } .btn-icon { padding: 7px; min-width: 34px; justify-content: center; } /* ─── Badges ────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: .78em; font-weight: 600; } .badge-green { background: var(--green-subtle); color: var(--green); border: 1px solid #1a9e4a33; } .badge-yellow { background: var(--yellow-subtle); color: var(--yellow); border: 1px solid #b7750a33; } .badge-red { background: var(--red-subtle); color: var(--red); border: 1px solid #d42b2b33; } .badge-blue { background: var(--accent-subtle); color: var(--accent); border: 1px solid #1558d633; } .badge-purple { background: var(--purple-subtle); color: var(--purple); border: 1px solid #6c3fc733; } .badge-gray { background: var(--surface3); color: var(--text2); border: 1px solid var(--border); } .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ─── Form elements ─────────────────────────── */ .form-field { display: flex; flex-direction: column; gap: 5px; } .form-label { font-size: .8em; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; } .form-label .req { color: var(--red); margin-left: 2px; } .form-input, .form-select, .form-textarea { background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; padding: 8px 12px; color: var(--text); font-family: inherit; font-size: .95em; outline: none; transition: all var(--transition); width: 100%; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } .form-input::placeholder { color: var(--text3); } .form-select { cursor: pointer; } .form-select option { background: #fff; color: var(--text); } .form-textarea { resize: vertical; min-height: 72px; } .form-hint { font-size: .78em; color: var(--text3); margin-top: 2px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .form-grid-1 { display: grid; grid-template-columns: 1fr; gap: 14px; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .form-section-title { font-size: .76em; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; } .form-section-title::after { content:''; flex:1; height:1px; background:var(--border); } .form-section-title:first-child { margin-top: 0; } /* Checkbox / Radio */ .checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; } .checkbox-item { display: flex; align-items: center; gap: 7px; cursor: pointer; } .checkbox-item input { display: none; } .checkbox-box { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--border2); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: .7em; transition: all var(--transition); flex-shrink: 0; } .checkbox-item input:checked + .checkbox-box { background: var(--accent); border-color: var(--accent); color: #fff; } .checkbox-item input:checked + .checkbox-box::after { content: '✓'; } .checkbox-label { font-size: .9em; color: var(--text); } /* ─── Alerts ────────────────────────────────── */ .alert { border-radius: var(--radius); padding: 11px 15px; display: flex; align-items: flex-start; gap: 10px; font-size: .88em; margin-bottom: 14px; } .alert-icon { font-size: 1.1em; flex-shrink: 0; margin-top: 1px; } .alert-body { color: var(--text); } .alert-body strong { font-weight: 600; } .alert-info { background: var(--accent-subtle); border: 1px solid #1558d633; } .alert-success { background: var(--green-subtle); border: 1px solid #1a9e4a33; } .alert-warning { background: var(--yellow-subtle); border: 1px solid #b7750a33; } .alert-danger { background: var(--red-subtle); border: 1px solid #d42b2b33; } /* ─── Cards ─────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.05); } .card-title { font-size: .76em; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; } /* ─── Table ──────────────────────────────────── */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 20px; } .table-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .table-title { font-size: .93em; font-weight: 600; color: var(--text); } .table-count { font-size: .78em; color: var(--text3); background: var(--surface3); padding: 1px 8px; border-radius: 10px; } table { width: 100%; border-collapse: collapse; } thead tr { border-bottom: 1px solid var(--border); } th { text-align: left; padding: 9px 16px; font-size: .76em; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; background: #f1f4f8; white-space: nowrap; } td { padding: 11px 16px; font-size: .9em; color: var(--text); border-bottom: 1px solid #e2e6ec88; } tbody tr { transition: background var(--transition); cursor: default; } tbody tr:hover { background: #f5f7fa; } tbody tr:last-child td { border-bottom: none; } .td-mono { font-family: 'DM Mono', monospace; font-size: .82em; color: var(--text2); } /* ─── Search box ─────────────────────────────── */ .search-box { display: flex; align-items: center; gap: 7px; background: var(--surface3); border: 1px solid var(--border); border-radius: 6px; padding: 6px 11px; } .search-box input { background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: .88em; width: 190px; } .search-box input::placeholder { color: var(--text3); } /* Filter tabs */ .filter-tabs { display: flex; gap: 2px; background: var(--surface3); border: 1px solid var(--border); padding: 3px; border-radius: 7px; } .filter-tab { padding: 4px 11px; border-radius: 5px; font-size: .8em; font-weight: 500; cursor: pointer; color: var(--text2); transition: all var(--transition); } .filter-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); } .filter-tab:hover:not(.active) { color: var(--text); } /* ─── Modal ──────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(26,36,64,.45); backdrop-filter: blur(3px); z-index: 1000; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 880px; position: relative; animation: modalIn .22s ease; margin: auto; box-shadow: 0 16px 48px rgba(0,0,0,.14); } .modal-sm { max-width: 480px; } .modal-md { max-width: 620px; } @keyframes modalIn { from { opacity:0; transform: translateY(-14px); } to { opacity:1; transform: translateY(0); } } .modal-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 13px; } .modal-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .modal-title { font-size: 1.1em; font-weight: 700; } .modal-subtitle { font-size: .8em; color: var(--text2); margin-top: 2px; } .modal-close { margin-left: auto; background: none; border: none; color: var(--text2); font-size: 18px; cursor: pointer; width: 30px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .modal-close:hover { background: var(--surface3); color: var(--text); } .modal-body { padding: 22px; max-height: 62vh; overflow-y: auto; } .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--surface2); border-radius: 0 0 14px 14px; } /* ─── Wizard steps ───────────────────────────── */ .wizard-steps { display: flex; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--border); background: var(--surface2); } .wizard-step { display: flex; align-items: center; gap: 7px; flex: 1; position: relative; cursor: pointer; } .wizard-step:not(:last-child)::after { content: ''; position: absolute; left: calc(50% + 16px); right: 0; top: 50%; transform: translateY(-50%); height: 1px; background: var(--border); z-index: 0; } .wizard-step.done:not(:last-child)::after { background: var(--accent); } .step-num { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: .76em; font-weight: 700; color: var(--text3); background: var(--surface); z-index: 1; flex-shrink: 0; transition: all var(--transition); } .wizard-step.active .step-num { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); } .wizard-step.done .step-num { border-color: var(--accent); background: var(--accent); color: #fff; } .wizard-step.done .step-num::before { content: '✓'; } .step-label { font-size: .76em; font-weight: 600; color: var(--text3); white-space: nowrap; } .wizard-step.active .step-label { color: var(--accent); } .wizard-step.done .step-label { color: var(--text2); } /* ─── Tabs ───────────────────────────────────── */ .tab-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .tab { padding: 9px 15px; font-size: .88em; font-weight: 500; color: var(--text2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--transition); } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ─── Detail list ────────────────────────────── */ .dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; } .dl dt { font-size: .82em; color: var(--text3); font-weight: 500; white-space: nowrap; } .dl dd { font-size: .88em; color: var(--text); font-weight: 500; } /* ─── Timeline ───────────────────────────────── */ .timeline { padding-left: 18px; } .timeline-item { position: relative; padding-left: 22px; padding-bottom: 18px; } .timeline-item::before { content:''; position:absolute; left:-1px; top:18px; bottom:0; width:1px; background:var(--border); } .timeline-item:last-child::before { display:none; } .tl-dot { position:absolute; left:-6px; top:3px; width:12px; height:12px; border-radius:50%; border:2px solid var(--border); background:var(--surface); } .tl-dot.blue { border-color:var(--accent); background:var(--accent); } .tl-dot.green { border-color:var(--green); background:var(--green); } .tl-dot.yellow { border-color:var(--yellow); background:var(--yellow); } .tl-time { font-size: .76em; color:var(--text3); font-family:'DM Mono',monospace; margin-bottom:2px; } .tl-label { font-size: .88em; color:var(--text); font-weight:600; } .tl-desc { font-size: .8em; color:var(--text2); margin-top:2px; } /* ─── Progress ───────────────────────────────── */ .progress-bar { height:5px; background:var(--surface3); border-radius:99px; overflow:hidden; margin-top:5px; } .progress-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--purple)); } /* ─── Multi-add ──────────────────────────────── */ .multi-add { border:1px dashed var(--border2); border-radius:8px; padding:12px; background:var(--surface2); } .multi-add-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .multi-add-title { font-size:.8em; font-weight:600; color:var(--text2); } .multi-add-item { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:10px 12px; margin-bottom:8px; display:flex; align-items:flex-start; gap:10px; } .multi-add-item:last-child { margin-bottom:0; } /* ─── Stats cards ────────────────────────────── */ .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; } .stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; position:relative; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.05); } .stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; } .stat-card.blue::before { background:linear-gradient(90deg,var(--accent),var(--purple)); } .stat-card.green::before { background:linear-gradient(90deg,var(--green),#0e9f6e); } .stat-card.yellow::before { background:linear-gradient(90deg,var(--yellow),var(--orange)); } .stat-card.red::before { background:linear-gradient(90deg,var(--red),#e05252); } .stat-icon { position:absolute; top:16px; right:16px; font-size:22px; opacity:.3; } .stat-label { font-size:.76em; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; } .stat-value { font-size:1.9em; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; } .stat-delta { font-size:.76em; font-weight:500; margin-top:4px; display:flex; align-items:center; gap:3px; } .stat-delta.up { color:var(--green); } .stat-delta.warn { color:var(--yellow); } .stat-delta.down { color:var(--red); } /* ─── Misc ───────────────────────────────────── */ .tag { display:inline-block; padding:1px 7px; border-radius:4px; font-size:.76em; font-weight:600; background:var(--surface3); color:var(--text2); border:1px solid var(--border); margin:2px; } .empty-state { text-align:center; padding:44px 20px; color:var(--text3); } .empty-state-icon { font-size:36px; margin-bottom:10px; opacity:.5; } .empty-state-title { font-size:1em; font-weight:600; color:var(--text2); margin-bottom:5px; } .two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } .checklist-item { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #e2e6ec55; font-size:.88em; } .checklist-item:last-child { border-bottom:none; } .nit-mono { font-family:'DM Mono',monospace; font-size:.82em; color:var(--text2); } /* Scrollbar */ ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; } /* Toast */ .toast { position:fixed; bottom:24px; right:24px; z-index:9999; padding:13px 18px; border-radius:10px; font-size:.9em; font-weight:600; box-shadow:0 8px 32px rgba(0,0,0,.15); animation:toastIn .3s ease; display:flex; align-items:center; gap:9px; } .toast-success { background:var(--green); color:#fff; } .toast-error { background:var(--red); color:#fff; } .toast-info { background:var(--accent);color:#fff; } @keyframes toastIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } /* Review fields */ .review-section { margin-bottom:18px; } .review-section-title { font-size:.76em; font-weight:700; color:var(--accent); margin-bottom:9px; text-transform:uppercase; letter-spacing:.08em; } .review-field { display:flex; gap:8px; margin-bottom:5px; } .review-key { font-size:.8em; color:var(--text3); min-width:190px; font-weight:500; } .review-val { font-size:.82em; color:var(--text); font-weight:600; }