/* ========================================================= CheckAuto SV — Global Dark + Responsive ========================================================= */ /* ---------- Variables base ---------- */ :root{ --ca-accent: #0ea5e9; --ca-bg: #181f25; --ca-slate-900: #0f172a; --ca-slate-800: #1e293b; --ca-text: #e5e7eb; --ca-muted: #94a3b8; /* alturas y medidas de navegación/carrusel */ --nav-h: 72px; /* alto efectivo de la navbar */ --car-ctrl-w: 4rem; /* ancho zona clic de flechas */ } @media (max-width: 992px){ :root{ --car-ctrl-w: 3.25rem; } } html, body { height: 100%; } body{ background: var(--ca-bg); color: var(--ca-text); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* ========================================================= Navbar / Offcanvas ========================================================= */ /* Marca/acento solo donde corresponde */ .navbar .navbar-brand .brand-accent, .navbar .navbar-brand .text-info { color: var(--ca-accent) !important; } /* Links activos/hover */ .navbar .nav-link.active, .navbar .nav-link:hover:not(.disabled){ color: var(--ca-accent) !important; } /* Botones más táctiles */ .navbar .btn{ border-radius: .75rem; } /* Offcanvas oscuro consistente */ .offcanvas.text-bg-dark{ background: #0b1220; } .offcanvas .nav-link{ padding: .6rem 0; } .offcanvas .nav-link.active, .offcanvas .nav-link:hover{ color: var(--ca-accent) !important; } /* Empuje del contenido cuando la navbar es transparente sobre el hero. El recibe la clase `navbar-over-hero` desde header.php */ .navbar-over-hero main{ margin-top: calc(var(--nav-h) + 10px) !important; } /* ========================================================= Hero + Carrusel ========================================================= */ /* El contenedor del hero (header) siempre gana aire bajo la navbar */ .navbar-over-hero .hero-header{ padding-top: 0; } /* Cada slide del hero: NO es flex (evita conflictos), mantiene altura y fondo */ .carousel-item.hero{ display: block !important; position: relative; min-height: clamp(420px, 70vh, 760px); background-size: cover; background-position: center; } /* Contenido centrado vertical + colchón lateral (igual al ancho de flechas) */ .carousel-item.hero .container{ min-height: inherit; display: flex; align-items: center; padding-left: calc(1rem + var(--car-ctrl-w)); padding-right: calc(1rem + var(--car-ctrl-w)); } /* Tarjeta de vidrio del hero por encima de las flechas */ .carousel-item.hero .glass.hero-content{ position: relative; z-index: 10; background: rgba(24,31,37,.18); border-radius: 1.5rem; padding: 3rem 2.5rem 2rem; box-shadow: 0 6px 30px rgba(0,0,0,.10); width: 100%; max-width: 700px; text-align: left; } @media (max-width: 768px){ .carousel-item.hero .glass.hero-content{ text-align: center; } } /* Títulos/subtítulos legibles */ .hero-title, .hero-subtitle{ text-shadow: 0 2px 12px rgba(0,0,0,.36); } /* Botones del hero */ .hero .btn-custom, .hero .btn-outline-light{ border: none; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.30); margin-right: 1rem; margin-bottom: .5rem; transition: background .2s, border-color .2s, color .2s; } .hero .btn-custom{ background: rgba(14,165,233,.95) !important; color: #fff !important; } .hero .btn-custom:hover{ background: #0284c7 !important; } .hero .btn-outline-light{ background: rgba(30,41,59,.80) !important; border: 1.5px solid #fff !important; color: #fff !important; } .hero .btn-outline-light:hover{ background: var(--ca-accent) !important; border-color: var(--ca-accent) !important; } /* Controles del carrusel: angostos y por debajo del contenido */ #heroCarousel .carousel-control-prev, #heroCarousel .carousel-control-next{ width: var(--car-ctrl-w) !important; z-index: 2 !important; /* el contenido del hero queda por encima */ opacity: .9; } /* ========================================================= Utilidades de layout ========================================================= */ /* Contenido principal con padding fluido solo cuando es .container */ main.container{ --ca-pad: min(4vw, 24px); padding-left: var(--ca-pad); padding-right: var(--ca-pad); } /* KPIs fluidos */ .kpi-value{ font-size: clamp(1.25rem, 4.5vw, 2.25rem); } /* Truncado y nowrap */ .nowrap{ white-space: nowrap; } .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Grids responsivos (accesos/cards) */ .dashboard-grid{ display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px){ .dashboard-grid{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px){ .dashboard-grid{ grid-template-columns: repeat(3, 1fr); } } /* ========================================================= Cards del dashboard ========================================================= */ .dashboard-card{ display: flex; align-items: center; gap: .7rem; padding: .95rem 1.25rem; border-radius: 1rem; font-weight: 600; background: rgba(30,41,59,.70); color: #fff; margin-bottom: 1rem; border: 2px solid transparent; transition: background .2s, border-color .2s, color .2s; box-shadow: 0 2px 12px rgba(0,0,0,.06); text-decoration: none !important; cursor: pointer; font-size: 1rem; } @media (min-width: 768px){ .dashboard-card{ padding: 1.1rem 1.5rem; font-size: 1.12rem; } } .dashboard-card:hover, .dashboard-card:focus{ background: rgba(14,165,233,.09); border-color: var(--ca-accent); color: var(--ca-accent); } .dashboard-card .bi{ font-size: 1.3em; margin-right: .3em; } /* Variantes */ .dashboard-card.warning{ border-color: #fde047; color: #fde047; background: rgba(250,204,21,.10); } .dashboard-card.warning:hover{ background: #fde04722; color: #d97706; } .dashboard-card.success{ border-color: #34d399; color: #34d399; background: rgba(16,185,129,.08); } .dashboard-card.success:hover{ background: #34d39922; color: #059669; } .dashboard-card.info{ border-color: var(--ca-accent); color: var(--ca-accent); background: rgba(14,165,233,.08); } .dashboard-card.info:hover{ background: #0ea5e922; color: #0284c7; } .dashboard-card.neutral{ border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,.07); } .dashboard-card.neutral:hover{ background: #6366f122; color: #3730a3; } /* ========================================================= Tablas (tema oscuro) ========================================================= */ .table{ --bs-table-color: var(--ca-text); --bs-table-bg: var(--ca-slate-900); --bs-table-striped-bg: rgba(148,163,184,.08); --bs-table-striped-color: var(--ca-text); --bs-table-border-color: rgba(148,163,184,.24); } .table td, .table th{ vertical-align: middle; } @media (max-width: 576px){ .table td, .table th{ padding: .5rem .5rem; } } /* Ocultar columnas por breakpoint */ .hide-xs{ display: none !important; } @media (min-width: 576px){ .hide-xs{ display: table-cell !important; } } .hide-sm{ display: none !important; } @media (min-width: 768px){ .hide-sm{ display: table-cell !important; } } /* ========================================================= Botones acento ========================================================= */ .btn-outline-info{ border-color: var(--ca-accent); color: var(--ca-accent); } .btn-outline-info:hover{ background: var(--ca-accent); color: #fff; } /* ========================================================= Footer ========================================================= */ .bg-footer{ background: var(--ca-slate-800); } .footer-logos img{ max-height: 32px; margin: 0 10px; opacity: .7; filter: grayscale(1); transition: opacity .2s, filter .2s; } .footer-logos img:hover{ opacity: 1; filter: grayscale(0); } /* ========================================================= Limpieza de componentes obsoletos ========================================================= */ .menu-btn, .menu-floating{ display: none !important; } /* por si quedó algo viejo */