/* ===================================================== AERFLASH - HOME REDESIGN (Figma aligned) ===================================================== */ /* ---------- Paleta corporativa ---------- */ :root{ --color-primary:#0b1430; /* Azul menú / títulos */ --color-primary-dark:#091329; /* Azul profundo */ --color-secondary:#1b1b1b; /* Gris muy oscuro */ --color-accent:#ffcc33; /* Amarillo corporativo */ --color-accent-hover:#f2b90a; /* Amarillo hover */ --color-accent-soft:#fff8dc; /* Amarillo muy claro */ --color-light-bg:#f4f5f8; /* Gris claro secciones */ --color-dark-bg:#071126; /* Azul casi negro (footer) */ --color-text:#1b1b1b; /* Texto principal */ --color-text-muted:#6c7583; /* Texto secundario */ --color-border:#e5e5e5; --color-white:#ffffff; /* Utilidades visuales */ --radius-sm:6px; --radius-md:8px; --radius-lg:14px; --shadow-sm:0 2px 6px rgba(0,0,0,.10); --shadow-md:0 4px 12px rgba(0,0,0,.15); --shadow-lg:0 8px 20px rgba(0,0,0,.25); } /* ---------- Scope opcional para aislar estilos ---------- Añade class="redesign-mode" al si deseas encapsular */ .redesign-mode *{ box-sizing:border-box; font-family:'Poppins',sans-serif; } /* ===================================================== HEADER ===================================================== */ .header-redesign{ font-family:'Poppins',sans-serif; } /* Franja superior (logo) */ .header-top{ background:var(--color-secondary); height:80px; display:flex; align-items:flex-end; justify-content:flex-start; padding:0 0 15px 200px; } .header-top .logo img{ height:50px; width:auto; display:block; } /* Franja inferior (menú) */ .navbar-redesign{ background:var(--color-primary); height:60px; display:flex; align-items:center; justify-content:flex-start; padding-left:200px; border-top:3px solid var(--color-primary); border-bottom:2px solid var(--color-primary); } .nav-menu{ list-style:none; display:flex; gap:45px; margin:0; padding:0; align-items:center; } .nav-menu a{ color:var(--color-white); text-decoration:none; font-weight:500; font-size:15px; padding:10px 5px; position:relative; transition:color .3s ease; } .nav-menu a:hover{ color:var(--color-accent); } .nav-menu a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--color-accent); transition:width .3s ease; } .nav-menu a:hover::after{ width:100%; } /* Dropdown simple */ .dropdown{ position:relative; } .dropdown-menu{ position:absolute; top:100%; left:0; display:none; min-width:180px; list-style:none; padding:8px 0; background:var(--color-secondary); border-radius:0 0 var(--radius-md) var(--radius-md); box-shadow:var(--shadow-md); z-index:999; } .dropdown-menu li a{ display:block; padding:8px 20px; color:var(--color-white); text-decoration:none; font-weight:400; } .dropdown-menu li a:hover{ background:var(--color-accent); color:var(--color-primary); } .dropdown:hover>.dropdown-menu{ display:block; } .caret{ font-size:.7em; margin-left:5px; } /* Responsive header */ @media(max-width:768px){ .header-top{ padding-left:16px; } .navbar-redesign{ padding-left:16px; } .nav-menu{ flex-direction:column; gap:10px; align-items:flex-start; } .dropdown-menu{ position:static; background:var(--color-primary); } } /* ===================================================== CARRUSEL ===================================================== */ .carousel-redesign{ width:100%; height:450px; overflow:hidden; position:relative; background:var(--color-primary); } .carousel-redesign .carousel-inner{ width:100%; height:100%; } .carousel-redesign .banner-img{ width:100%; height:100%; object-fit:cover; border:none; } /* Indicadores */ .carousel-indicators{ bottom:15px; } .carousel-indicators li{ width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.5); border:none; margin:3px; transition:all .3s ease; } .carousel-indicators .active{ background:var(--color-accent); transform:scale(1.2); } /* Flechas */ .carousel-control{ width:5%; background:transparent; opacity:.7; transition:opacity .3s ease; } .carousel-control:hover{ opacity:1; } .carousel-control .glyphicon{ color:var(--color-white); font-size:28px; text-shadow:0 0 5px rgba(0,0,0,.3); } /* Responsivo */ @media(max-width:992px){ .carousel-redesign{ height:420px; } .carousel-redesign .banner-img{ height:420px; } } @media(max-width:768px){ .carousel-redesign{ height:360px; } .carousel-redesign .banner-img{ height:360px; } } /* ===================================================== SERVICIOS (cards de imagen) ===================================================== */ .servicios-redesign{ background:var(--color-white); padding:80px 0; text-align:center; } .container-servicios{ max-width:1200px; margin:0 auto; padding:0 20px; } .titulo-seccion{ font-size:2.3rem; font-weight:700; color:var(--color-primary); margin:0 0 10px; } .subtitulo-seccion{ color:var(--color-text-muted); font-size:1.1rem; margin:0 0 50px; } .grid-servicios-img{ display:grid; gap:40px; justify-items:center; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .card-servicio-img{ position:relative; width:100%; max-width:327px; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); transition:transform .3s ease, box-shadow .3s ease; } .card-servicio-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; } .card-servicio-img:hover img{ transform:scale(1.05); } .overlay-servicio{ position:absolute; left:0; bottom:0; width:100%; height:35%; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 100%); display:flex; align-items:flex-end; justify-content:center; padding-bottom:18px; } .overlay-servicio h3{ color:var(--color-white); font-size:1.2rem; font-weight:600; margin:0; } .card-servicio-img:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); } @media(max-width:768px){ .grid-servicios-img{ gap:25px; } .overlay-servicio h3{ font-size:1rem; } } /* ===================================================== NOSOTROS + VENTAJAS (acordeón) ===================================================== */ .nosotros-redesign{ background:var(--color-white); padding:80px 0; } .container-nosotros{ max-width:1200px; margin:0 auto; padding:0 20px; display:flex; flex-wrap:wrap; gap:60px; align-items:flex-start; } .columna-nosotros,.columna-ventajas{ flex:1 1 500px; } .linea-divisoria{ width:100%; height:2px; background:var(--color-border); margin:10px 0 25px; } .columna-nosotros h2,.columna-ventajas h2{ color:var(--color-primary); font-weight:900; margin:0; font-size: 45px; } .nosotros-contenido{ display:flex; gap:20px; align-items:flex-start; } .nosotros-contenido img{ width:160px; border-radius:var(--radius-md); } .nosotros-contenido p{ color:var(--color-text); font-size:1.6rem; line-height:1.6; margin:0; } /* Acordeón */ .accordion{ display:flex; flex-direction:column; gap:10px; } .accordion-item{ background:var(--color-accent); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); } .accordion-btn{ width:100%; text-align:left; border:none; cursor:pointer; padding:15px 20px 15px 44px; /* deja espacio para el icono */ font-weight:600; font-size:1.4rem; line-height:1.3; display:flex; align-items:center; gap:10px; background:var(--color-accent); color:var(--color-primary-dark); position:relative; transition:background .3s ease; } .accordion-btn:hover{ background:var(--color-accent-hover); } .accordion-btn .icono{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; color:var(--color-primary-dark); user-select:none; } /* estado activo (clase la maneja JS) */ .accordion-item.active .accordion-btn{ background:var(--color-accent-hover); } .accordion-content{ background:var(--color-accent-soft); color:#333; font-size:1.6rem; line-height:1.6; overflow:hidden; max-height:0; transition:max-height .4s ease; padding:0 20px; } .accordion-content p{ margin:0; padding:12px 0; } /* ===================================================== NOTICIAS (principal + tabs) ===================================================== */ .noticias-redesign{ background:var(--color-white); padding:80px 0; } .container-noticias{ max-width:1200px; margin:0 auto; padding:0 20px; } .noticias-redesign h2{ font-size:3rem; font-weight:700; color:var(--color-primary); margin:0 0 5px; } /* Reutiliza .linea-divisoria */ .noticias-contenido{ display:flex; flex-wrap:wrap; gap:40px; } .columna-izquierda{ flex:2; } .columna-derecha{ flex:1; display:flex; flex-direction:column; gap:25px; } .noticia-img img{ width:100%; border-radius:var(--radius-lg); } .noticia-texto h3{ font-weight:700; font-size:3rem; color:var(--color-primary); margin-top:15px; } .noticia-texto p{ font-size:1.3rem; color:var(--color-text); line-height:1.6; } .noticia-footer{ margin-top:15px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; } .footer-info{ display:flex; align-items:center; gap:15px; font-size:.9rem; } .footer-info i{ color:#555; } .btn-leer{ background:var(--color-primary); color:var(--color-white); padding:10px 24px; border:none; border-radius:var(--radius-md); font-size:.9rem; transition:background .3s ease; } .btn-leer:hover{ background:var(--color-accent); color:var(--color-primary); } /* Tabs */ .news-tabs{ display:flex; width:420px; margin-left:auto; border:1px solid #cfd8dc; border-radius:4px; overflow:hidden; } .news-tab{ flex:1 1 0; padding:10px 0; font-size:13px; background:var(--color-white); color:var(--color-text); border:0; cursor:pointer; transition:background .2s,color .2s; } .news-tab.is-active{ background:#e5f1ff; color:#0b5ed7; font-weight:600; } /* Paneles */ .news-pane{ display:none; } .news-pane.is-active{ display:block; animation:fadeIn .4s ease; } @keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} } .bloque{ display:flex; gap:16px; align-items:flex-start; margin-top:18px; } .icono img{ width:64px; height:64px; display:block; } .texto h4{ margin:0; font-weight:700; color:var(--color-primary); font-size:1.6rem; } .texto p{ margin:6px 0 0; color:var(--color-text); font-size:1.3rem; } @media(max-width:992px){ .noticias-contenido{ flex-direction:column; } .news-tabs{ width:100%; } } /* FIX de visibilidad en pestañas de Noticias */ .noticias-redesign .news-pane { display: none; opacity: 0; visibility: hidden; height: 0; transition: all 0.3s ease; } .noticias-redesign .news-pane.is-active { display: block; opacity: 1; visibility: visible; height: auto; animation: fadeIn 0.4s ease; } /* ===================================================== TARJETAS DE MANUALES (estilo legado) ===================================================== */ .pricign-box { border: solid 1px #444; -webkit-box-shadow: 3px 3px 8px 0 #ccc; -moz-box-shadow: 3px 3px 8px 0 #ccc; box-shadow: 3px 3px 8px 0 #ccc; margin-bottom: 20px; transition: all 0.3s; } .pricign-box:hover { -webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.39); box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.39); } .pricing-box-header { color: #fff; background-color: #444; padding: 10px; } .pricing-box-header > h2 { margin: 0 0 10px 0; padding: 0; line-height: 100%; font-size: 2.2em; text-align: center; color: #fff; } .pricing-box-header > p { font-size: 0.9em; font-weight: 300; text-align: center; margin: 0; } .pricing-box-price { padding: 10px; margin-bottom: 7px; background-color: #ededed; border-bottom: solid 1px #ddd; } .pricing-box-price h3 { margin: 0; padding: 0; line-height: 100%; font-size: 2.6em; text-align: center; } .pricing-box-price h3 > sub { font-size: 0.6em; } .pricing-box-content > ul { padding: 0; } .pricing-box-content > ul > li { list-style-type: none; padding: 7px 0; border-bottom: dotted 1px #ddd; vertical-align: top; } .pricing-box-content > ul > li > i { margin: 0 14px; font-size: 1.4em; list-style-position: inside; } .pricing-box-footer { margin: 10px auto; text-align: center; } .pricign-box-pro { border-color: #00708c; } .pricign-box-pro > .pricing-box-header { color: #fff; background-color: #00708c; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================== TECNOLOGÍA Y SERVICIOS (grid de imágenes) ===================================================== */ .tecnologia-redesign{ background:var(--color-white); padding:80px 0; } .container-tecnologia{ max-width:1200px; margin:0 auto; padding:0 20px; text-align:center; } .tecnologia-redesign h2{ font-size:3rem; font-weight:700; color:var(--color-primary); margin:0 0 5px; } .tecnologia-redesign .linea-divisoria{ width:100%; height:2px; background:var(--color-border); margin:0 0 40px; } .grid-tecnologia{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:25px; justify-items:center; } .card-tec{ position:relative; overflow:hidden; border-radius:var(--radius-lg); transition:transform .3s ease, box-shadow .3s ease; } .card-tec img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); display:block; } .card-tec:hover{ transform:scale(1.02); box-shadow:var(--shadow-md); } .lista-servicios { border: 3px solid var(--color-primary); border-left: 5px solid var(--color-primary); margin: 10px 0; } .lista-servicios > div { border-bottom: 1px solid var(--color-primary); padding: 12px 15px; color: var(--color-primary); font-size: 16px; background-color: #fff; } /* Elimina la línea inferior del último */ .lista-servicios > div:last-child { border-bottom: none; } /* ===================================================== FOOTER ===================================================== */ .footer { background-color: #071b3d; /* azul oscuro */ color: #fff; font-family: 'Arial', sans-serif; padding-top: 30px; } .footer-container { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 40px; } .footer-column { flex: 1; min-width: 150px; } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column li { margin-bottom: 8px; } .footer-column a { color: #ffffff; text-decoration: none; font-size: 14px; transition: color 0.3s ease; } .footer-column a:hover { color: var(--color-primary, #00a9d3); } /* Columna derecha con logos */ .footer-logos { display: flex; flex-direction: row; gap: 50px; } .footer-logo-item { text-align: center; color: #fff; max-width: 220px; } .footer-logo-item img { max-width: 140px; margin: 5px 0; } .footer-label { font-weight: bold; font-size: 13px; color: #e4e4e4; } .footer-desc { font-size: 12px; line-height: 1.3; color: #d3d3d3; } /* Sección inferior */ .footer-bottom { text-align: center; background-color: var(--color-primary); font-size: 12px; padding: 10px 0; } .footer-bottom a { color: var(--color-accent, #00a9d3); text-decoration: none; } .footer-bottom a:hover { text-decoration: underline; } /* ===================================================== UTILIDADES (márgenes, helpers mínimos) ===================================================== */ .u-center{ display:flex; align-items:center; justify-content:center; } .u-hidden{ display:none !important; } .u-mb-0{ margin-bottom:0 !important; } .u-mb-10{ margin-bottom:10px !important; } .u-mb-20{ margin-bottom:20px !important; } .layout-wrapper { display:flex; flex-direction:column; min-height:100vh; } .layout-body { display:flex; } .sidebar-panel { width:250px; background:#f7f9fc; } .main-content { flex:1; padding:2rem; } .section-header { background:var(--color-primary); color:#fff; padding:1rem 2rem; } /* === AERFLASH WEBQUERY / HOME REDESIGN UNIFICADO === */ /* === LAYOUT BASE === */ .layout-container { display: flex; width: 100%; min-height: 80vh; } /* ===== SIDEBAR ===== */ .sidebar-redesign { background-color: #f4f6fa; width: 260px; min-height: calc(100vh - 120px); padding: 25px 20px; border-right: 1px solid #e0e6ef; display: flex; flex-direction: column; gap: 25px; } /* Menú estrictamente vertical */ .sidebar-redesign .nav-menu { list-style: none; margin: 0; padding: 0; display: block; /* fuerza columna */ } .sidebar-redesign .nav-menu li { margin-bottom: 10px; } .sidebar-redesign .nav-menu a { display: block; padding: 10px 12px; background-color: transparent; color: #333; text-decoration: none; font-weight: 500; border-left: 4px solid transparent; border-radius: 4px; transition: all 0.25s ease; } .sidebar-redesign .nav-menu a:hover, .sidebar-redesign .nav-menu a.active { background-color: #eaf3fc; border-left-color: var(--color-primary, #0072ce); color: var(--color-primary, #0072ce); } /* ===== CAJA DE ESTADOS ===== */ .sidebar-redesign .estado-box { background: #fff; border-radius: 6px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .sidebar-redesign .estado-box h5 { color: var(--color-primary, #0072ce); font-weight: 700; font-size: 15px; text-transform: uppercase; border-bottom: 2px solid var(--color-primary, #0072ce); margin-bottom: 10px; padding-bottom: 5px; } /* ===== CONTENIDO PRINCIPAL ===== */ .content-redesign { flex: 1; background: #fff; padding: 40px; min-height: calc(100vh - 120px); display: flex; flex-direction: column; justify-content: flex-start; } .component-element { max-width: 1200px; margin: 0 auto 0 20px; width: 95%; } /* ===== ENCABEZADO Y TÍTULO ===== */ .section-header, .wrap-title { background-color: #0b1534; color: #fff; padding: 25px 40px; } .page-title { font-size: 32px; font-weight: 700; margin: 0 0 10px 0; } /* ===== BREADCRUMB AZUL CORPORATIVO ===== */ .wrap-title .breadcrumb { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 10px 16px; background-color: #10214a; /* azul corporativo más claro que el header */ border-radius: 6px; font-size: 14px; } .wrap-title .breadcrumb li { color: #d8e2f1; } .wrap-title .breadcrumb li + li:before { content: "›"; color: #a8b7d5; margin: 0 6px; } .wrap-title .breadcrumb a { color: #ffffff; text-decoration: none; transition: color 0.3s ease; font-weight: 500; } .wrap-title .breadcrumb a:hover { color: #00a9d3; } .wrap-title .breadcrumb .active { color: #bcd2ff; font-weight: 600; } /* ===== RESPONSIVE ===== */ @media (max-width: 992px) { .layout-container { flex-direction: column; } .sidebar-redesign { width: 100%; min-height: auto; border-right: none; border-bottom: 1px solid #e0e6ef; } .content-redesign { padding: 20px; } .component-element { margin: 0 auto; width: 100%; } } /* ===== BREADCRUMB AZUL CORPORATIVO ===== */ .wrap-title .breadcrumb { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 10px 16px; background-color: #0b1534; /* mismo color que el header */ border-radius: 6px; font-size: 14px; } .wrap-title .breadcrumb li { color: #d8e2f1; /* texto suave */ } .wrap-title .breadcrumb li + li:before { content: "›"; color: #8fa3c3; /* separador ligeramente más claro */ margin: 0 6px; } .wrap-title .breadcrumb a { color: #ffffff; text-decoration: none; transition: color 0.3s ease; font-weight: 500; } .wrap-title .breadcrumb a:hover { color: #00a9d3; /* azul claro hover */ } .wrap-title .breadcrumb .active { color: #bcd2ff; font-weight: 600; } /* ===== ENCABEZADO PRINCIPAL ===== */ .section-header { background-color: #0b1534; /* azul corporativo */ color: #fff; padding: 25px 40px 15px 40px; border-bottom: 1px solid #0b1534; } .page-title { font-size: 32px; font-weight: 700; margin: 0; } /* ===== BREADCRUMB DENTRO DEL ÁREA BLANCA ===== */ .breadcrumb-container { background: #ffffff; padding: 12px 40px; border-bottom: 1px solid #e6e9ef; } .breadcrumb { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; } .breadcrumb li { color: #555; } .breadcrumb li + li:before { content: "›"; color: #999; margin: 0 6px; } .breadcrumb a { color: var(--color-primary, #0072ce); text-decoration: none; transition: color 0.3s ease; } .breadcrumb a:hover { color: #005bb5; } .breadcrumb .active { color: #222; font-weight: 600; } /* ===== NORMALIZACIÓN DEL DATEPICKER ===== */ /* Input base */ input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { background-color: #fff !important; color: #333 !important; border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 14px; transition: all 0.2s ease; appearance: none; /* evita que use el tema del sistema */ } /* Hover y focus */ input[type="date"]:hover, input[type="datetime-local"]:hover, input[type="time"]:hover { border-color: var(--color-primary, #0072ce); } input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus { outline: none; border-color: var(--color-primary, #0072ce); box-shadow: 0 0 0 2px rgba(0,114,206,0.1); } /* Ícono del calendario (Chrome/WebKit) */ input[type="date"]::-webkit-calendar-picker-indicator { color: transparent; opacity: 1; background: url("data:image/svg+xml;charset=UTF-8,") no-repeat center; background-size: 18px 18px; cursor: pointer; } /* Firefox: fuerza el modo claro */ @media (prefers-color-scheme: dark) { input[type="date"], input[type="datetime-local"], input[type="time"] { background-color: #fff !important; color: #333 !important; } } /* ==== ESTILOS FORZADOS PARA COMPONENTE FECHA === */ #f_desde.form-control, #f_hasta.form-control { background-color: #ffffff !important; color: #333 !important; border: 1px solid #d0d7e1 !important; border-radius: 6px; font-size: 14px; height: 36px; padding: 6px 10px; transition: all 0.2s ease-in-out; } #f_desde:focus, #f_hasta:focus { border-color: var(--color-primary, #0072ce) !important; box-shadow: 0 0 0 2px rgba(0,114,206,0.15); outline: none; } /* ===== POPUP DE DATEPICKER (jQuery/Bootstrap) ===== */ .datepicker-dropdown { background-color: #fff !important; border: 1px solid #ccc !important; box-shadow: 0 4px 8px rgba(0,0,0,0.1); color: #333 !important; font-size: 13px; border-radius: 6px; z-index: 1051 !important; } /* Celda activa */ .datepicker table tr td.active, .datepicker table tr td.active:hover { background-color: var(--color-primary, #0072ce) !important; color: #fff !important; } /* Hover */ .datepicker table tr td.day:hover { background-color: #eaf3fc !important; cursor: pointer; } /* ===== LOGIN AEROFLASH ===== */ .login-section { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); background: #f6f8fc; padding: 40px 15px; } .login-container { background: #ffffff; border: 1px solid #e1e5ef; border-radius: 10px; padding: 40px 50px; max-width: 420px; width: 100%; box-shadow: 0 6px 15px rgba(0,0,0,0.05); animation: fadeInUp 0.4s ease; } /* Animación de entrada */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Encabezado del login */ .login-header { text-align: center; margin-bottom: 25px; } .login-header h2 { font-weight: 700; color: var(--color-primary, #0b1534); margin-bottom: 5px; } .login-header p { font-size: 15px; color: #777; margin: 0; } /* Panel */ .login-panel { background: #fff; } .login-input { display: flex; align-items: center; } .login-input .input-group-addon { background-color: #eef2f9; border: 1px solid #d3d8e2; border-right: 0; padding: 8px 12px; color: #555; border-radius: 6px 0 0 6px; } .login-input .form-control { border: 1px solid #d3d8e2; border-left: 0; border-radius: 0 6px 6px 0; font-size: 14px; height: 40px; } .login-input .form-control:focus { border-color: var(--color-primary, #0072ce); box-shadow: 0 0 0 2px rgba(0,114,206,0.15); outline: none; } /* Botón */ .btn-login { padding: 8px 22px; border-radius: 6px; font-weight: 600; background-color: var(--color-primary, #0072ce); border: none; transition: all 0.2s ease-in-out; } .btn-login:hover { background-color: #005fa3; } /* Mensaje de error */ #error_message { font-size: 13px; text-align: center; margin-top: 10px; } /* Responsivo */ @media (max-width: 576px) { .login-container { padding: 30px 25px; } } /* ======== PANEL USUARIO / LOGIN DROPDOWN ======== */ .user-dropdown .dropdown-menu { min-width: 260px; padding: 20px 18px; background-color: #ffffff; border: 1px solid #e2e6ef; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); } .user-dropdown a.dropdown-toggle { font-weight: 500; color: #fff !important; display: flex; align-items: center; gap: 6px; } .user-dropdown a.dropdown-toggle:hover { color: #cfdaf3 !important; } /* LOGIN EN NAVBAR */ .dropdown-login h4.login-title { font-weight: 600; text-align: center; color: var(--color-primary, #0b1534); margin-bottom: 15px; } .dropdown-login .login-input .input-group-addon { background-color: #eef2f9; border: 1px solid #d3d8e2; border-right: 0; border-radius: 6px 0 0 6px; color: #555; } .dropdown-login .login-input .form-control { border: 1px solid #d3d8e2; border-left: 0; border-radius: 0 6px 6px 0; font-size: 14px; height: 38px; } .dropdown-login .btn-login { border-radius: 6px; font-weight: 600; width: 100%; padding: 8px 0; transition: all 0.25s ease-in-out; } .dropdown-login .btn-login:hover { background-color: #005fa3; } /* ======== PERFIL ACTIVO ======== */ .dropdown-profile .profile-box { text-align: center; padding: 10px 0; } .profile-avatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #0072ce; margin-bottom: 8px; } .profile-name { font-weight: 700; color: #333; margin: 0; } .profile-id { font-size: 13px; color: #666; } .btn-outline-danger { color: #c0392b; border: 1px solid #c0392b; padding: 4px 10px; border-radius: 4px; transition: all 0.2s ease-in-out; } .btn-outline-danger:hover { background-color: #c0392b; color: #fff; } /* Animaciones */ .animated.fadeInDown { animation: fadeInDown 0.3s ease-in-out; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ======= CONSULTA PAQUETERÍA ======= */ /* Ajuste de layout */ .layout-container { display: flex; align-items: flex-start; width: 100%; min-height: 80vh; } /* Sidebar */ .sidebar-redesign { background-color: #f4f6fa; width: 260px; padding: 25px 20px; border-right: 1px solid #e0e6ef; min-height: calc(100vh - 180px); } .sidebar-redesign .nav-menu { list-style: none; margin: 0; padding: 0; } .sidebar-redesign .nav-menu li { margin-bottom: 8px; } .sidebar-redesign .nav-menu a { display: block; padding: 10px 12px; color: #333; text-decoration: none; font-weight: 500; border-left: 3px solid transparent; border-radius: 4px; transition: all 0.25s ease; } .sidebar-redesign .nav-menu a:hover, .sidebar-redesign .nav-menu a.active { background-color: #eaf3fc; border-left-color: var(--color-primary, #0072ce); color: var(--color-primary, #0072ce); } /* Caja de estados */ .estado-box { background: #fff; border-radius: 6px; padding: 15px; margin-top: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .estado-box h5 { color: var(--color-primary, #0072ce); font-weight: 700; margin-bottom: 10px; } .estado-table { width: 100%; font-size: 13px; color: #444; } .estado-table td { padding: 4px 6px; } /* Contenido */ .content-redesign { flex: 1; background: #fff; padding: 40px 50px; min-height: calc(100vh - 180px); border-left: 1px solid #e0e6ef; } /* Breadcrumb */ .breadcrumb-container { background: #fff; padding: 10px 20px; border-bottom: 1px solid #e0e6ef; } .breadcrumb { margin: 0; background: transparent; font-size: 14px; } .breadcrumb li a { color: var(--color-primary, #0072ce); text-decoration: none; } .breadcrumb li.active { color: #666; } /* ======== CONSULTA PIEZAS / CONS AWQ ======== */ .aeroflash-consulta { background: #fff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .consulta-title { color: var(--color-primary, #0b1534); font-weight: 700; font-size: 18px; margin-bottom: 20px; border-bottom: 2px solid var(--color-primary, #0072ce); padding-bottom: 6px; } .consulta-box label.form-label { font-weight: 600; color: #444; margin-bottom: 5px; display: block; } .consulta-box .form-control { border: 1px solid #ccd4e0; border-radius: 6px; height: 38px; transition: all 0.2s ease-in-out; } .consulta-box .form-control:focus { border-color: var(--color-primary, #0072ce); box-shadow: 0 0 0 2px rgba(0,114,206,0.15); } .consulta-box .input-group-addon { background-color: #eef2f8; border: 1px solid #ccd4e0; border-right: 0; color: #555; border-radius: 6px 0 0 6px; } .consulta-box .login-input .form-control { border-left: 0; border-radius: 0 6px 6px 0; } /* Botones */ .btn { border-radius: 6px; font-weight: 600; padding: 6px 18px; } .btn-outline-primary { border: 1px solid var(--color-primary, #0072ce); color: var(--color-primary, #0072ce); background: transparent; } .btn-outline-primary:hover { background-color: var(--color-primary, #0072ce); color: #fff; } /* Resultados */ .resultado-box { padding: 15px; background: #f9fbfe; border-radius: 8px; border: 1px solid #e3e8f1; } /* Modal */ .modal-content { border-radius: 10px; overflow: hidden; } .modal-header.bg-primary { background-color: var(--color-primary, #0072ce) !important; } .modal-footer.bg-light { background: #f7f9fc; } /* ======= CONSULTA SIMPLE (AERO) ======= */ .aeroflash-consulta { background: #fff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .consulta-title { color: var(--color-primary, #0b1534); font-weight: 700; font-size: 18px; margin-bottom: 20px; border-bottom: 2px solid var(--color-primary, #0072ce); padding-bottom: 6px; } .consulta-box label.form-label { font-weight: 600; color: #333; margin-bottom: 5px; } .consulta-box .form-control { border: 1px solid #ccd4e0; border-radius: 6px; height: 38px; transition: all 0.2s ease-in-out; } .consulta-box .form-control:focus { border-color: var(--color-primary, #0072ce); box-shadow: 0 0 0 2px rgba(0,114,206,0.15); } .consulta-box .input-group-addon { background-color: #eef2f8; border: 1px solid #ccd4e0; border-right: 0; color: #555; border-radius: 6px 0 0 6px; } .consulta-box .login-input .form-control { border-left: 0; border-radius: 0 6px 6px 0; } /* Botón */ .btn { border-radius: 6px; font-weight: 600; padding: 6px 18px; } .btn-primary { background-color: var(--color-primary, #0072ce); border: 1px solid var(--color-primary, #0072ce); } .btn-primary:hover { background-color: #005fa3; } /* Resultados */ .resultado-box { background: #f9fbfe; border: 1px solid #e3e8f1; border-radius: 8px; padding: 15px; } /* Modal */ .modal-content { border-radius: 10px; overflow: hidden; } .modal-header.bg-primary { background-color: var(--color-primary, #0072ce) !important; } .modal-footer.bg-light { background: #f7f9fc; } /* ======= CONSULTA PIEZAS DAV ======= */ .aeroflash-consulta { background: #fff; padding: 35px 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin: 40px auto; max-width: 1100px; } /* Encabezado del bloque */ .consulta-header { margin-bottom: 20px; } .consulta-title { color: var(--color-primary, #0b1534); font-weight: 700; font-size: 20px; margin: 0 0 6px 0; border-bottom: 2px solid var(--color-primary, #0072ce); padding-bottom: 5px; } .consulta-subtitle { font-size: 14px; color: #666; margin: 0 0 15px; } /* Campos */ .consulta-box label.form-label { font-weight: 600; color: #333; margin-bottom: 5px; } .consulta-box .form-control { border: 1px solid #ccd4e0; border-radius: 6px; height: 38px; transition: all 0.2s ease-in-out; } .consulta-box .form-control:focus { border-color: var(--color-primary, #0072ce); box-shadow: 0 0 0 2px rgba(0,114,206,0.15); } .consulta-box .input-group-addon { background-color: #eef2f8; border: 1px solid #ccd4e0; border-right: 0; color: #555; border-radius: 6px 0 0 6px; } .consulta-box .login-input .form-control { border-left: 0; border-radius: 0 6px 6px 0; } /* Botones */ .btn { border-radius: 6px; font-weight: 600; padding: 7px 20px; } .btn-primary { background-color: var(--color-primary, #0072ce); border: 1px solid var(--color-primary, #0072ce); } .btn-primary:hover { background-color: #005fa3; } /* Resultados */ .resultado-box { background: #f9fbfe; border: 1px solid #e3e8f1; border-radius: 8px; padding: 15px; } /* Modal */ .modal-content { border-radius: 10px; overflow: hidden; } .modal-header.bg-primary { background-color: var(--color-primary, #0072ce) !important; } .modal-footer.bg-light { background: #f7f9fc; } /* ====== PREIMPRESION VIEW ====== */ .bg-primary-gradient { background: linear-gradient(90deg, #0072ce 0%, #004a99 100%); color: #fff; padding: 25px 0; } .page-title { font-weight: 700; font-size: 24px; margin: 0; color: #fff; } .breadcrumb { background: transparent; padding: 0; margin: 10px 0 0; color: #fff; } .preimpresion-container { padding: 30px 0; } .btn-group .btn { font-weight: 600; border-radius: 6px; } .btn-light { background-color: #f9fafc; border: 1px solid #e0e6ef; color: #333; } .btn-light:hover { background-color: #eef2f7; } .btn-warning { background-color: #f8b84e; border: none; } .btn-warning:hover { background-color: #e7a83d; } .dropdown-menu { border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .component-element { background-color: #fff; border-radius: 8px; border: 1px solid #e3e8f1; } /* Zebra modal */ .modal-header.bg-warning { background-color: #f8b84e !important; } .modal-footer.bg-light { background-color: #f7f9fc; } /* === Ajuste para que el módulo Tickets ocupe todo el ancho === */ .layout-tickets { display: flex; align-items: flex-start; gap: 1.5rem; padding: 0 2rem; width: 100vw !important; max-width: 100vw !important; box-sizing: border-box; margin-left: calc(-50vw + 50%); } /* Sidebar */ .layout-tickets .sidebar-redesign { flex: 0 0 220px; background: #f8f9fb; border-right: 1px solid #e6e9ee; padding: 1.2rem 1rem; min-height: 100%; border-radius: 8px; } /* Contenido principal ampliado */ .layout-tickets .content-redesign { flex: 1; width: 100%; max-width: calc(100% - 220px); background: #fff; border: 1px solid #e6e9ee; border-radius: 8px; padding: 1.8rem 2rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); min-height: 80vh; box-sizing: border-box; } /* Hace que sidebar y contenido queden a la misma altura */ .layout-tickets .sidebar-redesign, .layout-tickets .content-redesign { align-self: stretch; } /* Breadcrumb y header coherentes */ .section-header { background-color: #0c1633; color: #fff; padding: 1.2rem 2rem; } .breadcrumb-container { background-color: #ffffff; border-bottom: 1px solid #e6e9ee; padding: 0.8rem 2rem; } /* Responsive */ @media (max-width: 992px) { .layout-tickets { flex-direction: column; padding: 0 1rem; } .layout-tickets .sidebar-redesign { flex: none; width: 100%; border-right: none; border-bottom: 1px solid #e6e9ee; } .layout-tickets .content-redesign { flex: none; max-width: 100%; width: 100%; padding: 1rem; } } /* === Alinear y expandir el header del módulo Tickets === */ .section-header, .wrap-title { position: relative; width: 100vw !important; /* ocupa todo el ancho */ left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background-color: #0c1633; /* mismo color base */ color: #fff; padding: 1rem 3rem; box-sizing: border-box; } /* Texto y breadcrumb centrados correctamente */ .section-header .container, .wrap-title .container { max-width: 100%; width: 100%; padding: 0 3rem; margin: 0 auto; } /* Alinear breadcrumb bajo el header */ .breadcrumb-container { margin-top: 0; padding-left: 3rem; padding-right: 3rem; } /* ==== Panel de usuario (navbar superior) ==== */ #panelUsuario .nav-link.user-toggle { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 500; transition: color 0.2s ease; } #panelUsuario .nav-link.user-toggle:hover { color: #9eb9ff; } /* ==== Dropdowns base (login y perfil) ==== */ .user-login-dropdown, .user-profile-dropdown { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 0.6rem; min-width: 270px; border-radius: 10px; background: #fff; border: 1px solid #e1e5ee; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); z-index: 1050; padding: 1rem 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; } /* ===== Encabezado del login ===== */ .user-login-dropdown h5 { font-size: 1rem; font-weight: 600; color: #0c1633; margin-bottom: 1rem; } /* ===== Input Groups ===== */ .user-login-dropdown .input-group { width: 100%; margin-bottom: 0.75rem; } .user-login-dropdown .input-group-text { border-radius: 6px 0 0 6px; background-color: #f5f7fa; } /* ==== PANEL DE USUARIO (NAVBAR SUPERIOR) ==== */ #panelUsuario { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; } #panelUsuario .nav-link.user-toggle { color: #fff; font-weight: 500; cursor: pointer; transition: color 0.2s ease; } #panelUsuario .nav-link.user-toggle:hover { color: #9eb9ff; } /* === Dropdown base (ambos tipos) === */ .user-login-dropdown, .user-profile-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); border-radius: 10px; background: #fff; border: 1px solid #e1e5ee; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); min-width: 260px; text-align: center; padding: 18px 20px; opacity: 0; visibility: hidden; transition: all 0.25s ease; z-index: 1050; } /* Mostrar dropdown al pasar el mouse */ #panelUsuario .dropdown:hover .user-login-dropdown, #panelUsuario .dropdown:hover .user-profile-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* === LOGIN DROPDOWN === */ .user-login-dropdown h5, .user-login-dropdown h4, .user-login-dropdown .section-title { font-size: 1rem; font-weight: 600; color: #0c1633; margin-bottom: 10px; } .user-login-dropdown .input-group { margin-bottom: 10px; } .user-login-dropdown .input-group-text { background-color: #e8edff; border: 1px solid #cfd7f2; color: #0c1633; border-radius: 6px 0 0 6px; } .user-login-dropdown input.form-control { background-color: #f8faff; border: 1px solid #cfd7f2; color: #0c1633; } .user-login-dropdown input.form-control:focus { border-color: #5c74f9; box-shadow: 0 0 0 2px rgba(92, 116, 249, 0.2); } /* Botón de ingresar */ .user-login-dropdown button#btnLogin { background-color: #0c1633; border: none; font-weight: 600; padding: 8px 16px; border-radius: 8px; color: #fff; transition: background 0.2s ease; } .user-login-dropdown button#btnLogin:hover { background-color: #15275a; } /* === PERFIL (YA LOGUEADO) === */ .user-profile-dropdown { padding: 20px 0 10px; } .user-profile-dropdown img { width: 70px; height: 70px; border-radius: 50%; margin-bottom: 10px; } .user-profile-dropdown h4 { font-size: 1rem; margin: 0; color: #0c1633; } .user-profile-dropdown small { display: block; color: #777; font-size: 0.85rem; margin-bottom: 10px; } /* Botón cerrar sesión */ .user-profile-dropdown a { display: inline-block; color: #b41e1e; font-weight: 600; font-size: 0.9rem; text-decoration: none; margin-top: 4px; transition: color 0.2s; } .user-profile-dropdown a:hover { color: #ff4a4a; } /* === Animación de aparición === */ #panelUsuario .dropdown:hover .user-login-dropdown, #panelUsuario .dropdown:hover .user-profile-dropdown { animation: fadeInDropdown 0.25s ease; } @keyframes fadeInDropdown { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* === Ajuste visual del hover === */ #panelUsuario .dropdown { position: relative; } #panelUsuario .dropdown:hover > a { color: #9eb9ff; } /* Fondo principal del popup */ .datetimepicker.dropdown-menu, .datetimepicker table { background-color: #fff !important; color: #000 !important; border: 1px solid #d9dee8 !important; border-radius: 8px !important; } /* Celdas normales */ .datetimepicker table td, .datetimepicker table th { color: #333 !important; background: #fff !important; } /* Hover */ .datetimepicker table td:hover, .datetimepicker table th:hover { background: #f3f6fc !important; color: #000 !important; } /* Día seleccionado */ .datetimepicker table td.active, .datetimepicker table td.active:hover { background-color: #0d2a5b !important; /* azul Aeroflash */ color: #fff !important; border-radius: 6px !important; } /* Bordes y sombras */ .datetimepicker.dropdown-menu { box-shadow: 0 6px 18px rgba(0,0,0,0.1) !important; } /* Icono del input */ .input-group-addon i.fa-calendar { color: #0d2a5b !important; } /* ======= PANEL CONFIGURACIÓN / LAYOUT GENÉRICO ======= */ .layout-container { display: flex; width: 100%; min-height: calc(100vh - 160px); gap: 1rem; } .sidebar-panel { width: 250px; background: #f9fbfd; border-right: 1px solid #e0e4ec; padding: 1rem 0.5rem; border-radius: 8px; } .side-nav { list-style: none; margin: 0; padding: 0; } .side-nav li { margin-bottom: 8px; } .side-nav a { display: block; padding: 10px 14px; border-radius: 8px; color: #0c1633; font-weight: 500; text-decoration: none; transition: background 0.2s, color 0.2s; } .side-nav a:hover { background-color: #0c1633; color: #fff; } .content-panel { flex: 1; padding: 1.5rem; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .content-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.75); display: none; align-items: center; justify-content: center; z-index: 20; } .spinner-sm { border: 4px solid #e0e0e0; border-top: 4px solid #007bff; border-radius: 50%; width: 32px; height: 32px; animation: spin .8s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } /* ======================================================= CONSULTA TRACKING - AEROFLASH REDESIGN (CLEAN + SAFE VERSION) ======================================================= */ .tracking-section { background-color: var(--color-light-bg); background-image: url("../img/aeroflash/bg_tracking.svg"); background-repeat: no-repeat; background-size: cover; background-position: center top; min-height: 100vh; padding: 80px 0 120px; position: relative; z-index: 1; font-family: 'Poppins', sans-serif; } /* CONTENEDOR CENTRAL */ .tracking-container { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } /* ----------------------------- TÍTULO PRINCIPAL ------------------------------ */ .tracking-title { text-align: left; font-size: 2.8rem; font-weight: 700; color: var(--color-primary); margin-bottom: 20px; margin-top: -20px; } /* ----------------------------- CABECERA CON ICONO + TEXTO ------------------------------ */ .tracking-header { margin-top: 20px; } .tracking-header-icon { width: 90px; margin: 0 auto 20px; } .tracking-header-line1 { font-size: 2.0rem; color: var(--color-primary); font-weight: 300; margin: 0; } .tracking-header-line2 { font-size: 2.0rem; color: var(--color-primary); font-weight: 800; margin: 4px 0 14px; } .tracking-subtitle { color: var(--color-text-muted); font-size: 1.3rem; margin-bottom: 35px; } /* ----------------------------- INPUT DE TRACKING (FIGMA EXACTO) ------------------------------ */ .tracking-input-wrapper { width: 100%; max-width: 480px; margin: 0 auto 15px; text-align: left; } .tracking-label { font-size: 13px; font-weight: 600; color: #1b1b1b; margin-bottom: 5px; display: block; } /* Caja completa */ .tracking-box { display: flex; align-items: center; background: #ffffff; border: 1px solid #cfd3d8; /* Gris Figma */ border-radius: 10px; overflow: hidden; height: 46px; box-shadow: 0 4px 10px rgba(0,0,0,.08); } /* Input */ .tracking-box input { flex: 1; border: none; padding: 10px 14px; font-size: 14px; color: #1b1b1b; background: none; outline: none; } .tracking-box input::placeholder { color: #b8b8b8; } /* Botón */ .tracking-box button { background: #ffcc00; border: none; width: 48px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease; } .tracking-box button:hover { background: #e6b700; } .tracking-box button i { font-size: 18px; color: #0b1430; } /* ----------------------------- TEXTO DE AYUDA ------------------------------ */ .tracking-help { margin-top: 18px; font-size: 1.2rem; color: var(--color-text-muted); } .tracking-help a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .tracking-help a:hover { text-decoration: underline; } /* ----------------------------- RESPONSIVE ------------------------------ */ @media (max-width: 768px) { .tracking-title { text-align: center; } .tracking-header-line1, .tracking-header-line2 { text-align: center; } } /* Ajuste global para labels sobre inputs */ .control-label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 2px !important; /* ← ESTE ES EL SECRETO */ } /* Inputs más unidos al label */ .form-control, .input-group { margin-top: 0 !important; /* elimina espacio extra */ } /* Si quieres EXACTO como la maqueta del cliente */ .label-box { background: #0d6efd; padding: 6px 10px; border-radius: 4px 4px 0 0; color: white; font-weight: 600; font-size: 14px; }