/* ============================================================================ COSPAC DE BOWEN — Sistema visual unificado ---------------------------------------------------------------------------- Cargar SIEMPRE después de bootstrap.css / bootstrap-theme.css en el . Diseño basado en la identidad pública: verde cooperativa + amarillo cálido. Tipografía Poppins (display) + Inter Tight (body). ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600;700&display=swap'); /* ====================== 1. TOKENS ========================================= */ :root { /* Paleta cooperativa */ --cospac-green-900: #0E5E2C; --cospac-green-700: #1B7A36; --cospac-green-600: #228840; --cospac-green-500: #2BB24C; --cospac-green-400: #4CC56A; --cospac-green-300: #7AD08E; --cospac-green-100: #C8EAD0; --cospac-green-50: #EAF6ED; --cospac-yellow: #F5C518; --cospac-yellow-600:#E8B30A; --cospac-yellow-700:#D9A700; --cospac-yellow-50: #FFF8DE; --ink: #1A2421; --ink-soft: #4D5953; --ink-mute: #7E8B85; /* Fondo: tinte verde cooperativa más presente (sin llegar a saturado) */ --bone: #D0E7D6; --paper: #FFFFFF; --rule: #BDD8C4; --rule-soft: #CFE0D4; --cream: #FBF6E3; /* crema cálido para acentos */ --danger: #C4361B; --danger-50: #FBEAE6; --warn: #E89B12; --info: #1A6FB0; --ok: var(--cospac-green-600); /* Tipografía */ --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Inter Tight', system-ui, sans-serif; /* Sombras */ --shadow-xs: 0 1px 2px rgba(14, 94, 44, .06); --shadow-sm: 0 2px 6px rgba(14, 94, 44, .08); --shadow-md: 0 8px 24px rgba(14, 94, 44, .10); --shadow-lg: 0 18px 48px rgba(14, 94, 44, .14); --shadow-yellow: 0 6px 18px rgba(245, 197, 24, .35); --shadow-green: 0 6px 18px rgba(43, 178, 76, .28); /* Radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* Easing */ --ease-out: cubic-bezier(.2,.7,.2,1); } /* ====================== 2. BASE =========================================== */ body, html { /* Fondo verde cooperativa con mesh radial — más presencia, sin saturar */ background: radial-gradient(at 8% 0%, rgba(43, 178, 76, .22) 0%, transparent 50%), radial-gradient(at 92% 8%, rgba(245, 197, 24, .18) 0%, transparent 50%), radial-gradient(at 50% 100%, rgba(27, 122, 54, .15) 0%, transparent 55%), var(--bone); background-attachment: fixed; color: var(--ink); font-family: var(--font-body) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } body * { font-family: inherit; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .modal-title, .navbar-brand { font-family: var(--font-display) !important; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } h1, .h1 { font-weight: 800; } h2, .h2 { font-weight: 700; } h3, .h3 { font-weight: 700; } a { color: var(--cospac-green-700); text-decoration: none; transition: color .15s var(--ease-out); } a:hover, a:focus { color: var(--cospac-green-900); text-decoration: none; } hr.colorgraph, hr { height: 1px; border: 0; background: linear-gradient(90deg, transparent 0%, var(--cospac-green-300) 30%, var(--cospac-green-500) 50%, var(--cospac-green-300) 70%, transparent 100%); margin: 18px 0; } ::selection { background: var(--cospac-yellow); color: var(--ink); } /* ====================== 3. NAVBAR (Home) ================================== */ .navbar.example2 { /* Fondo crema con tinte verde suave, no blanco pelado */ background: linear-gradient(135deg, #F4FBF5 0%, var(--cream) 100%) !important; border: 1px solid var(--cospac-green-300) !important; border-radius: 22px !important; box-shadow: var(--shadow-md); padding: 10px 22px !important; min-height: 78px; display: flex !important; align-items: center; gap: 18px; } .navbar-header { display: flex; align-items: center; flex-shrink: 0; } /* El #navbar (collapsible) ocupa todo el resto y arma fila flex */ .navbar.example2 .navbar-collapse, .navbar.example2 #navbar { display: flex !important; flex: 1 1 auto; align-items: center; justify-content: space-between; padding: 0 !important; border: 0 !important; box-shadow: none !important; } /* Listas: la izquierda flex inicio, la derecha pegada al final */ .navbar.example2 .nav.navbar-nav { float: none !important; margin: 0 !important; display: flex; align-items: center; gap: 6px; } .navbar.example2 .nav.navbar-nav.navbar-right, .navbar.example2 .nav.navbar-nav.pull-right, .navbar.example2 ul.navbar-right, .navbar.example2 ul.pull-right { margin-left: auto !important; /* fuerza a la derecha */ float: none !important; } /* Primer grupo de nav-nav (sin clase pull-right) queda anclado a la izquierda */ .navbar.example2 .nav.navbar-nav:not(.navbar-right):not(.pull-right) { margin-right: auto !important; } /* El typo "avbar-left" del markup de Home queda como grupo izquierdo */ .navbar.example2 .nav.avbar-left { margin-right: auto !important; } .navbar-brand { padding: 6px 16px !important; height: auto !important; display: flex !important; align-items: center; font-weight: 800; color: var(--cospac-green-700) !important; } .navbar-brand img { max-height: 58px; width: auto; object-fit: contain; } /* Override completo del cycle de colores cyan del navbarHome.css */ .nav > li > a, .dropdown-menu > li > a { color: var(--ink) !important; font-family: var(--font-display) !important; /* Poppins en el nav para más carácter */ font-weight: 600 !important; font-size: 17px !important; line-height: 1.3 !important; padding: 14px 22px !important; border-radius: 14px !important; border-bottom: none !important; letter-spacing: -0.005em; display: inline-flex !important; align-items: center; gap: 8px; transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .12s var(--ease-out); } .nav > li > a:hover, .nav > li > a:focus, .nav .open > a, .nav .active > a { background: var(--cospac-green-50) !important; color: var(--cospac-green-900) !important; border-bottom: none !important; transform: translateY(-1px); } /* Apagar las 8 reglas :nth-child del navbarHome.css */ .nav li:hover, .nav li.active, .nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1), .nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2), .nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3), .nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4), .nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5), .nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6), .nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7), .nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8) { border-bottom: none !important; } .nav > li > a img { vertical-align: middle; max-height: 22px; margin: 0; filter: drop-shadow(0 1px 1px rgba(14, 94, 44, .15)); } /* Underline animado verde debajo del item activo/hover (efecto sitio público) */ .nav > li > a::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 6px; height: 2px; background: var(--cospac-green-500); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease-out); } .nav > li > a { position: relative; } .nav > li > a:hover::after, .nav .active > a::after { transform: scaleX(1); } /* ====================== 4. CONTENEDORES / HERO ============================ */ /* "flex_div" y "div_login" de Estilos.css quedaban con gradiente verde + borde azul oscuro. Se reescriben para look limpio + textura noise sutil. */ .flex_div, .flex_div_c { background: transparent !important; /* deja ver el mesh del body */ border: 0 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important; color: var(--ink) !important; } .div_login { background: linear-gradient(135deg, #FFFFFF 0%, #FBFDF9 55%, var(--cream) 100%) !important; border: 1px solid var(--cospac-green-300) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-lg) !important; text-shadow: none !important; color: var(--ink) !important; position: relative; overflow: hidden; } /* Decoración: bandera verde diagonal en la esquina */ .div_login::before { content: ""; position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; background: radial-gradient(circle at 30% 30%, rgba(43, 178, 76, .18), transparent 70%); pointer-events: none; z-index: 0; } .div_login::after { content: ""; position: absolute; bottom: -80px; left: -80px; width: 220px; height: 220px; background: radial-gradient(circle at 50% 50%, rgba(245, 197, 24, .18), transparent 70%); pointer-events: none; z-index: 0; } .div_login > * { position: relative; z-index: 1; } /* ====================== 5. BOTONES ======================================== */ .btn { font-family: var(--font-body) !important; font-weight: 600 !important; letter-spacing: -0.005em; border-radius: var(--r-pill) !important; padding: 9px 20px !important; border: 1px solid transparent !important; transition: transform .12s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out) !important; text-shadow: none !important; box-shadow: var(--shadow-xs); } .btn:hover, .btn:focus { transform: translateY(-1px); outline: none !important; } .btn:active { transform: translateY(0); } .btn-lg { padding: 12px 24px !important; font-size: 16px !important; } .btn-sm { padding: 6px 14px !important; font-size: 13px !important; } .btn-xs { padding: 4px 10px !important; font-size: 12px !important; } .btn-block { width: 100%; } .btn-primary, .btn-primary:focus { background: var(--cospac-green-600) !important; border-color: var(--cospac-green-700) !important; color: #fff !important; } .btn-primary:hover { background: var(--cospac-green-700) !important; box-shadow: var(--shadow-green); } .btn-success, .btn-success:focus { background: var(--cospac-green-500) !important; border-color: var(--cospac-green-600) !important; color: #fff !important; } .btn-success:hover { background: var(--cospac-green-600) !important; box-shadow: var(--shadow-green); } .btn-warning, .btn-warning:focus, .btn-pagar-mp { background: var(--cospac-yellow) !important; border-color: var(--cospac-yellow-700) !important; color: var(--ink) !important; font-weight: 700 !important; } .btn-warning:hover, .btn-pagar-mp:hover { background: var(--cospac-yellow-600) !important; box-shadow: var(--shadow-yellow); } .btn-danger, .btn-danger:focus { background: var(--danger) !important; border-color: #9C2A14 !important; color: #fff !important; } .btn-danger:hover { background: #9C2A14 !important; } .btn-default, .btn-default:focus { background: var(--paper) !important; border-color: var(--rule) !important; color: var(--ink) !important; } .btn-default:hover { background: var(--cospac-green-50) !important; } /* ====================== 6. INPUTS / FORMS ================================= */ .form-control, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select { font-family: var(--font-body) !important; border: 1px solid var(--rule) !important; border-radius: var(--r-sm) !important; background: var(--paper); color: var(--ink); box-shadow: none !important; transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); padding: 9px 12px; height: auto; } .form-control:focus, input:focus, textarea:focus, select:focus { border-color: var(--cospac-green-500) !important; box-shadow: 0 0 0 3px rgba(43, 178, 76, .18) !important; outline: none !important; } .input-lg { font-size: 16px !important; padding: 12px 14px !important; } .input-group-addon { background: var(--cospac-green-50); border: 1px solid var(--rule); color: var(--cospac-green-700); border-radius: var(--r-sm); } .input-group-addon.asterisco { color: var(--danger); font-weight: 700; } label { font-weight: 500; color: var(--ink-soft); } /* ====================== 7. MODALES ======================================== */ /* Forzar position:fixed por si algún markup tiene inline position:absolute (caso conocido: #rModalEmail en Default.aspx). Sin esto, el modal queda renderizado fuera de la vista y sólo se ve el backdrop gris. */ .modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; } /* Backdrop más oscuro para que el modal destaque */ .modal-backdrop, .modal-backdrop.in, .modal-backdrop.fade.in { background-color: #0E2421 !important; opacity: 0.55 !important; } .modal-content { border: 0 !important; border-radius: var(--r-lg) !important; box-shadow: 0 32px 80px rgba(14, 36, 33, .50), 0 16px 32px rgba(14, 36, 33, .35) !important; overflow: hidden; } .modal-header { background: linear-gradient(120deg, var(--cospac-green-700), var(--cospac-green-500)) !important; color: #fff !important; border-bottom: 0 !important; padding: 18px 24px !important; } .modal-header .modal-title, .modal-header h2, .modal-header h3, .modal-header h4 { color: #fff !important; margin: 0; } .modal-header .close { color: #fff !important; opacity: .9; text-shadow: none; font-size: 26px; line-height: 1; } .modal-header .close:hover { opacity: 1; } /* Texto secundario dentro del header verde: blanco translúcido en vez de gris */ .modal-header small, .modal-header .text-muted, .modal-header label, .modal-header p, .modal-header span:not(.close) { color: rgba(255, 255, 255, .82) !important; } .modal-header a { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; } .modal-header a:hover { color: var(--cospac-yellow) !important; } .modal-body { padding: 22px 24px !important; background: var(--paper); } .modal-footer { border-top: 1px solid var(--rule) !important; padding: 14px 24px !important; } /* Override de avisos rojos inline en modales (e.g. modalPagarCuota) */ .modal-body .row[style*="orangered"] { background: var(--danger-50) !important; border-left: 4px solid var(--danger); border-radius: var(--r-sm); padding: 14px 18px !important; } .modal-body .row[style*="orangered"] label { color: var(--ink) !important; } .modal-body .row[style*="orangered"] a { color: var(--danger) !important; font-weight: 700; } /* ====================== 8. TABLAS / DataTables ============================ */ table.table, #duplicados_dg, #misRutas_dg { background: var(--paper); border-collapse: separate !important; border-spacing: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } table.table th, .dataTable thead th, #duplicados_dg thead th, #misRutas_dg thead th { background: var(--cospac-green-50) !important; color: var(--cospac-green-900) !important; font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.04em; border: 0 !important; border-bottom: 1px solid var(--rule) !important; padding: 12px !important; } table.table td, .dataTable tbody td { border: 0 !important; border-bottom: 1px solid var(--rule-soft) !important; padding: 12px !important; vertical-align: middle; color: var(--ink); font-size: 14px; } .dataTable tbody tr:hover td { background: var(--cospac-green-50) !important; } /* La grilla de facturas usa background inline yellow/lightgreen — lo suavizo */ #duplicados_dg tbody tr[style*="yellow"] { background: var(--cospac-yellow-50) !important; box-shadow: inset 3px 0 0 var(--cospac-yellow); } #duplicados_dg tbody tr[style*="lightgreen"] { background: var(--cospac-green-50) !important; box-shadow: inset 3px 0 0 var(--cospac-green-500); } /* Referencias de colores (inputs disabled de "Facturas Pagas / Impagas") */ input[type="text"][value="Facturas Pagas"] { background: var(--cospac-green-50) !important; border: 1px solid var(--cospac-green-300) !important; color: var(--cospac-green-900) !important; box-shadow: inset 3px 0 0 var(--cospac-green-500); } input[type="text"][value="Facturas Impagas"] { background: var(--cospac-yellow-50) !important; border: 1px solid var(--cospac-yellow-700) !important; color: #6B4A00 !important; box-shadow: inset 3px 0 0 var(--cospac-yellow); } /* ====================== 9. LABELS COLOREADOS ============================== */ /* Labels azules tipo "Ruta:", "Folio:" en el modal de facturas */ .modal-body label[style*="color: blue"], .modal-body label[style*="color:blue"] { color: var(--cospac-green-700) !important; font-family: var(--font-display) !important; font-weight: 600 !important; text-transform: uppercase; font-size: 12px !important; letter-spacing: 0.06em; margin-right: 6px; } /* Texto chico institucional */ small, .text-muted { color: var(--ink-mute) !important; font-size: 13px !important; } /* ====================== 10. ALERTS / ADVERTENCIAS ========================= */ .alert { border-radius: var(--r-md); border: 0; border-left: 4px solid; padding: 14px 18px; font-weight: 500; } .alert-success { background: var(--cospac-green-50); border-color: var(--cospac-green-500); color: var(--cospac-green-900); } .alert-warning { background: var(--cospac-yellow-50); border-color: var(--cospac-yellow); color: #6B4A00; } .alert-danger { background: var(--danger-50); border-color: var(--danger); color: var(--danger); } .alert-info { background: #E7F1FB; border-color: var(--info); color: #0F4E80; } /* ====================== 11. CARDS / PREGUNTAS FRECUENTES ================== */ #integration-list ul { list-style: none; padding: 0; } #integration-list li { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); } #integration-list li:hover { border-color: var(--cospac-green-300); box-shadow: var(--shadow-sm); } #integration-list .expand { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; } #integration-list .right-arrow { width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--cospac-green-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } #integration-list h4 { margin: 0; font-family: var(--font-display) !important; font-size: 15px !important; font-weight: 600; } #integration-list .detail { padding: 0 18px 16px 60px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; } /* ====================== 12. ACCESOS ======================================= */ .btn-success.btn-block.btn-lg img, .btn-primary.btn-block.btn-lg img { margin-right: 6px; vertical-align: middle; } /* ====================== 13. FOOTER / MISC ================================= */ .myFooter { background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-xs) !important; text-shadow: none !important; color: var(--ink-soft) !important; } /* Loaders / HoldOn */ .holdon-overlay { background: rgba(14, 36, 33, .35) !important; } /* Imagenes con borde dorado en captures: logoTitulo, etc. */ #containerImg img { max-width: 220px; } /* ====================== 14. MERCADOPAGO MODAL ============================= */ #wallet_container { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px; background: var(--cospac-green-50); margin-top: 10px; min-height: 60px; } .mp-loading { color: var(--cospac-green-700); font-style: italic; } /* ====================== 15. SCROLLBAR ===================================== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bone); } ::-webkit-scrollbar-thumb { background: var(--cospac-green-300); border-radius: var(--r-pill); border: 2px solid var(--bone); } ::-webkit-scrollbar-thumb:hover { background: var(--cospac-green-500); } /* ====================== 16. ANIM ENTRADA ================================== */ @keyframes cospac-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .div_login, .modal.in .modal-content { animation: cospac-fade-up .35s var(--ease-out) both; } /* ====================== 17. RESPONSIVE TWEAKS ============================= */ @media (max-width: 768px) { h1, .h1 { font-size: 24px; } h2, .h2 { font-size: 20px; } h3, .h3 { font-size: 17px; } .navbar.example2 { border-radius: var(--r-md); padding: 8px; } .nav > li > a { padding: 8px 12px !important; font-size: 14px !important; } .modal-body { padding: 16px !important; } }