/* ═══════════════════════════════════════════════════════════════════ SOCC Capital · Sistema de diseño "Fintech índigo" (Opción C) ─────────────────────────────────────────────────────────────────── Un solo acento (esmeralda) + semánticos de estado, sobre azul profundo (dark, el modo principal) o superficies claras (light). El shell (topbar + sidebar) es índigo SIEMPRE: ancla de marca; el área de contenido es la que conmuta claro/oscuro. El modo oscuro se activa con class="theme-oscuro" + data-bs-theme ="dark" en (lo aplica el servidor según la preferencia). ═══════════════════════════════════════════════════════════════════ */ /* ── Tokens · modo claro (default) ───────────────────────────────── */ :root{ /* Marca */ --brand-navy: #0e1428; /* shell: sidebar + topbar */ --brand-navy-soft: #182444; /* hover/activo dentro del shell */ --brand-navy-border: #1c2949; --accent: #149e73; /* esmeralda (texto/links, AA en claro) */ --accent-fill: #37d39b; /* esmeralda (rellenos/acentos) */ --accent-soft: rgba(20,158,115,.10); /* Superficies de contenido */ --bg-body: #f4f6fb; --bg-card: #ffffff; --bg-inset: #eef1f8; /* thead, zonas hundidas */ --border: #dfe5f1; --border-soft: #e9edf6; /* Texto */ --text-main: #1a2337; --text-muted: #5a6b8c; --text-on-navy: #e8edf8; --text-on-navy-dim: #93a3c4; --text-on-accent: #ffffff; /* Semánticos (estado, siempre con etiqueta, nunca solo color) */ --ok: #148f68; --warning: #a3720f; --danger: #cf4437; --info: #2f6fd6; --neutral: #64748f; --ok-soft: rgba(20,143,104,.10); --warning-soft: rgba(163,114,15,.12); --danger-soft: rgba(207,68,55,.10); --info-soft: rgba(47,111,214,.10); --neutral-soft: rgba(100,116,143,.12); /* Forma */ --radius: 14px; --radius-sm: 10px; --shadow-card: 0 1px 2px rgba(16,24,48,.06), 0 4px 16px rgba(16,24,48,.06); /* Compat con templates existentes */ --color-primario: var(--accent); --color-secundario: var(--neutral); --text-on-primary: var(--text-on-accent); --color-primario-dark: color-mix(in srgb, var(--accent) 80%, black); --color-secundario-dark:color-mix(in srgb, var(--neutral) 70%, black); /* Bootstrap hooks */ --bs-primary: var(--accent); --bs-secondary: var(--neutral); --bs-body-bg: var(--bg-body); --bs-body-color: var(--text-main); --bs-border-color: var(--border); --bs-border-radius: var(--radius-sm); --bs-link-color: var(--accent); --bs-link-hover-color: color-mix(in srgb, var(--accent) 80%, black); } /* ── Tokens · modo oscuro ────────────────────────────────────────── */ html.theme-oscuro{ --accent: #37d39b; --accent-fill: #37d39b; --accent-soft: rgba(55,211,155,.12); --text-on-accent: #0b1020; --bg-body: #0b1020; --bg-card: #121a33; --bg-inset: #0e1428; --border: #1c2949; --border-soft: #182444; --text-main: #e8edf8; --text-muted: #93a3c4; --ok: #37d39b; --warning: #ecb64f; --danger: #f0776b; --info: #6ea8fe; --neutral: #7c88a1; --ok-soft: rgba(55,211,155,.12); --warning-soft: rgba(236,182,79,.14); --danger-soft: rgba(240,119,107,.12); --info-soft: rgba(110,168,254,.12); --neutral-soft: rgba(124,136,161,.14); --shadow-card: 0 8px 24px rgba(4,8,20,.35); } /* ═══════════════════════════════════════════════════════════════════ 1. Base ═══════════════════════════════════════════════════════════════════ */ body{ font-family: 'Figtree','Segoe UI',system-ui,sans-serif; background: var(--bg-body); color: var(--text-main); margin: 0; overflow-x: hidden; } h1,h2,h3,h4,h5,h6,.navbar-brand,.display-font{ font-family: 'Space Grotesk','Figtree','Segoe UI',sans-serif; } a{ color: var(--accent); } a:hover{ color: color-mix(in srgb, var(--accent) 80%, var(--text-main)); } .text-muted{ color: var(--text-muted) !important; } summary, details > summary{ color: var(--text-main); } hr{ border-color: var(--border); opacity: 1; } .num, .tabular{ font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════ 2. Shell: topbar + sidebar (índigo en ambos modos) ═══════════════════════════════════════════════════════════════════ */ .top-navbar{ background: var(--brand-navy); border-bottom: 1px solid var(--brand-navy-border); box-shadow: none; } .top-navbar .navbar-brand{ color: var(--text-on-navy) !important; font-weight: 600; letter-spacing: .01em; } #sidebarToggleBtn{ color: var(--text-on-navy-dim); } #sidebarToggleBtn:hover{ color: var(--text-on-navy); } .sidebar{ background: var(--brand-navy); border-right: 1px solid var(--brand-navy-border); } .sidebar .nav-link, .sidebar .nav-link i{ color: var(--text-on-navy-dim) !important; } .sidebar .nav-link{ border-radius: var(--radius-sm); margin: 2px 8px; padding: 9px 14px; font-size: .875rem; transition: background .15s, color .15s; } .sidebar .nav-link:hover{ background: var(--brand-navy-soft) !important; color: var(--text-on-navy) !important; } .sidebar .nav-link:hover i{ color: var(--text-on-navy) !important; } .sidebar .nav-link.active{ background: var(--brand-navy-soft) !important; color: var(--accent-fill) !important; font-weight: 600; } .sidebar .nav-link.active i{ color: var(--accent-fill) !important; } .sidebar .submenu{ border-left: 1px solid var(--brand-navy-border); margin-left: 22px; } /* Cualquier texto/enlace suelto dentro del sidebar hereda la paleta del shell */ .sidebar, .sidebar a{ color: var(--text-on-navy-dim); } .sidebar a:hover{ color: var(--text-on-navy); } /* Usuario / dropdown del topbar */ .top-navbar #userMenu{ color: var(--text-on-navy) !important; } .top-navbar .form-check-input{ cursor: pointer; } .top-navbar .theme-icon{ color: var(--text-on-navy-dim); display: inline-flex; } .logo-circle{ display: inline-flex; align-items: center; justify-content: center; height: 34px; width: 34px; border-radius: var(--radius-sm); background: #fff; margin-right: .5rem; overflow: hidden; } .logo-circle img{ max-height: 90%; max-width: 90%; object-fit: contain; } /* ═══════════════════════════════════════════════════════════════════ 3. Contenido ═══════════════════════════════════════════════════════════════════ */ .main-content{ background: var(--bg-body); } .card{ background: var(--bg-card); color: var(--text-main); } .card{ border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } .card .card-header{ background: transparent; border-bottom: 1px solid var(--border); font-family: 'Space Grotesk','Figtree',sans-serif; font-weight: 600; } .card .card-footer{ background: transparent; border-top: 1px solid var(--border); } /* Dashboards heredados: neutralizar la galería de colores de bordes */ .card[class*="border-"]{ border-color: var(--border) !important; } .metric-card{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* ── Tablas ──────────────────────────────────────────────────────── */ .table{ --bs-table-bg: transparent; --bs-table-color: var(--text-main); --bs-table-border-color: var(--border-soft); --bs-table-striped-bg: color-mix(in srgb, var(--text-main) 3%, transparent); --bs-table-hover-bg: color-mix(in srgb, var(--accent) 6%, transparent); --bs-table-hover-color: var(--text-main); color: var(--text-main); } .table thead th{ background: var(--bg-inset) !important; color: var(--text-muted) !important; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--border); } .table td, .table th{ border-color: var(--border-soft); } .table td{ font-size: .875rem; } /* ── Formularios ─────────────────────────────────────────────────── */ .form-control, .form-select{ background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); border-radius: var(--radius-sm); } .form-control:focus, .form-select:focus{ background: var(--bg-card); color: var(--text-main); border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft); } .form-control::placeholder{ color: var(--text-muted); opacity: .8; } .form-label{ color: var(--text-muted); font-size: .8rem; font-weight: 600; } .form-check-input:checked{ background-color: var(--accent-fill); border-color: var(--accent-fill); } .input-group-text{ background: var(--bg-inset); color: var(--text-muted); border-color: var(--border); } /* ── Botones ─────────────────────────────────────────────────────── */ .btn{ border-radius: var(--radius-sm); font-weight: 600; } .btn-primary, .bg-primary{ --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--text-on-accent); --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 85%, black); --bs-btn-hover-color: var(--text-on-accent); --bs-btn-active-bg: color-mix(in srgb, var(--accent) 75%, black); --bs-btn-active-color: var(--text-on-accent); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-color: var(--text-on-accent); background-color: var(--accent); border-color: var(--accent); } .btn-outline-primary{ --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--text-on-accent); } .btn-secondary{ --bs-btn-bg: var(--neutral); --bs-btn-border-color: var(--neutral); --bs-btn-hover-bg: color-mix(in srgb, var(--neutral) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--neutral) 85%, black); } .btn-success{ --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-hover-bg: color-mix(in srgb, var(--ok) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--ok) 85%, black); } .btn-danger{ --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, black); } .btn-warning{ --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--warning) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--warning) 85%, black); } .btn-info{ --bs-btn-bg: var(--info); --bs-btn-border-color: var(--info); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--info) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--info) 85%, black); } .btn-dark{ --bs-btn-bg: var(--brand-navy); --bs-btn-border-color: var(--brand-navy-border); --bs-btn-hover-bg: var(--brand-navy-soft); --bs-btn-hover-border-color: var(--brand-navy-border); } .btn-outline-secondary{ --bs-btn-color: var(--text-muted); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--neutral-soft); --bs-btn-hover-color: var(--text-main); --bs-btn-hover-border-color: var(--border); } .btn-outline-light{ --bs-btn-color: var(--text-on-navy); --bs-btn-border-color: var(--brand-navy-border); --bs-btn-hover-bg: var(--brand-navy-soft); --bs-btn-hover-color: var(--text-on-navy); --bs-btn-hover-border-color: var(--brand-navy-border); } /* ── Badges de estado (pill + texto, coherentes con la Opción C) ── */ .badge{ border-radius: 999px; font-weight: 600; letter-spacing: .01em; } .badge.bg-success{ background: var(--ok-soft) !important; color: var(--ok) !important; } .badge.bg-danger{ background: var(--danger-soft) !important; color: var(--danger) !important; } .badge.bg-warning{ background: var(--warning-soft) !important; color: var(--warning) !important; } .badge.bg-info{ background: var(--info-soft) !important; color: var(--info) !important; } .badge.bg-primary{ background: var(--accent-soft) !important; color: var(--accent) !important; } .badge.bg-secondary{ background: var(--neutral-soft) !important; color: var(--neutral) !important; } .badge.bg-dark{ background: var(--neutral-soft) !important; color: var(--text-main) !important; } .badge.bg-light{ background: var(--neutral-soft) !important; color: var(--text-muted) !important; } /* Estados legacy (clases .estado-*) */ .estado-vigente { color: var(--ok); } .estado-moroso { color: var(--danger); } .estado-aprobado { color: var(--info); } .estado-cancelado { color: var(--neutral); } /* ── Alerts ──────────────────────────────────────────────────────── */ .alert{ border-radius: var(--radius-sm); border: 1px solid transparent; } .alert-success{ background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); } .alert-danger{ background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); } .alert-warning{ background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 25%, transparent); } .alert-info{ background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); } .alert-secondary, .alert-light{ background: var(--bg-inset); color: var(--text-main); border-color: var(--border); } .alert-light .text-secondary{ color: var(--text-muted) !important; } /* ── Dropdowns / modales / paginación / tabs ─────────────────────── */ .dropdown-menu{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); } .dropdown-menu .dropdown-item{ color: var(--text-main) !important; } .dropdown-menu .dropdown-item i{ color: var(--text-muted) !important; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus{ background: var(--accent-soft) !important; color: var(--text-main) !important; } .dropdown-menu .dropdown-item.text-danger, .dropdown-menu .dropdown-item.text-danger i{ color: var(--danger) !important; } .dropdown-header{ color: var(--text-muted); } .dropdown-divider{ border-color: var(--border); } .modal-content{ background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); border-radius: var(--radius); } .modal-header, .modal-footer{ border-color: var(--border); } .modal-header{ background: transparent; } .pagination{ --bs-pagination-border-radius: var(--radius-sm); } .pagination .page-link{ background: var(--bg-card); color: var(--text-main); border-color: var(--border); } .pagination .page-link:hover{ background: var(--accent-soft); color: var(--accent); } .pagination .page-item.active .page-link{ background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .pagination .page-item.disabled .page-link{ background: var(--bg-inset); color: var(--text-muted); border-color: var(--border); } .nav-tabs{ border-color: var(--border); } .nav-tabs .nav-link{ color: var(--text-muted); } .nav-tabs .nav-link.active{ background: var(--bg-card); color: var(--accent); border-color: var(--border) var(--border) var(--bg-card); } .list-group-item{ background: var(--bg-card); color: var(--text-main); border-color: var(--border-soft); } .accordion-item{ background: var(--bg-card); border-color: var(--border); } .accordion-button{ background: var(--bg-card); color: var(--text-main); } .accordion-button:not(.collapsed){ background: var(--accent-soft); color: var(--accent); } /* Colores de texto utilitarios re-mapeados al sistema */ .text-primary{ color: var(--accent) !important; } .text-success{ color: var(--ok) !important; } .text-danger{ color: var(--danger) !important; } .text-warning{ color: var(--warning) !important; } .text-info{ color: var(--info) !important; } .text-secondary{ color: var(--text-muted) !important; } /* Nav pills (tabs de dashboards) */ .nav-pills .nav-link{ color: var(--text-muted); border-radius: var(--radius-sm); } .nav-pills .nav-link.active{ background: var(--accent) !important; color: var(--text-on-accent) !important; } /* Fondos utilitarios de Bootstrap re-mapeados */ .bg-light{ background-color: var(--bg-inset) !important; color: var(--text-main); } .bg-white{ background-color: var(--bg-card) !important; color: var(--text-main); } .text-dark{ color: var(--text-main) !important; } .border, .border-top, .border-bottom, .border-start, .border-end{ border-color: var(--border) !important; } /* Campos "virtuales" de formsets */ .virtual-field input, .virtual-field select, .virtual-field textarea{ border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: var(--text-main); background: var(--bg-card); } /* ── Scrollbars discretos (WebKit) ───────────────────────────────── */ ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-thumb{ background: var(--neutral-soft); border-radius: 999px; } ::-webkit-scrollbar-track{ background: transparent; }