:root { /* ── Design tokens del tema (fuente única de verdad) ── */ --app-font: 'Hanken Grotesk Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bs-body-font-family: var(--app-font); --nav-bg: #0a3a63; --brand: #0a3a63; /* deep blue de marca */ --brand-2: #0c4576; --brass: #b07d30; /* acento cálido del logo (Ola) */ --brass-2: #d9a862; /* latón claro (cresta del logo) */ /* ── Armonía con el logo: primary = deep blue (no #0d6efd de Bootstrap) ── */ --bs-primary: #0a3a63; --bs-primary-rgb: 10,58,99; --bs-link-color: #0a3a63; --bs-link-color-rgb: 10,58,99; --bs-link-hover-color: #072c4c; --bs-link-hover-color-rgb: 7,44,76; /* ── Superficies crema (café arena) — reemplazan el blanco en la app ── */ --surface: #fffdf7; /* cards, tablas, modales — casi blanco cálido (despega del canvas) */ --surface-2: #e9dec5; /* canvas café arena (claramente más profundo que las cards) */ --card-line: rgba(20,32,46,.44); /* contorno oscuro (volumen) para cards no-KPI */ --card-line-soft: rgba(10,58,99,.24); /* contorno sutil para KPIs (stat-card) */ --naranja: #c2660c; /* naranja legible (reemplaza el amarillo ilegible) */ --bs-body-bg: #e9dec5; /* = --surface-2 (canvas café arena) */ --bs-card-bg: #fffdf7; /* = --surface (cards casi blanco) */ --bs-modal-bg: #fffdf7; --bs-tertiary-bg: #f4ecda; --bs-secondary-bg: #ece2cd; --bs-light-rgb: 233,222,197; /* .bg-light → canvas café arena */ --ink: #0f172a; /* texto fuerte */ --muted: #8a94a6; --line: #eceef3; /* bordes sutiles */ --card-radius: .75rem; --shadow-sm: 0 1px 3px rgba(9,52,92,.06), 0 8px 22px rgba(9,52,92,.07); --shadow-md: 0 2px 6px rgba(9,52,92,.10), 0 14px 30px rgba(9,52,92,.12); --shadow-hover: 0 4px 10px rgba(9,52,92,.10), 0 16px 34px rgba(9,52,92,.13); /* Acentos semánticos */ --c-green: #16a34a; --c-blue: #2563eb; --c-amber: #f59e0b; --c-red: #dc3545; } /* ── App shell / PWA ─────────────────────────────── */ /* El ya es bg-light; el quedaba blanco y al hacer overscroll (rebote) en la PWA se veía el blanco detrás. Igualar el fondo + cortar el overscroll elimina los espacios en blanco fuera de la app. */ html { background: var(--surface-2); } html, body { overscroll-behavior: none; } body { font-family: var(--app-font); } body.bg-light { background-color: var(--surface-2) !important; } /* Blanco → crema en la app (los PDF e impresiones usan #fff inline y no se tocan) */ .bg-white { background-color: var(--surface) !important; } .form-control, .form-select { background-color: #fffdf6; } /* ── Armonía: primary navy en componentes (BS los compila a #0d6efd) ── */ .btn-primary { --bs-btn-bg: #0a3a63; --bs-btn-border-color: #0a3a63; --bs-btn-hover-bg: #083051; --bs-btn-hover-border-color: #072c4c; --bs-btn-active-bg: #072840; --bs-btn-active-border-color: #061f34; --bs-btn-disabled-bg: #0a3a63; --bs-btn-disabled-border-color: #0a3a63; --bs-btn-focus-shadow-rgb: 10,58,99; } .btn-outline-primary { --bs-btn-color: #0a3a63; --bs-btn-border-color: #0a3a63; --bs-btn-hover-bg: #0a3a63; --bs-btn-hover-border-color: #0a3a63; --bs-btn-active-bg: #0a3a63; --bs-btn-active-border-color: #0a3a63; --bs-btn-focus-shadow-rgb: 10,58,99; } .form-control:focus, .form-select:focus { border-color: #4a7bab; box-shadow: 0 0 0 .25rem rgba(10,58,99,.20); } .form-check-input { border-color: rgba(10,58,99,.55); /* visible sobre la crema (antes casi invisible) */ } .form-check-input:checked { background-color: #0a3a63; border-color: #0a3a63; } .form-check-input:focus { border-color: #4a7bab; box-shadow: 0 0 0 .25rem rgba(10,58,99,.20); } /* Contraseña enmascarada como círculos huecos pequeños */ #password { -webkit-text-security: circle; } /* Botón brass (CTA cálido acorde al logo) */ .btn-brass { --bs-btn-bg: var(--brass-2); --bs-btn-border-color: var(--brass-2); --bs-btn-color: #2b2417; --bs-btn-hover-color: #2b2417; --bs-btn-hover-bg: #cf9a4e; --bs-btn-hover-border-color: #cf9a4e; --bs-btn-active-bg: #c28f45; --bs-btn-active-border-color: #c28f45; font-weight: 600; } /* Naranja legible para montos pendientes (reemplaza text-warning amarillo) */ .text-pend { color: var(--naranja) !important; } /* ── Navbar ─────────────────────────────────────── */ .navbar { background: linear-gradient(180deg, #0d4d84 0%, #0a3a63 55%, #072c4c 100%) !important; box-shadow: 0 2px 12px rgba(6, 26, 46, .30); border-bottom: 1px solid rgba(255,255,255,.07); padding-top: .35rem; padding-bottom: .35rem; } .navbar-brand { font-size: 1.18rem; letter-spacing: .01em; font-weight: 700; padding-right: 1rem; position: relative; } /* Logo con luz: halo sutil de latón (color de la ola) */ .navbar-brand img { filter: drop-shadow(0 0 5px rgba(224,178,102,.40)) drop-shadow(0 0 12px rgba(217,168,98,.16)) drop-shadow(0 1px 2px rgba(0,0,0,.28)); } @media (min-width: 992px) { .navbar-brand::after { content: ''; position: absolute; right: .1rem; top: 50%; transform: translateY(-50%); height: 26px; width: 1px; background: rgba(255,255,255,.16); } } /* Menú principal — ícono arriba + etiqueta, compacto */ .navbar-nav.me-auto .nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.12; text-align: center; font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.80) !important; padding: .3rem .5rem !important; border-radius: .6rem !important; transition: background-color .15s ease, color .15s ease; } .navbar-nav.me-auto .nav-link i { font-size: 1.12rem; opacity: .9; margin: 0 !important; } .navbar-nav.me-auto .nav-link:hover { background-color: rgba(255,255,255,.10); color: #fff !important; } .navbar-nav.me-auto .nav-link.active { background-color: rgba(255,255,255,.17); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); } .navbar-nav.me-auto .nav-link.active i { opacity: 1; } /* Lado derecho: Admin como pill + usuario */ #navAdminItem .nav-link { color: #ffd24a !important; font-weight: 600; border: 1px solid rgba(255,210,74,.45); border-radius: .6rem !important; padding: .4rem .7rem !important; } #navAdminItem .nav-link:hover { background-color: rgba(255,210,74,.16); color: #ffe27a !important; } .navbar .dropdown-toggle { border-radius: .6rem !important; transition: background-color .15s ease; } .navbar .dropdown-toggle:hover { background-color: rgba(255,255,255,.10); } /* Móvil: el menú se vuelve lista vertical legible */ @media (max-width: 991.98px) { .navbar-nav.me-auto .nav-link { flex-direction: row; justify-content: flex-start; gap: .65rem; font-size: .92rem; padding: .55rem .75rem !important; } .navbar-nav.me-auto .nav-link i { font-size: 1.05rem; width: 1.4rem; text-align: center; } #navAdminItem .nav-link { display: inline-flex; gap: .5rem; margin-top: .35rem; } } /* ── Tabs (.nav-tabs) — el tab activo se ve claro sobre la crema ── */ .nav-tabs { border-bottom: 1px solid var(--card-line); gap: .2rem; } .nav-tabs .nav-link { color: var(--muted); font-weight: 500; border: 1px solid transparent; border-bottom: 3px solid transparent; border-radius: .5rem .5rem 0 0; margin-bottom: -1px; padding: .5rem .95rem; transition: color .12s ease, background-color .12s ease, border-color .12s ease; } .nav-tabs .nav-link:hover:not(.active) { color: var(--brand); background-color: rgba(10,58,99,.05); border-bottom-color: rgba(10,58,99,.28); } .nav-tabs .nav-link.active { color: var(--brand); font-weight: 700; background-color: var(--surface); border-color: var(--card-line) var(--card-line) var(--brand); border-bottom-width: 3px; box-shadow: 0 -3px 8px rgba(10,58,99,.08); /* altura: el tab activo se eleva */ } /* ── Cards (estándar global) ─────────────────────── */ /* Look formal unificado: sombra navy suave, bordes redondeados y encabezado con un tinte sutil del tema. Cada card conserva su acento (stat-card, etc.). */ .card { border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); } .card-header { background: #f6f8fc; border-bottom: 1px solid var(--line); font-weight: 600; } .card-header:first-child { border-radius: var(--card-radius) var(--card-radius) 0 0; } /* Encabezado oscuro del tema (opt-in:

). Reutilizable en cualquier módulo; los botones outline se aclaran para seguir siendo legibles sobre el fondo oscuro. */ .card-header.head-dark { background: linear-gradient(180deg, var(--brand-2) 0%, var(--brand) 100%); color: #fff; border-bottom: none; font-weight: 600; } .card-header.head-dark i { color: rgba(255,255,255,.9) !important; } .card-header.head-dark .text-muted { color: rgba(255,255,255,.72) !important; } .card-header.head-dark .btn-outline-primary, .card-header.head-dark .btn-outline-secondary { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; } .card-header.head-dark .btn-outline-primary:hover, .card-header.head-dark .btn-outline-secondary:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.16); } /* ── Stat cards (KPIs) — diseño del tema con acento por color ── */ .stat-card { border: 1px solid var(--card-line-soft); border-left: 4px solid var(--sc-accent, #94a3b8); border-radius: var(--card-radius); transition: transform .15s ease, box-shadow .15s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .stat-card .card-body { padding: 1rem 1.1rem; } .stat-card .valor { font-size: clamp(1.1rem, 1.6vw, 1.55rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; white-space: nowrap; /* nunca parte el número a media cifra */ overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } /* Ícono de la etiqueta tintado al acento del card */ .stat-card .card-body > .small > i:first-child { color: var(--sc-accent, #94a3b8); background: color-mix(in srgb, var(--sc-accent, #94a3b8) 12%, transparent); padding: .22rem; border-radius: .4rem; margin-right: .35rem !important; } .stat-card.azul { --sc-accent: var(--c-blue); } .stat-card.verde { --sc-accent: var(--c-green); } .stat-card.naranja { --sc-accent: var(--c-amber); } .stat-card.rojo { --sc-accent: var(--c-red); } .stat-card.gris { --sc-accent: #64748b; } .stat-card .icon { font-size: 2rem; opacity: .15; } /* ── Tables ──────────────────────────────────────── */ .table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; } .table td { font-size: .9rem; vertical-align: middle; } .table-hover tbody tr:hover { background-color: #eef3fb; cursor: default; } /* Filas del color de la card (blanco), no del canvas — aunque la tabla no esté en .card */ .table { --bs-table-bg: var(--surface); } .table-light { --bs-table-bg: #f1ece1; --bs-table-color: #55606e; } /* header warm light, del tema */ /* ── Badges de estado ────────────────────────────── */ .badge-pendiente { background-color: #dc3545; } .badge-parcial { background-color: #fd7e14; } .badge-cobrado { background-color: #198754; } .badge-disponible { background-color: #198754; } .badge-agotado { background-color: #6c757d; } .badge-planificada{ background-color: #0dcaf0; color:#000; } .badge-activa { background-color: #0a3a63; } .badge-cerrada { background-color: #343a40; } .badge-completada { background-color: #198754; } .badge-en-proceso { background-color: #0a3a63; } .badge-cancelada { background-color: #dc3545; } /* ── Modal ajustes ───────────────────────────────── */ .modal-header { background-color: var(--nav-bg); color: #fff; } .modal-header .btn-close { filter: invert(1); } /* ── Formularios ─────────────────────────────────── */ .form-label { font-weight: 500; font-size: .88rem; } /* ── Loading/empty state ─────────────────────────── */ .empty-state { color: #adb5bd; padding: 2.5rem 0; text-align: center; } .empty-state i { font-size: 2.5rem; display: block; margin-bottom: .5rem; } /* ── Cards genéricas ─────────────────────────────── */ .card { border: 1px solid var(--card-line); box-shadow: 0 1px 6px rgba(70,50,10,.07); border-radius: .6rem; background-color: var(--surface); } .card-header { background: var(--surface); border-bottom: 1px solid var(--card-line); font-weight: 600; } /* ── Totales en tabla ────────────────────────────── */ .tfoot-total td { font-weight: 700; background: var(--surface-2); } /* ── Login page — el mundo del logo: mar profundo + charco de luz café ── */ .login-wrapper { min-height: 100vh; background: radial-gradient(58% 42% at 50% 40%, rgba(224,178,102,.22), transparent 66%), linear-gradient(165deg, #123049 0%, #0d2133 55%, #16232e 100%); } .login-card { border-radius: 1rem; overflow: hidden; border-top: 1.5px solid var(--brass-2); box-shadow: none !important; /* solo el resplandor cálido de fondo — sin sombra */ } /* Logo del login con luz (halo de latón) */ .login-card .card-header img { filter: drop-shadow(0 0 5px rgba(224,178,102,.40)) drop-shadow(0 0 12px rgba(217,168,98,.16)) drop-shadow(0 1px 2px rgba(0,0,0,.28)); } /* ── Responsive tweaks ───────────────────────────── */ @media (max-width: 576px) { .stat-card .valor { font-size: 1.2rem; } main { padding: .75rem !important; } }