/* Variables de marca modernizadas */
:root {
    --lhs-blue: #8C0002;      /* Un rojo más profundo y serio */
    --lhs-orange: #EDA13D;    /* El naranja de acción */
    --lhs-bg-light: #f8f9fa;
    --lhs-bg-light2: #f8f8f8;
    --lhs-text: #333333;
    --lhs-border: #e0e0e0;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--lhs-text);
    background-color: #ffffff;
    line-height: 1.6;
}

/* 1. Limpieza de Tablas (Para las tarifas de LHSBOX) */
table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100%;
    border: 1px solid var(--lhs-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
}

th {
    background-color: var(--lhs-blue) !important;
    color: white !important;
    font-weight: 600;
    padding: 12px 15px !important;
    text-transform: uppercase;
    font-size: 0.85rem;
}

td {
    padding: 12px 15px !important;
    border-bottom: 1px solid var(--lhs-border);
    background-color: white;
}

/* 2. Modernización de Formularios (Login y Cotizador) */
input[type="text"], 
input[type="password"], 
input[type="email"], 
select, 
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--lhs-border);
    border-radius: 6px;
    transition: all 0.3s ease;
    background-color: var(--lhs-bg-light);
}

input:focus {
    outline: none;
    border-color: var(--lhs-blue);
    box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.1);
    background-color: #fff;
}

/* 3. Botones con "Punch" */
.btn-lhs-primary {
    background-color: var(--lhs-orange);
    color: white;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    transition: transform 0.2s;
}

.btn-lhs-primary:hover {
    background-color: #e65c00;
    transform: translateY(-2px);
    color: white;
}

.btn-lhs-ingreso {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.btn-lhs-ingreso:hover {
    background-color: #750101;
    color: #ffffff;
    border: 2px solid #ffffff;
    transform: translateY(-2px);
}

/* 4. Tarjetas para el Sistema (Inputs del sistema PHP) */
.card-sistema {
    background: white;
    border: 1px solid var(--lhs-border);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* 5. Títulos */
h1, h2, h3 {
    color: var(--lhs-blue);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.transition { transition: all 0.3s ease; }
.hover-shadow:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
.ls-2 { letter-spacing: 2px; }
.grayscale img { filter: grayscale(100%); opacity: 0.7; transition: all 0.3s; }
.grayscale img:hover { filter: grayscale(0%); opacity: 1; }

footer {
    background-color: #1a1a1a !important; /* Un negro más suave */
}

.text-orange {
    color: var(--lhs-orange) !important;
}

.hover-white:hover {
    color: white !important;
    padding-left: 5px;
    transition: all 0.3s ease;
}

/* Para que el logo se vea blanco en el footer oscuro */
/*.brightness-0 { filter: brightness(0); }*/
/*.invert { filter: invert(1); }*/

/* Ajuste para inputs del footer */
footer .form-control::placeholder {
    color: #ccc;
    font-size: 0.8rem;
}

/* Corrección de visibilidad para el Footer */
footer a.text-muted {
    color: #adb5bd !important; /* Un gris claro visible sobre fondo oscuro */
    transition: all 0.3s ease;
}

footer a.text-muted:hover {
    color: #ffffff !important; /* Blanco total al pasar el mouse */
    text-decoration: none;
}

footer h6.text-orange {
    color: #eda13d !important; /* Aseguramos que el título resalte */
    margin-bottom: 1.5rem;
}

/* Opcional: Estilo para el input del newsletter en el footer */
footer .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

footer .form-control::placeholder {
    color: #888 !important;
}

/* 1. Color global para textos en el footer */
footer p, 
footer span, 
footer div, 
footer li {
    color: #d1d1d1 !important; /* Un gris claro suave, muy legible */
}

/* 2. Resalte para los títulos del footer */
footer h6 {
    color: var(--lhs-orange) !important; /* Usamos tu naranja de marca */
    font-weight: 700;
    letter-spacing: 1px;
}

/* 3. El Copyright y créditos del final */
.copy, .footer-bottom {
    background-color: #111 !important; /* Un negro un poco más intenso para contrastar */
    color: #888 !important;
    font-size: 0.85rem;
    padding: 15px 0;
}

.copy a {
    color: #aaa !important;
    text-decoration: none;
}

.copy a:hover {
    color: var(--lhs-orange) !important;
}

/* 4. Ajuste para los iconos de redes sociales */
footer .fs-5 i {
    color: #ffffff;
    transition: transform 0.3s ease, color 0.3s ease;
}

footer .fs-5 i:hover {
    color: var(--lhs-orange);
    transform: scale(1.2);
}

/* Forzar que el texto 'muted' en el footer sea legible */
footer .text-muted {
    color: #cbd5e0 !important; /* Un gris claro azulado muy moderno y legible */
    opacity: 1 !important;
}

/* También para los párrafos generales del footer por si acaso */
footer p {
    color: #cbd5e0 !important;
    margin-bottom: 1rem;
}

/* Resalte para los títulos de las columnas */
footer h6.text-orange {
    color: #eda13d !important;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: block;
}

/* Forzamos la prioridad absoluta para este resaltado */
section .text-highlight-light, 
section h2.text-highlight-light {
    color: #fff9db !important; 
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* ==========================================
   CARRUSEL DE PASOS (COMO COMPRAR) 
   ========================================== */

/* RESET ESTRUCTURAL PARA EL CARRUSEL */
.carouselcomo2 {
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}

/* Forzamos que los slides se mantengan en una sola fila horizontal */
.carouselcomo2 .slick-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
}

/* Forzamos que cada item ocupe el ancho completo y no se apile */
.carouselcomo2 .item {
    display: block !important;
    width: 100% !important;
    float: none !important; /* Matamos el float que los apila */
}

/* Aseguramos que la fila de Bootstrap dentro del slide no se rompa */
.carouselcomo2 .row {
    display: flex !important;
    flex-wrap: nowrap !important; /* Evita que el texto baje de la imagen */
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Flechas: Mantenerlas centradas y visibles */
.carouselcomo2 .slick-prev, 
.carouselcomo2 .slick-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
}

.carouselcomo2 .slick-prev { left: 10px !important; }
.carouselcomo2 .slick-next { right: 10px !important; }

/* 2. Estilo de los Puntos (Dots) Inferiores */
.carouselcomo2 .slick-dots {
    display: flex !important;
    justify-content: center;
    list-style: none !important;
    padding: 0;
    margin-top: 20px;
}

.carouselcomo2 .slick-dots li {
    margin: 0 5px;
    border: none !important;
}

.carouselcomo2 .slick-dots li button {
    font-size: 0;
    width: 12px;
    height: 12px;
    background: #ccc; 
    border-radius: 50%;
    border: none;
    transition: all 0.3s ease;
}

.carouselcomo2 .slick-dots li button:before {
    display: none !important; /* Elimina residuos de fuentes externas */
}

.carouselcomo2 .slick-dots li.slick-active button {
    background: var(--lhs-orange) !important;
    transform: scale(1.2);
}

/* 3. Flechas Modernas (Círculos Naranjas) */
.carouselcomo2 .slick-prev, 
.carouselcomo2 .slick-next {
    font-size: 0 !important;
    width: 45px !important;
    height: 45px !important;
    background: var(--lhs-orange) !important;
    border-radius: 50% !important;
    border: none !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}

.carouselcomo2 .slick-prev { left: -22px !important; }
.carouselcomo2 .slick-next { right: -22px !important; }

/* Iconos internos de las flechas */
.carouselcomo2 .slick-prev::before, 
.carouselcomo2 .slick-next::before {
    font-family: serif !important;
    font-size: 24px !important;
    color: white !important;
    opacity: 1 !important;
    display: block;
}

.carouselcomo2 .slick-prev::before { content: "←" !important; }
.carouselcomo2 .slick-next::before { content: "→" !important; }


/* 1. ELIMINAR LETRAS O IMÁGENES QUE SE ASOMAN (Muro invisible) */
.carouselcomo2 {
    overflow: hidden !important; 
    position: relative !important;
}



/* 3. CENTRAR LAS FLECHAS VERTICALMENTE (Para que no queden una arriba de otra) */
.carouselcomo2 .slick-prev, 
.carouselcomo2 .slick-next {
    top: 50% !important; 
    transform: translateY(-50%) !important;
    position: absolute !important;
    display: flex !important; /* Asegura que el icono esté al centro del círculo */
    align-items: center;
    justify-content: center;
}

/* Las sacamos un poquito del cuadro para que "floten" */
.carouselcomo2 .slick-prev { left: 10px !important; }
.carouselcomo2 .slick-next { right: 10px !important; }

/* 4. LIMPIEZA DE COLUMNAS (Para que el texto no se corra) */
.carouselcomo2 .row {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* ELIMINACIÓN DEFINITIVA DE RESIDUOS LATERALES */

.carouselcomo2 {
    overflow: hidden !important; /* El muro que corta todo lo que sobra */
    padding: 0 !important;      /* Evita que el padding deje ver los slides vecinos */
    margin: 0 auto !important;
}

.carouselcomo2 .slick-list {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Forzamos que el slide ocupe exactamente el ancho del cuadro blanco */
.carouselcomo2 .slick-slide {
    outline: none !important;
    margin: 0 !important;
    /* Evitamos cualquier borde o sombra interna que deje ver el fondo */
    border: none !important; 
}

/* Ajuste de las flechas para que no tapen esa zona de corte */
.carouselcomo2 .slick-prev { 
    left: 10px !important; 
    z-index: 110 !important; 
}
.carouselcomo2 .slick-next { 
    right: 10px !important; 
    z-index: 110 !important; 
}

/* Aseguramos que la fila de contenido tenga un respiro interno pero NO el carrusel */
.carouselcomo2 .item .row {
    padding: 40px 60px !important; /* El aire se lo damos por dentro al contenido */
}

/* ESTILOS PARA EL ACORDEÓN DE FAQS */
.accordion-button:not(.collapsed) {
    background-color: #f8f9fa !important;
    color: var(--lhs-orange) !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: none !important;
    border-color: rgba(0,0,0,.125);
}

.text-blue {
    color: var(--lhs-blue);
}

.accordion-item {
    border-bottom: 1px solid #eee !important;
}

/* Estilos modernos para el acordeón */
.accordion-item {
    border: none !important;
    background: white;
}

.accordion-button {
    color: var(--lhs-blue) !important;
    font-size: 1.05rem;
    padding: 1.25rem;
}

.accordion-button:not(.collapsed) {
    background-color: #fff !important;
    color: var(--lhs-orange) !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.accordion-button:focus {
    box-shadow: none !important;
}

.accordion-body {
    color: #666;
    line-height: 1.6;
    background: #fafafa;
}

.btn-outline-primary:hover {
    background-color: var(--lhs-blue) !important;
    color: white !important;
}

/* AJUSTE DEL BOTÓN VER MÁS TIENDAS */
.btn-outline-primary.rounded-pill {
    transition: all 0.3s ease !important;
    border-width: 2px !important;
}

.btn-outline-primary.rounded-pill:hover {
    /* Aquí forzamos que el fondo no sea el azul genérico de Bootstrap */
    background-color: var(--lhs-blue) !important; 
    color: white !important; /* El texto se vuelve blanco para contrastar */
    transform: translateY(-3px); /* Efecto de levante */
    box-shadow: 0 4px 15px rgba(0, 82, 155, 0.2); /* Sombra suave con tu azul */
}

/* Si prefieres que el fondo NO se pinte y solo cambie el borde/texto */
/* .btn-outline-primary.rounded-pill:hover {
    background-color: transparent !important;
    color: var(--lhs-orange) !important;
    border-color: var(--lhs-orange) !important;
} 
*/

/* ESTILOS PARA DIRECTORIO DE TIENDAS MODERNO */

/* Contenedor principal de tarjetas */
.tiendas-modernas .category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
}

/* Efecto al pasar el mouse por la tarjeta */
.tiendas-modernas .category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Línea naranja debajo del título */
.tiendas-modernas .border-bottom-orange {
    border-bottom: 2px solid var(--lhs-orange);
    color: var(--lhs-blue);
    display: inline-block;
    padding-bottom: 5px;
}

/* Estilo de los enlaces (limpieza total) */
.tiendas-modernas .store-links a {
    display: block;
    color: #555; /* Color gris suave, no azul */
    text-decoration: none; /* Quita el subrayado feo */
    padding: 8px 0 8px 25px; /* Espacio para la flecha */
    font-size: 0.95rem;
    position: relative;
    transition: color 0.2s, padding-left 0.2s;
}

/* La flechita › (creada por CSS) */
.tiendas-modernas .store-links a:before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--lhs-orange);
    font-weight: bold;
    font-size: 1.2rem;
    top: 3px;
}

/* Efecto hover en el enlace */
.tiendas-modernas .store-links a:hover {
    color: var(--lhs-orange) !important;
    padding-left: 30px; /* Se mueve un poquito */
}

/* Ajuste del icono hexagonal */
.tiendas-modernas .hexagon-icon-container {
    max-width: 80px;
    margin: 0 auto;
}

.category-card {
    /* Agregamos un borde suave y una sombra mínima para que se vea la división */
    border: 1px solid #e9ecef !important; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

/* El efecto hover lo mantenemos pero lo hacemos resaltar sobre el borde base */
.category-card:hover {
    border-color: #eda13d !important; /* El borde cambia a tu naranja al hacer hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-5px);
}

/* Para que los iconos tengan un aire de separación */
.hexagon-icon-container {
    padding-top: 10px;
}

/* Eliminamos el inline-block para que la línea ocupe el 100% */
.border-bottom-orange {
    border-bottom: 2px solid #eda13d !important;
    display: block; /* Ocupa todo el ancho disponible de la card */
    width: 100%; 
    margin-bottom: 20px; /* Un poco más de espacio antes de que empiecen los links */
    padding-bottom: 12px;
}

/* --- Estilos Calculadora --- */
.calculadora-container {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #e9ecef;
}

.form-label-custom {
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
    display: block;
}

.input-moderno {
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 10px 15px;
    transition: all 0.3s;
}

.input-moderno:focus {
    border-color: #eda13d;
    box-shadow: 0 0 0 0.25rem rgba(237, 161, 61, 0.25);
    outline: none;
}

.resultado-box {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border-left: 5px solid #eda13d;
}

.total-destacado {
    font-size: 1.5rem;
    color: #eda13d;
    font-weight: 800;
}

.info-restringidos {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 15px;
    border-radius: 8px;
    color: #856404;
    font-size: 0.9rem;
}

/* Contenedor de la calculadora */
.calc-card {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid #eef0f2;
    overflow: hidden;
}

.calc-header {
    background: #f8f9fa;
    padding: 1.5rem;
    border-bottom: 1px solid #eef0f2;
}

/* Inputs con estilo moderno */
.calc-input {
    border: 1px solid #dce1e6;
    border-radius: 0.6rem;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.calc-input:focus {
    border-color: #eda13d;
    box-shadow: 0 0 0 3px rgba(237, 161, 61, 0.15);
}

/* Caja de Resultados */
.result-sidebar {
    background: #fcfcfc;
    border-left: 4px solid #eda13d;
    padding: 2rem;
    border-radius: 0 1.25rem 1.25rem 0;
}

.total-servicios-box {
    background: #212529;
    color: #fff;
    padding: 1.25rem;
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}

.text-orange {
    color: #eda13d !important;
}

/* Badge para el loader */
#loader {
    filter: grayscale(1) invert(0.5); /* Para que el loader viejo no desentone tanto */
}

/* Eliminamos el borde-right anterior y usamos este */
.table-moderna td:nth-child(2), 
.table-moderna th:nth-child(2) {
    /* Creamos una separación visual real usando un borde derecho grueso y del color del fondo de la CARD (blanco) */
    border-right: 15px solid #fff !important; 
    position: relative;
}

/* Añadimos una línea vertical gris muy fina para que se note la división dentro del espacio blanco */
.table-moderna td:nth-child(2)::after,
.table-moderna th:nth-child(2)::after {
    content: "";
    position: absolute;
    right: -8px; /* Centrado en el espacio de 15px */
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #eee;
}

/* Reforzamos el color de las columnas de precio */
.table-moderna td:nth-child(2), 
.table-moderna td:nth-child(4) {
    background-color: #fff9f2 !important; /* Un naranja muy suave para que se vea como una columna distinta */
    font-weight: 700;
    color: #333;
    text-align: center;
}

/* Ajuste para que las cabeceras se alineen al centro */
.table-moderna th {
    text-align: center;
}

/* --- Estilos Contacto --- */
.contact-header {
    /* 1. Definimos el degradado oscuro (overlay) y la imagen de fondo juntos */
    background: linear-gradient(rgba(68, 67, 67, 0.5), rgba(0, 0, 0, 0.7)), url('../img/Contacto/header.jpg');
    
    /* 2. Propiedades para que la imagen se vea perfecta */
    background-size: cover;          /* La imagen cubre todo el espacio */
    background-position: center;     /* Centramos la imagen */
    background-repeat: no-repeat;
    
    /* 3. Estilos de texto y espaciado */
    color: white !important;         /* Forzamos el texto a blanco */
    padding: 50px 0;                 /* Un poco más de aire arriba y abajo */
    text-align: center;
    border-radius: 0 0 30px 30px;    /* Mantenemos las esquinas inferiores redondeadas */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.3); /* Sombra interna para dar profundidad */
}

/* Aseguramos que los subtítulos y párrafos dentro del header también sean blancos */
.contact-header h1,
.contact-header p {
    color: white !important;
}

/* El texto "CON NOSOTROS" que antes era azul, ahora lo hacemos blanco o naranja claro para contraste */
.contact-header h1 span.text-light-orange {
    color: #ffe0b3; /* Un naranja muy suave para diferenciar, o simplemente blanco si prefieres */
}

.contact-card {
    background: white;
    border-radius: 20px;
    border: none;
    transition: transform 0.3s ease;
}

.contact-info-box {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
}

.form-control-modern {
    border: 1px solid #dee2e6;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.form-control-modern:focus {
    border-color: #eda13d;
    box-shadow: 0 0 0 0.25 row rgba(237, 161, 61, 0.25);
    outline: none;
}

.btn-enviar {
    background-color: #eda13d;
    color: white;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 10px;
    border: none;
    width: 100%;
    transition: background 0.3s ease;
}

.btn-enviar:hover {
    background-color: #d88d2c;
    color: white;
}

.icon-circle {
    width: 40px;
    height: 40px;
    background: #eda13d;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

/* Aseguramos que el icono dentro herede el color blanco */
.icon-circle i {
    color: white !important;
}

/* --- Estilos Registro Moderno --- */
.registro-section-title {
    font-size: 1.1rem;
    color: #eda13d;
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.form-check-input:checked {
    background-color: #eda13d;
    border-color: #eda13d;
}

.registro-box {
    background: #fff;
    border-radius: 20px;
}

.importante-registro {
    background-color: #fff5e6;
    border-radius: 20px;
    padding: 40px;
    border: 1px dashed #eda13d;
}

/* --- Estilos Login Moderno --- */

.login-container {
    min-height: 90vh; /* Aumentamos para dar más aire */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 70px !important; /* Más espacio para no chocar con el header */
    padding-bottom: 80px;
    background-color: #f4f7f9;
}

.login-card {
    max-width: 420px;
    width: 100%;
    border-radius: 25px !important;
    border: none !important;
    background: #ffffff;
    /* Recuperamos la sombra suave */
    box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
}

/* RECUPERAMOS EL CÍRCULO DEL ICONO */
.login-icon {
    width: 80px;
    height: 80px;
    background: #f8f9fa;
    color: #eda13d;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.2rem;
    margin: -20px auto 25px !important; /* Lo subimos un poco para que sobresalga */
    border: 5px solid #ffffff; /* Efecto de anillo */
}

/* --- Forzar Alineación Vertical --- */

body .login-container .input-group {
    display: flex !important;
    align-items: center !important; /* Centra verticalmente el contenido */
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 10px !important; /* Espacio interno para que no pegue a los bordes */
}

body .login-container .input-group-text {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    margin: 0 !important;
}

body .login-container .form-control-modern {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 10px !important; /* Ajusta el alto del input */
    margin: 0 !important;
    height: auto !important;
    flex: 1; /* Para que ocupe el resto del espacio */
}

/* Recuperar el círculo del icono con prioridad */
body .login-container .login-icon {
    width: 80px !important;
    height: 80px !important;
    background: #f8f9fa !important;
    color: #eda13d !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: -20px auto 25px !important;
    border: 5px solid #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* --- Estilos Panel de Usuario --- */
.cabperfil {
    background: #EDA13D;
    padding: 30px 0;
    color: white;
    margin-bottom: 40px;
}

.cabperfil h1 {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 700;
}

.cabperfil h1 span {
    font-weight: 300;
    opacity: 0.9;
}

.btn-logout {
    background: rgba(255,255,255,0.1);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.btn-logout:hover {
    background: #EDA13D;
    color: white;
}

.card-direccion {
    border: none;
    border-radius: 15px;
    background: #fff;
    transition: transform 0.3s;
}

.card-direccion:hover {
    transform: translateY(-5px);
}

.card-direccion .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
    border-radius: 15px 15px 0 0 !important;
}

.card-direccion h3 {
    font-size: 1rem;
    margin: 0;
    color: #8c0002;
    font-weight: 700;
}

.dir-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dir-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    color: #444;
}

.dir-list li:last-child {
    border: none;
}

.dir-list span {
    color: #eda13d;
    margin-right: 10px;
    font-weight: bold;
}

.alerta-importante {
    background: #fff3e0;
    border-left: 5px solid #EDA13D;
    padding: 20px;
    border-radius: 10px;
}

/* --- Sidebar del Panel de Usuario --- */
.sidebar-menu {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden; /* Importante para que el título respete el radio del borde */
}

.sidebar-title {
    background: #8c0002; /* Azul corporativo */
    color: white;
    padding: 20px;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    text-align: center;
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    color: #444;
    text-decoration: none;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.3s;
}

.sidebar-menu li a i {
    margin-right: 15px;
    color: #eda13d; /* Naranja de LHS BOX */
    font-size: 1.2rem;
}

.sidebar-menu li a:hover {
    background-color: #f8f9fa;
    color: #EDA13D;
    padding-left: 30px;
}


/* --- Estilos para Datos Personales --- */
.misdatos h3 {
    font-size: 1.1rem;
    color: #00448d;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
    text-transform: uppercase;
}

/* --- Corrección de Alineación de Inputs --- */

/* Forzar la alineación perfecta del icono y el input */
.form-registro-container .input-group {
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    display: flex !important;
    align-items: stretch !important; /* Estira hijos para igualar altura */
    background-color: #f7f7f7 !important;
}

/* El cuadro gris del icono */
.form-registro-container .input-group-text {
    background-color: #f7f7f7 !important;
    border: none !important; /* Quitamos el borde interno */
    padding: 0 15px !important; /* Solo padding lateral */
    display: flex !important;
    align-items: center !important; /* Centrado vertical del icono */
    justify-content: center !important;
    min-width: 50px; /* Ancho fijo para alineación perfecta */
}

/* El icono dentro */
.form-registro-container .input-group-text i {
    color: #eda13d !important; /* Naranja corporativo */
    font-size: 1.1rem;
    line-height: 1 !important;
    display: block;
}

/* La caja de texto */
.form-registro-container .form-control-modern {
    border: none !important;
      /* Usamos padding simétrico para forzar el centro vertical */
    padding: 14px 15px !important; 
    font-size: 1rem;
    box-shadow: none !important;
    /* Eliminamos cualquier altura fija que pueda causar el desfase */
    height: auto !important;
    min-height: 50px !important; 
    line-height: 1.2 !important; /* Controla el espacio del texto */
    display: flex !important;
    align-items: center !important;
    padding-top: 30px !important; /* Ajuste fino para centrar el texto */
}

/* Estado de foco para todo el grupo */
.form-registro-container .input-group:focus-within {
    border-color: #eda13d !important;
    box-shadow: 0 0 0 0.2rem rgba(237, 161, 61, 0.15) !important;
}

.input-label-modern {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 5px;
    display: block;
}

.btn-modificar {
    background: #eda13d;
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(237, 161, 61, 0.3);
}

.btn-modificar:hover {
    background: #d68a2d;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 161, 61, 0.4);
}

/* Radio buttons personalizados */
.radio-group {
    display: flex;
    gap: 20px;
    padding: 10px 0;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* --- Contenedor de la Cabecera Naranja --- */
.cabperfil {
    background-color: #eda13d; /* Naranja corporativo */
    padding: 15px 0;
    margin-bottom: 30px;
}

.cabperfil h1 {
    color: #800000; /* Color guinda del ID */
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
}

.cabperfil h1 span {
    color: #800000; /* Nombre del usuario */
    font-weight: 500;
    opacity: 0.9;
}

/* --- Botón Cerrar Sesión --- */
.btn-logout-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.2); /* Fondo sutil */
    color: white !important;
    text-decoration: none !important;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.btn-logout-modern i {
    font-size: 1.1rem;
    line-height: 1;
}

.btn-logout-modern:hover {
    background-color: #ffffff; /* Blanco al pasar el mouse */
    color: #eda13d !important; /* Texto naranja al hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- Estilos para el Historial --- */
.historial-container {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
}

.guia-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    background: #fff;
}

.guia-card:hover {
    border-color: #eda13d;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.guia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.guia-numero {
    font-weight: 700;
    color: #00448d;
    font-size: 1.1rem;
}

.guia-fecha {
    font-size: 0.85rem;
    color: #888;
}

/* --- Ajuste de Badges para evitar saltos de línea --- */
.status-badge {
    padding: 4px 8px !important; /* Reducimos padding lateral y vertical */
    border-radius: 50px;
    font-size: 0.7rem !important; /* Texto un poco más pequeño (antes 0.75rem) */
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap !important; /* PROHIBE el salto de línea */
    display: inline-block;
    max-width: 100%;
}

/* Ajuste adicional para las celdas de la tabla de tracking */

.table-responsive {
    border-radius: 12px; /* Debe coincidir con el radio de la tabla */
    overflow: hidden;    /* Corta cualquier "colita" que sobresalga */
    border: none;        /* Elimina bordes del div contenedor */
}

.table-tracking td {
    padding: 12px 10px !important; /* Compactamos un poco más la celda */
    vertical-align: middle;
}

/* --- Ajuste Definitivo para la Cabecera de Tracking --- */

.table-tracking {
    width: 100%;
    border-collapse: separate;
    /* Reducimos el espaciado horizontal a 0 para que la cabecera toque los bordes */
    border-spacing: 0 10px; 
    margin-top: -10px; /* Compensa el espaciado de la primera fila */
}

.table-tracking thead th {
    background-color: #800000; /* Guinda corporativo */
    color: #ffffff !important;
    text-align: center;
    vertical-align: middle;
    padding: 15px 10px !important;
    font-size: 0.75rem;
    white-space: nowrap;
    border: none;
    text-transform: uppercase;
    font-weight: 700;
}

/* Redondeado de las esquinas de la CINTA ROJA */
.table-tracking thead tr th:first-child {
    border-radius: 10px 0 0 0; /* Solo esquina superior izquierda */
}

.table-tracking thead tr th:last-child {
    border-radius: 0 10px 0 0; /* Solo esquina superior derecha */
}

/* Aseguramos que el contenido de las filas siga teniendo sus bordes independientes */
.table-tracking tbody td:first-child { 
    border-radius: 10px 0 0 10px; 
    padding-left: 20px; /* Un poco más de aire al inicio */
}

.table-tracking tbody td:last-child { 
    border-radius: 0 10px 10px 0; 
}

/* Colores de estado (Ajustar según tus valores de 'estados()') */
.status-pendiente { background: #fff3cd; color: #856404; }
.status-entregado { background: #d4edda; color: #155724; }
.status-transito { background: #d1ecf1; color: #0c5460; }

.guia-body {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
}

.guia-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #aaa;
    display: block;
    margin-bottom: 2px;
}

.guia-info {
    font-size: 0.95rem;
    font-weight: 500;
}

.guia-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f9f9f9;
}

.btn-action {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 0.8rem;
    font-weight: 600;
    transition: 0.2s;
}

.btn-print { background: #f8f9fa; color: #333; border: 1px solid #ddd; }
.btn-pay { background: #28a745; color: white; }
.btn-invoice { background: #17a2b8; color: white; }
.btn-view { background: #00448d; color: white; }

.btn-action:hover { opacity: 0.8; transform: translateY(-1px); }

/* --- Contenedor de Tracking --- */
.tracking-container {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
}

/* --- Tabla de Resultados Estilizada --- */
.table-tracking {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px; /* Espaciado entre filas */
}

.table-tracking thead th {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 10px 15px;
    font-weight: 700;
}

.table-tracking tbody tr {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s;
}

.table-tracking tbody tr:hover {
    transform: scale(1.01);
}

.table-tracking td {
    padding: 15px;
    border: none;
    font-size: 0.9rem;
    color: #444;
}

.table-tracking td:first-child { border-radius: 10px 0 0 10px; font-weight: 700; color: #00448d; }
.table-tracking td:last-child { border-radius: 0 10px 10px 0; }

.no-results {
    text-align: center;
    padding: 40px;
    color: #888;
    background: #fff9f2;
    border-radius: 12px;
    border: 1px dashed #eda13d;
}

/* --- Forzar una sola línea en Columnas de Tracking --- */

/* Celda de Fecha */
.table-tracking td.col-fecha {
    white-space: nowrap !important;
    min-width: 130px; /* Espacio suficiente para icono + fecha */
}

/* Celda de Remitente */
.table-tracking td.col-remitente {
    white-space: nowrap !important;
    max-width: 200px; /* Evita que crezca demasiado */
    overflow: hidden;
    text-overflow: ellipsis; /* Si es extremadamente largo, pone "..." al final */
}

/* Ajuste general de la tabla para dar más aire */
/* --- Ajuste de Cabecera de Tabla --- */
.table-tracking thead th {
    background-color: #800000; /* Color guinda corporativo */
    color: #ffffff !important;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: middle; /* Centra el texto verticalmente */
    padding: 12px 5px !important;
    font-size: 0.75rem; /* Tamaño ligeramente menor para ganar espacio */
    white-space: nowrap; /* EVITA que "Nº AWB" se ponga en dos líneas */
    border: none;
    text-transform: uppercase;
    font-weight: 700;
}

/* Ajuste proporcional para las columnas */
.table-tracking th:nth-child(1) { width: 15%; } /* Nº AWB */
.table-tracking th:nth-child(2) { width: 20%; } /* Fecha */
.table-tracking th:nth-child(3) { width: 25%; } /* Nº Tracking */
.table-tracking th:nth-child(4) { width: 25%; } /* Remitente */
.table-tracking th:nth-child(5) { width: 15%; } /* Estado */

/* Centrar contenido de la columna Nº Tracking */
.table-tracking td:nth-child(3) {
    text-align: center;
    vertical-align: middle;
}

/* Opcional: Si el texto es muy largo y hace salto de línea, 
   esto asegura que el bloque de texto también esté centrado */
.table-tracking td code {
    display: inline-block;
    text-align: center;
}

/* --- Corrección de Alineación del Buscador --- */

.search-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 35px;
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.search-card .input-group {
    height: 45px; /* Altura fija para el contenedor */
}

.search-card .input-group-text {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-right: none; /* Quitamos borde derecho para unirlo al input */
    border-radius: 10px 0 0 10px !important;
    color: #666;
    width: 45px; /* Cuadrado perfecto para el icono */
    justify-content: center;
    height: 45px;
}

.search-card .form-control-modern {
    height: 45px !important;
    border: 1px solid #dee2e6;
    border-radius: 0 10px 10px 0 !important; /* Redondeado solo a la derecha */
    font-size: 0.9rem;
}

/* Botón de búsqueda centrado y nivelado */
.btn-search-custom {
    height: 45px !important;
    width: 100%;
    background-color: #8c0002; /* Tu guinda corporativo */
    color: white;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-search-custom:hover {
    background-color: #6a0001;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-search-custom i {
    font-size: 1.2rem;
    line-height: 1;
}

/* --- Contenedor de Tarifas --- */
.tarifas-container {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
}

/* Tabla de Precios Compacta */
.table-tarifas {
    max-width: 500px;
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
}

.table-tarifas thead th {
    background-color: #8c0002;
    color: #fff;
    padding: 12px;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.table-tarifas tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}

/* Cards Informativas para Legales */
.info-card-tarifas {
    background: #fdfdfd;
    border-left: 4px solid #8c0002;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.info-card-tarifas p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
}

.info-card-tarifas h5 {
    color: #8c0002;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.highlight-price {
    color: #8c0002;
    font-weight: 700;
}

/* Botón de Sunat Moderno */
.btn-sunat {
    background: #00448d;
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    transition: all 0.3s;
    margin-top: 10px;
}

.btn-sunat:hover {
    background: #002d5e;
    transform: translateY(-2px);
}


/*-----------------------------------*/

/* --- Botón Flotante de WhatsApp --- */
.whatsapp-float{
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    transition:.3s;
    flex-shrink:0;
}

.whatsapp-float:hover{
    transform:scale(1.08);
    color:#fff;
    background:#20ba5a;
}

@media (max-width:768px){
    .whatsapp-float{
        width:58px;
        height:58px;
        font-size:34px;
        right:18px;
        bottom:18px;
    }
}

/* Efecto latido */
.whatsapp-float{
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.6);
    }
    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

/* Mensaje emergente de WhatsApp */
.whatsapp-container{
    position:fixed;
    right:25px;
    bottom:25px;
    display:flex;
    align-items:center;
    gap:15px;
    z-index:9999;
}

.whatsapp-message{
    background:#fff;
    color:#333;
    padding:12px 16px;
    border-radius:12px;
    font-size:14px;
    line-height:1.4;
    box-shadow:0 6px 20px rgba(0,0,0,.15);
    white-space:nowrap;
    position:relative;
}

.whatsapp-message::after{
    content:"";
    position:absolute;
    right:-8px;
    top:50%;
    transform:translateY(-50%);
    border-width:8px 0 8px 8px;
    border-style:solid;
    border-color:transparent transparent transparent #fff;
}

/* Animación de aparición */
.whatsapp-message{
    transition:.5s;
}

/* Fin del botón flotante de WhatsApp */

/*guias_ver.php*/
.card-header-lhs{
    background:#8c0002;
    color:#fff;
    padding:22px 28px;
}

.card-header-lhs h3{
    margin:0;
    font-weight:700;
    color:#fff;
}

.card-header-lhs small{
    color:rgba(255,255,255,.85);
}

.card-body h4{
    font-weight:700;
}

.card-body .fs-5{
    color:#444;
}

.card-header-lhs .badge{
    font-weight:700;
}

.card-header-lhs h2{
    margin:0;
    color:#fff;
    font-weight:700;
    font-size:2rem;
}

.guia-fecha{
    color:rgba(255,255,255,.9);
    font-size:1rem;
}

.guia-fecha strong{
    color:#fff;
}

.titulo-info{
    text-transform:uppercase;
    font-size:.85rem;
    font-weight:700;
    color:#6c757d;
    margin-bottom:10px;
    letter-spacing:.5px;
}

.titulo-info i{
    color:#8c0002;
}

/*----------------------------------
Tarjetas Guía
-----------------------------------*/

.titulo-seccion{

    color:#8c0002;

    font-weight:700;

    margin-bottom:18px;

    display:flex;

    align-items:center;

    gap:10px;

}

.titulo-seccion i{

    font-size:1.3rem;

}

.card hr{

    opacity:.12;

}

.table th{

    color:#6c757d;

    font-weight:600;

    width:38%;

}

.table td{

    color:#222;

}

/*====================================================
TIMELINE GUIA
====================================================*/

.timeline-lhs{

    position:relative;

    padding-left:30px;

}

.timeline-lhs::before{

    content:"";

    position:absolute;

    left:10px;

    top:0;

    bottom:0;

    width:3px;

    background:#e4e4e4;

}

.timeline-item{

    position:relative;

    margin-bottom:35px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-dot{

    position:absolute;

    left:-26px;

    top:6px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#8c0002;

    border:4px solid #fff;

    box-shadow:0 0 0 2px #8c0002;

}

.timeline-content{

    background:#fafafa;

    border-radius:15px;

    padding:18px 22px;

    border:1px solid #ececec;

}

.timeline-content h6{

    margin:0;

    font-weight:700;

    color:#8c0002;

}

.timeline-content small{

    color:#6c757d;

    font-size:.95rem;

}

.table tbody td:last-child{
    font-size: .88rem;
    color:#555;
    font-weight:500;
    line-height:1.3;
}
/*------------------------*/

/* items_guias.php */

/*----------------------------------
Tabla Artículos
-----------------------------------*/

.table thead th{

    background:#8c0002;

    color:#fff;

    border:none;

    font-weight:600;

    white-space:nowrap;

}

.table tbody td{

    vertical-align:middle;

}

.table-hover tbody tr:hover{

    background:#faf6f6;

}

/*----------------------------------*/