/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
/*#0082BB, #009BD5  Colores corporativos */
body.modal-open {
    overflow: hidden !important;
}

/* ===== ESTILOS CORPORATIVOS PARA PDF DE COTIZACIÓN ===== */
.pdf-corp-header {
    color: #0082BB;
    border-bottom: 2px solid #009BD5;
    background: #fff !important;
    font-weight: bold;
    letter-spacing: 1px;
    padding-bottom: 5px;
}
.pdf-corp-header, #contenidoPDF .pdf-corp-header {
    font-size: 14px; /* tamaño solicitado */
}
.pdf-corp-section-title {
    color: #009BD5;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: 1.5px solid #0082BB;
    background: #fff !important;
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.pdf-corp-section-title, #contenidoPDF .pdf-corp-section-title {
    font-size: 14px; /* tamaño solicitado */
}
.pdf-corp-table th {
    background: #f4fafd !important;
    color: #0082BB;
    border-bottom: 2px solid #009BD5;
    font-weight: bold;
}
.pdf-corp-table td {
    background: #fff !important;
    color: #222;
    border-top: 1px solid #e3eaf1;
    font-size: 1em;
}
.pdf-corp-total-row td {
    border-top: 2.5px solid #0082BB !important;
    color: #0082BB !important;
    font-weight: bold;
    font-size: 1.08em;
    background: #f4fafd !important;
}
.pdf-corp-total-label {
    color: #0082BB !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.08em;
}
.pdf-corp-total-value {
    color: #009BD5 !important;
    font-weight: bold;
    font-size: 1.15em;
    text-shadow: none;
}
.pdf-corp-border {
    border: 2px solid #0082BB !important;
    border-radius: 8px;
}
.pdf-corp-signature {
    border-top: 2px solid #009BD5 !important;
    color: #0082BB;
    font-size: 0.98em;
}

/* Badge pequeña para mostrar contador de visitas asociadas en el menú */
.menu-badge-visitas {
    font-size: 0.65rem;
    padding: 0.25em 0.45em;
    vertical-align: middle;
}

/* ===== estilos para impresión / PDF ===== */
/* reducir uso de tinta: fondos blancos, solo acentos en color corporativo */
#tabla-cotizacion {
    margin-top: 20px;
}

/* Tarjeta más compacta para no ocupar tanto espacio en impresión */
.tarjeta {
    height: auto;
    padding: 6px 8px;
    font-size: 12px;
}

/* Forzar texto oscuro donde antes era blanco para mejorar visibilidad en PDF */
.letra-blanca {
    color: #000 !important;
    background-color: #f5f5f5 !important;
    padding: 2px 4px;
}

/* Reglas para controlar saltos de página en tablas */
.pdf-corp-table {
    page-break-inside: auto;
}
.pdf-corp-table tr {
    page-break-inside: avoid;
    page-break-after: auto;
}
#tabla-cotizacion {
    page-break-before: auto;
}

/* Asegurar que thead/tfoot se repitan en páginas al imprimir */
thead { display: table-header-group; }
tfoot { display: table-footer-group; }

/* ===== ESTILOS CORPORATIVOS PARA EVENTOS DEL CALENDARIO ===== */
/* 
  NOTA: Los estilos de eventos ahora se manejan completamente desde JavaScript
  en la función eventContent() del calendario para evitar duplicación.
  Solo mantenemos algunos estilos auxiliares que no interfieren.
*/

/* Estilos auxiliares para el tipo de badge de evento */
.event-type-badge {
    pointer-events: none;
}

/* Efectos de hover adicionales (sin interferir con los estilos principales) */
.fc-event:hover .event-type-badge {
    transform: scale(1.1);
}

/* 
  ELIMINADO: Estilos duplicados que causaban doble renderizado
  Los estilos corporativos ahora se aplican únicamente desde JavaScript
*/

/* Eventos de asistente */
.fc-event.evento-asistente {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb) !important;
    border-left-color: #2196f3 !important;
    color: #1565c0 !important;
}

/* ===== ESTILOS ANTIGUOS (mantenidos para compatibilidad) ===== */

/* Colores corporativos para eventos */
.fc-event.event-reprogramado {
    border-left-color: #009BD5 !important;
}
.fc-event.event-alta {
    border-left-color: #0082BB !important;
}
.fc-event.event-media {
    border-left-color: #009BD5 !important;
}
.fc-event.event-baja {
    border-left-color: #0082BB !important;
}
/* Colores corporativos para texto de eventos */
.fc-event.event-reprogramado .fc-event-title, .fc-event.event-reprogramado .fc-event-time, .fc-event.event-reprogramado .fc-event-main {
    color: #009BD5 !important;
}
.fc-event.event-alta .fc-event-title, .fc-event.event-alta .fc-event-time, .fc-event.event-alta .fc-event-main {
    color: #0082BB !important;
}
.fc-event.event-media .fc-event-title, .fc-event.event-media .fc-event-time, .fc-event.event-media .fc-event-main {
    color: #009BD5 !important;
}
.fc-event.event-baja .fc-event-title, .fc-event.event-baja .fc-event-time, .fc-event.event-baja .fc-event-main {
    color: #0082BB !important;
}
/* Colores corporativos para eventos (borde y texto) */
.fc-event.event-reprogramado {
    border-left-color: #009BD5 !important;
    color: #009BD5 !important;
}
.fc-event.event-alta {
    border-left-color: #0082BB !important;
    color: #0082BB !important;
}
.fc-event.event-media {
    border-left-color: #009BD5 !important;
    color: #009BD5 !important;
}
.fc-event.event-baja {
    border-left-color: #0082BB !important;
    color: #0082BB !important;
}
/* Estilo general para los contenedores */
#detalleTrabajoRow {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Espaciado entre los elementos */
}

#detalleTrabajoCol {
    width: 100%;
}

#detalleTrabajoCol.mb-3 {
    margin-bottom: 1rem;
}

/* Detalle de trabajo */
#detalleTrabajoInputGroup {
    width: 100%;
}



/* Monto, IVA, Precio Neto y Cantidad */
#detalleTrabajoDFlex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Ajustar el tamaño de los campos de Monto, IVA y Precio Neto */
#detalleTrabajoMonto {
    flex: 1;
    min-width: 200px; /* Para asegurar que no se achique demasiado */
}

#detalleTrabajoIVA, #detalleTrabajoPrecioNeto {
    flex: 1;
    min-width: 150px;
}

#detalleTrabajoCantidad {
    flex: 0 0 25%;
    min-width: 120px; /* Ajustamos para que no se achique demasiado */
}

/* Inputs */
#detalleTrabajoInput {
    font-size: 14px; /* Reducir el tamaño de la fuente para una mejor visualización */
    padding: 10px; /* Ajustar el padding */
}

/* Ajustar el botón de eliminar */
#detalleTrabajoEliminarBtn {
    font-size: 14px; 
    padding: 8px 12px;
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
    #detalleTrabajoMonto {
        flex: 1 1 100%; /* Los campos de Monto, IVA y Precio Neto ocuparán todo el ancho */
    }

    #detalleTrabajoIVA, #detalleTrabajoPrecioNeto, #detalleTrabajoCantidad {
        flex: 1 1 100%; /* Los campos de IVA, Precio Neto y Cantidad también ocuparán todo el ancho */
    }

    #detalleTrabajoDFlex {
        flex-direction: column; /* Cambiar la dirección de los elementos a columna en pantallas pequeñas */
    }
}
/* Ajuste del contenido interno */
.card .card-body {
    height: 100%;
    padding: 1.5rem; /* Espaciado interno */
    text-align: center; /* Centrar el contenido */
}

.card .card-title {
    height: 100%;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.card .card-text {
    font-size: 1rem;
    margin-bottom: 1rem;
}
/* Sombra proyectada al fondo de la página alrededor de las tarjetas */
.card  {
    height: 100%;

    position: relative;
    z-index: 1; /* Asegura que las tarjetas estén por encima del fondo */
}

/* Asegurar que todas las tarjetas tengan el mismo tamaño */
.card {
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-body {
    flex-grow: 1; /* Permite que el contenido del cuerpo de la tarjeta se expanda */
}

.card .btn {
    margin-top: auto; /* Asegura que los botones estén alineados al final */
}

/* Ajuste para tarjetas en pantallas pequeñas */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem; /* Espaciado entre tarjetas en pantallas pequeñas */
    }
}

/*estilo para paguina Revisiones*/
body {
    background-color: #f8f9fa;
}
.card {
    height: 100%;
    border: none;

/* Reglas para NewCotizaciones: contenedor-row y formato del número de cotización */
.contenedor-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.contenedor-row .form-label {
    margin: 0;
    white-space: nowrap;
    font-weight: 600;
}
#numeroCotizacionContenedor {
    width: 240px;
    max-width: 40%;
}
@media (max-width: 575.98px) {
    .contenedor-row {
        flex-direction: column;
        align-items: flex-end;
    }
    #numeroCotizacionContenedor {
        width: 100%;
        max-width: 100%;
    }
}
/* Externalized styles that were previously inline in NewCotizaciones.html */
.cotizaciones-card {
    max-width: 1200px;
    margin: 0 auto;
}
.card-header-gradient {
    background: linear-gradient(135deg, #0082BB, #009BD5);
    border: none;
}
.table-cotizaciones thead.cotizaciones-thead {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}
.table-cotizaciones th {
    color: #495057;
}
.table-cotizaciones th.col-numero { width: 12%; }
.table-cotizaciones th.col-tipo { width: 18%; }
.table-cotizaciones th.col-cliente { width: 30%; }
.table-cotizaciones th.col-estado { width: 18%; }
.table-cotizaciones th.col-acciones { width: 22%; }
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-header {
    border-radius: 10px 10px 0 0;
    background: linear-gradient(135deg, #0082BB, #009BD5);
    color: #ffffff;
}
.card-header h5 {
    font-size: 1.25rem;
    font-weight: bold;
}
.card-header p {
    margin: 0;
    font-size: 0.9rem;
}
.card-body {
    background-color: #ffffff;
}
.card-body p {
    margin: 0.5rem 0;
}
.card-body hr {
    margin: 1rem 0;
    border-top: 1px solid #e9ecef;
}
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
}
/*  */
/* Estilo para barra superior */
.navbar-custom {
    background: linear-gradient(to right,#0082BB , #009BD5); /* Degradado corporativo */
    color: #ffffff; /* Texto blanco */
}

/* FORCE NAVBAR HEIGHT: mantener la altura aunque se eliminen elementos como la búsqueda o notificaciones */
.navbar-custom {
    min-height: 64px !important;
    height: 64px !important;
    display: flex;
    align-items: center;
}
.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .btn,
.navbar-custom .form-control {
    line-height: 1 !important;
}
.navbar-custom .navbar-brand {
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
    .navbar-custom {
        min-height: 56px !important;
        height: 56px !important;
    }
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .btn-outline-light {
    color: #ffffff; /* Texto blanco */
}
.btn-outline-light{
    border-color: #ffffff; /* Azul Corporativo */
    color: #ffffff; /* Azul Corporativo */
    
}
.navbar-custom .btn-outline-light:hover {
    background-color: #0082BB; /* Azul Corporativo */
    color: #ffffff; /* Texto blanco */
}

.navbar-custom .form-control {
    background-color: #f2f2f2; /* Gris Claro */
    border: 1px solid #009BD5; /* Azul Corporativo */
}

.navbar-custom .form-control:focus {
    border-color: #0082BB; /* Azul Corporativo */
    box-shadow: 0 0 0 0.2rem rgba(0, 130, 187, 0.25);
}

.navbar-custom .btn-warning {
    background-color: #009BD5; /* Azul Corporativo */
    color: #ffffff; /* Texto blanco */
}

.navbar-custom .btn-warning:hover {
    background-color: #0082BB; /* Azul Corporativo */
}

/* Estilo para el logo en pantallas pequeñas */
#logo {
    position: absolute;
    top: 60%;  /* Posicionamos el logo a la mitad de la altura de la barra superior */
    right: 0px;  /* Ajustamos para que sobresalga parcialmente de la barra */
    width: 75px;  /* Ajusta el tamaño del logo */
    height: auto;
    transform: translateY(-50%);  /* Centra el logo verticalmente en la mitad */
    z-index: 1050;  /* Asegura que esté por encima de otros elementos */
}

/* Estilo para el logo visible solo en pantallas pequeñas */
.d-none.d-lg-block {
    display: none;
}

/* Logo solo visible en pantallas pequeñas */
.d-lg-none {
    display: block;
}
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff; /* O el color de tu sitio */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 9999;
}

footer.mostrar {
    opacity: 1;
    pointer-events: auto;
}



.offcanvas-custom .nav-link {
    color: #ffffff; /* Texto blanco */
}

.offcanvas-custom .nav-link:hover {
    background-color: #50b4f4; /* Azul Claro */
    color: #ffffff; /* Texto blanco */
}

/* Estilo para la barra lateral fija en pantallas grandes */
.d-none.d-lg-block {
    width: 250px; /* Ajuste de ancho */
    background: #007bdb; /* Azul para la barra lateral */
    color: #fff; /* Texto blanco */
}

.d-none.d-lg-block .nav-link {
    color: #ffffff; /* Texto blanco */
}

.d-none.d-lg-block .nav-link:hover {
    background-color: #50b4f4; /* Azul Claro */
    color: #ffffff; /* Texto blanco */
}

.d-none.d-lg-block .Logo {
    width: 75px; /* Tamaño ajustado para el logo */
    height: auto; /* Mantener proporción */
    display: block;
    margin: 0 auto; /* Centrar imagen */
}

/* Estilo para el menú offcanvas (pantallas pequeñas) */
.offcanvas-start {
    background-color: #007bdb; /* Fondo azul */
    color: #ffffff; /* Texto blanco */
    padding: 10px;
    max-height: 100vh; /* Limitar la altura máxima */
    overflow-y: auto; /* Habilitar scroll vertical */
    padding-bottom: 120px; /* Espacio para evitar que el user-card interfiera */
}

.offcanvas-start .nav-link {
    color: #ffffff; /* Texto blanco */
}

.offcanvas-start .nav-link:hover {
    background-color: #50b4f4; /* Azul Claro */
    color: #ffffff; /* Texto blanco */
}
/* Asegura que la barra lateral esté por encima de la barra superior */
.d-none.d-lg-block.bg-dark.text-white.vh-100.position-fixed {
    z-index: 1050; /* Este es un valor alto para que se coloque encima de otros elementos */
    top: 0; /* Asegúrate de que esté alineado al top */
}

/* Barra superior */
.navbar-custom {
    z-index: 1040; /* Un valor menor que la barra lateral */
}
/* Degradado para la barra lateral */
.d-none.d-lg-block.bg-dark.text-white.vh-100.position-fixed {
    width: 250px;
    background: linear-gradient(to right, #009BD5 , #0082BB ); /* Degradado corporativo */
    z-index: 1050; /* Asegúrate de que esté encima de otros elementos */
    top: 0;
    height: 100vh; /* Altura completa */
}

/* Estilos responsivos */
@media (max-width: 991px) {
    .navbar-custom {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
    
    .d-none.d-lg-block {
        display: none; /* Oculta la barra lateral en pantallas pequeñas */
    }
}

@media (min-width: 992px) {
    .navbar-custom {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
    
    .d-none.d-lg-block {
        display: block; /* Muestra la barra lateral en pantallas grandes */
    }
}


.logo-sidebar {
    max-width: 50px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  
  /* Si quieres un tamaño distinto para pantallas pequeñas */
  @media (max-width: 991.98px) {
    .logo-sidebar {
      max-width: 40px;    /* Tamaño más pequeño en offcanvas o navbar */
    }
  }
  



  .pdf-container {
    width: 800px;
    margin: 80px auto;
    padding: 30px;
    background: white;
    color: black;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 9999; /* sobresale de todo */
  }
  
  .titulo {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    text-transform: uppercase;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
  }
  
  .info-empresa,
  .info-cliente {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
  }
  
  .tabla-cotizacion {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
  }
  
  .tabla-cotizacion th,
  .tabla-cotizacion td {
    border: 1px solid #000;
    padding: 6px 10px;
    text-align: center;
  }
  
  .tabla-cotizacion th {
    background-color: #f2f2f2;
  }
  
  .resumen {
    text-align: right;
    margin-top: 20px;
    font-weight: bold;
  }
  @media (max-width: 767px) {
    .modal-dialog {
        max-width: 90%; /* El modal ocupará el 90% del ancho en pantallas pequeñas */
    }

    .table-responsive {
        overflow-x: auto; /* Habilita el desplazamiento horizontal */
    /* Nota: -webkit-overflow-scrolling se omitió por compatibilidad (solo útil en iOS Safari) */
    }
}



/* Estilo para las tarjetas */
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más grande y visible */
    border-radius: 8px; /* Bordes redondeados */
    height: 100%;
    border: 1px solid transparent; /* Borde más ancho */
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; /* Animación al pasar el mouse */
    background-color: #ffffff; /* Fondo blanco para todas las tarjetas */
}

/* Estilo para las tarjetas */
.card-trabajo {
    position: relative;
    height: 100%;
    border-radius: 5px; /* Bordes redondeados */
    border: 8px solid transparent; /* Borde más ancho */
    background-color: #ffffff; /* Fondo blanco */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra visible */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Animaciones suaves */
    overflow: hidden; /* Asegura que el contenido no sobresalga */
}

.card-trabajo:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el mouse */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
}


/* Ajuste del contenido interno */
.card-trabajo .card-body {
    padding: 1.5rem; /* Espaciado interno */
    text-align: center; /* Centrar el contenido */
}

.card-trabajo .card-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.card-trabajo .card-text {
    font-size: 1rem;
    margin-bottom: 1rem;
}
/* Sombra proyectada al fondo de la página alrededor de las tarjetas */
.card-trabajo  {
    position: relative;
    z-index: 1; /* Asegura que las tarjetas estén por encima del fondo */
}

.card.bg-transparent {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semitransparente */
    height: 100%;
    border-radius: 10px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
}

.card.bg-transparent .card-title {
color: #000;
    font-size: 2rem; /* Tamaño del título */
    font-weight: bold; /* Negrita */
    margin-bottom: 10px; /* Espaciado inferior */
    }

.card.bg-transparent .card-text {
    font-size: 1rem; /* Tamaño del texto */
color: #000;
    margin-bottom: 0; /* Sin margen inferior */
    }

.btn-en-trabajo {
    background: linear-gradient(135deg, #4CAF50, #81C784);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Mejorar visibilidad del texto */

}

.btn-pendiente {
    background: linear-gradient(135deg, #2196F3, #64B5F6);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Mejorar visibilidad del texto */

}

.btn-cercano {
    background: linear-gradient(135deg, #f0d90a, #FFF59D);
    color: black;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Mejorar visibilidad del texto */

}

.btn-hoy {
    background: linear-gradient(135deg, #FF9800, #FFCC80);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Mejorar visibilidad del texto */

}

.btn-atrasado-inicio {
    background: linear-gradient(135deg, #FF5722, #FF7043);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Mejorar visibilidad del texto */

}

.btn-cierre-cercano {
    background: linear-gradient(135deg, #f7c12d, #FFEB3B);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Mejorar visibilidad del texto */

}

.btn-atrasado-cierre {
    background: linear-gradient(135deg, #D32F2F, #F44336);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Mejorar visibilidad del texto */

}

.btn-en-trabajo,
.btn-pendiente,
.btn-cercano,
.btn-hoy,
.btn-atrasado-inicio,
.btn-cierre-cercano,
.btn-atrasado-cierre {
    color: white !important; /* Asegura que el texto sea blanco */
}

/* ===== BOTONES CORPORATIVOS PARA COTIZACIONES ===== */

/* Botón corporativo para ver cotizaciones con colores empresariales */
.btn-cotizacion-corporativo {
    background: linear-gradient(135deg, #0082BB 0%, #009BD5 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 130, 187, 0.3) !important;
}

.btn-cotizacion-corporativo:hover {
    background: linear-gradient(135deg, #006699 0%, #0082BB 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 130, 187, 0.4) !important;
    color: white !important;
}

.btn-cotizacion-corporativo:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 130, 187, 0.3) !important;
}

.btn-cotizacion-corporativo:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 155, 213, 0.25) !important;
}

/* Estilo específico para botones pequeños de cotización */
.btn-cotizacion-corporativo.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.375rem !important;
}

/* Icono dentro del botón corporativo */
.btn-cotizacion-corporativo i {
    color: white !important;
    margin-right: 0.5rem !important;
}

.info-empresa {
    font-size: 0.70rem;
    line-height: 0.8rem; /* Espaciado entre líneas más pequeño */
    margin-bottom: 0.5rem; /* Espacio entre la información de la empresa y el cliente */    
}
.info-cliente {
    font-size: 0.70rem;
    line-height: 0.8rem; /* Espaciado entre líneas más pequeño */
    margin-bottom: 0.5rem;
}
.info-empresa, .info-cliente {
    flex: 1; /* Cada sección ocupa el mismo espacio */
    max-width: 45%; /* Limita el ancho máximo */
    padding: 1rem; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
}



.table-success {
    background-color: #28a745 !important; /* Verde fuerte */
    color: #ffffff; /* Texto blanco */
}

.table-danger {
    background-color: #dc3545 !important; /* Rojo fuerte */
    color: #ffffff; /* Texto blanco */
}

.table-warning {
    background-color: #ffc107 !important; /* Amarillo fuerte */
    color: #212529; /* Texto negro */
}

.table-info {
    background-color: #17a2b8 !important; /* Celeste fuerte */
    color: #ffffff; /* Texto blanco */
}

.table-secondary {
    background-color: #6c757d !important; /* Gris fuerte */
    color: #ffffff; /* Texto blanco */
}



.btn-info {
    background: linear-gradient(135deg, #0426e6, #2dc2e7);
    color: #ffffff !important; /* Forzar texto blanco */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Mejorar visibilidad del texto */
}



.nav-item {
    margin-bottom: 5px; /* Reduce el margen entre los elementos */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Mejorar visibilidad del texto */

}

.hr-blurry {
    margin: 2px 0; /* Reduce el margen vertical del separador */
}
.user-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto; /* Empujar hacia abajo en pantallas grandes */
    margin-bottom: 1rem; /* Espaciado inferior */
}

.user-name {
    font-size: 1rem; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
    color: white; /* Color del texto */
    margin-bottom: 0.5rem; /* Espaciado entre el nombre y el botón */
    text-align: center; /* Centrar el texto */
}

.btn-Logout {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #ffffff !important; /* Forzar texto blanco */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Mejorar visibilidad del texto */
    position: absolute; /* Posiciona el botón al final */
    bottom: 5px; /* Asegura que esté al final de la barra lateral */
    left: 5px; /* Alinea el botón al borde izquierdo */
    width: 95%; /* Ocupa todo el ancho de la barra lateral */
    text-align: center; /* Centra el texto */
    padding: 0.5rem 0.75rem; /* Espaciado interno compacto */
    font-size: 0.9rem; /* Tamaño de texto compacto */
    border-radius: 0.375rem; /* Bordes redondeados */
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1050; /* Asegura que esté por encima de otros elementos */
}

.btn-Logout:hover {
    background: linear-gradient(135deg, #1a252f, #2c3e50);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (min-width: 992px) {
    .user-name {
        margin-top: 80%; /* Empujar hacia abajo en pantallas grandes */
    }
}

@media (max-width: 991px) {
    .user-name {
        margin-top: 1rem; /* Más arriba en pantallas pequeñas */
    }
}
@media (max-width: 768px) {
    .user-name {
        position: static; /* Posición normal en pantallas pequeñas */
        transform: none; /* Sin transformación */
        margin-left: 1rem; /* Espaciado después del botón */
    }
    .user-card {
        position: relative; /* Cambiar a relativo para evitar interferencias */
        margin-top: 1rem; /* Espaciado superior */
    }
}
.user-card {
    background-color: rgba(221, 220, 231, 0.1);
    text-shadow: rgb(97, 96, 96) 0.5px 0.5px 0.1px;
    color: white;
    position: absolute; /* o fixed si es respecto al viewport */
    height: 118px;
    bottom:  10px; /* ajusta el valor para bajarla */
    padding: 15px; 
    left: 5px; /* ajusta el valor para moverla a la izquierda */
    border-radius: 8px;
    width: 95%;
    text-align: center;
}

.user-card h5 {
    font-size: 16px;
    margin-bottom: 10px;
}

.user-card button {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.user-card button:hover {
    background-color: #c82333;
}



.custom-container {
    right: 50px; /* Ajusta este valor para mover más a la derecha */
}

/* Login page styles - Enhanced version */
:root {
    --login-brand-blue: #0082BB;
    --login-brand-accent: #009BD5;
    --login-brand-light: #f0f8ff;
    --login-shadow: 0 15px 35px rgba(0, 130, 187, 0.1);
    --login-shadow-hover: 0 20px 45px rgba(0, 130, 187, 0.15);
    --login-border-radius: 20px;
    --login-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset margins and padding for login page */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* Remove white margins and ensure full coverage */
body.bg-light {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%) !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    padding: 20px 15px;
    margin: 0 auto;
    max-width: 100%;
}

/* Centrar título del modal 'Gestionar Detalles de Cotización' */
.modal-header.modal-header-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-header.modal-header-secondary .modal-title,
#modalDetallesLabel {
    margin: 0;
    text-align: center;
    width: 100%;
}

/* Evitar que la fila de totales y botón se rompa y que los inputs se desborden */
.no-wrap-md {
    flex-wrap: nowrap;
}
.no-wrap-md .total-bruto-input {
    max-width: 60%;
    min-width: 160px;
}
.no-wrap-md .btn-eliminar {
    white-space: nowrap;
}
/* En pantallas pequeñas permitir stack */
@media (max-width: 575.98px) {
    .no-wrap-md {
        flex-wrap: wrap;
    }
    .no-wrap-md .total-bruto-input {
        max-width: 100%;
        min-width: 0;
    }
}

/* Asegurar que las tarjetas no muestren overflow horizontal */
.detalle {
    overflow: hidden;
}

/* Main login card with improved dimensions and aesthetics */
.login-card {
    border-radius: var(--login-border-radius);
    box-shadow: var(--login-shadow);
    overflow: hidden;
    max-width: 900px;
    width: 90%;
    min-height: 420px;
    max-height: 490px;
    transition: var(--login-transition);
    border: none;
    background: #ffffff;
    margin: 0 auto;
}

.login-card:hover {
    box-shadow: var(--login-shadow-hover);
    transform: translateY(-2px);
}

/* Brand strip with gradient animation */
.brand-strip {
    background: linear-gradient(90deg, var(--login-brand-blue), var(--login-brand-accent), var(--login-brand-blue));
    background-size: 200% 100%;
    height: 6px;
    animation: gradient-flow 3s ease infinite;
}

@keyframes gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Left side styling with gradient background */
.login-left {
    min-height: 350px;
    background: linear-gradient(135deg, var(--login-brand-light) 0%, #ffffff 50%, var(--login-brand-light) 100%);
    position: relative;
    overflow: hidden;
}

.login-left::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 130, 187, 0.05) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

.left-inner {
    padding: 25px 20px;
    text-align: center;
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Logo and branding improvements */
.logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Utilidades añadidas para Cotizaciones */
.main-container { margin-left: 0; margin-top: 1rem; }
.card-body-legal { background: #fff; padding: 2rem; }
.small-table { font-size: 0.95em; }
.label-cell { width: 40%; font-weight: 600; }

/* modal header dark gradient usado en Cotizaciones */
.modal-header-dark { background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); color: #fff; }


.logo-circle {
    width: 65px;
    height: 65px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--login-brand-blue), var(--login-brand-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 6px 20px rgba(0, 130, 187, 0.3);
    transition: var(--login-transition);
}

.logo-circle:hover {
    transform: rotate(5deg) scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 130, 187, 0.4);
}

/* Estilos movidos desde MIsCotizaciones.html para evitar inline styles y warnings del linter */
.sidebar-fixed {
    width: 250px;
}
.logo-small {
    width: 75px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.main-container {
    margin-left: 0;
    margin-top: 1rem;
}

.brand-text {
    text-align: center;
}

.brand-title {
    margin: 0;
    color: var(--login-brand-blue);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.5px;
}

.brand-subtitle {
    margin: 5px 0 10px 0;
    color: var(--login-brand-accent);
    font-weight: 600;
    font-size: 16px;
}

.illustration-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-illus {
    max-width: 160px;
    height: auto;
    opacity: 0.9;
    transition: var(--login-transition);
    filter: drop-shadow(0 8px 15px rgba(0, 130, 187, 0.1));
}

.login-illus:hover {
    transform: scale(1.02);
    opacity: 1;
}

/* Right side form container */
.login-form-container {
    padding: 35px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-header {
    text-align: center;
    margin-bottom: 25px;
}

.login-title {
    color: var(--login-brand-blue);
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.login-subtitle {
    color: #6b7280;
    font-size: 16px;
    margin: 0;
    font-weight: 400;
}

/* Modern form styling with floating labels */
.form-floating {
    position: relative;
    margin-bottom: 18px;
}

.form-control-modern {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 16px 6px 16px;
    font-size: 16px;
    transition: var(--login-transition);
    height: 54px;
}

.form-control-modern:focus {
    background: #ffffff;
    border-color: var(--login-brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 130, 187, 0.1);
    outline: none;
}

.form-floating > label {
    color: #64748b;
    font-weight: 500;
    font-size: 14px;
    padding: 16px;
    transition: var(--login-transition);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--login-brand-blue);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Enhanced login button */
.btn-login {
    background: linear-gradient(135deg, var(--login-brand-blue), var(--login-brand-accent));
    border: none;
    color: white;
    border-radius: 12px;
    font-weight: 600;
    padding: 14px 28px;
    font-size: 16px;
    letter-spacing: 0.3px;
    transition: var(--login-transition);
    position: relative;
    overflow: hidden;
    height: 50px;
}

.btn-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-login:hover {
    background: linear-gradient(135deg, #006a9a, var(--login-brand-blue));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 130, 187, 0.3);
}

.btn-login:hover::before {
    left: 100%;
}

.btn-login:active {
    transform: translateY(0);
}

/* Footer styling */
.login-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.login-footer small {
    color: #64748b;
    font-size: 13px;
}

/* Utility classes */
.muted-small {
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
}

.bg-gradient-light {
    background: linear-gradient(135deg, var(--login-brand-light) 0%, #ffffff 50%, var(--login-brand-light) 100%);
}

/* Responsive design improvements */
@media (max-width: 991px) {
    .login-card {
        max-height: none;
        min-height: 300px;
        width: 95%;
        margin: 10px auto;
    }
    
    .login-form-container {
        padding: 30px 25px;
    }
    
    .login-title {
        font-size: 24px;
    }
    
    .logo-circle {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .brand-title {
        font-size: 18px;
    }
    
    .brand-subtitle {
        font-size: 14px;
    }

    .container {
        padding: 10px;
    }
}

@media (max-width: 576px) {
    .login-form-container {
        padding: 25px 20px;
    }
    
    .login-title {
        font-size: 22px;
    }
    
    .form-control-modern {
        height: 50px;
        padding: 16px 14px 4px 14px;
    }
    
    .btn-login {
        height: 46px;
        padding: 12px 24px;
        font-size: 15px;
    }

    .login-card {
        width: 98%;
        margin: 5px auto;
        border-radius: 16px;
    }

    .container {
        padding: 5px;
    }

    body.bg-light {
        padding: 0;
        margin: 0;
    }
}

/* Loading state for button */
.btn-login.loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn-login.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===============================================
   ESTILOS PARA NUEVA COTIZACIÓN - CORPORATIVOS
   =============================================== */

/* Variables corporativas para Nueva Cotización */
:root {
    --corp-primary: #0082BB;
    --corp-secondary: #009BD5;
    --corp-light: rgba(0, 130, 187, 0.1);
    --corp-hover: rgba(0, 155, 213, 0.15);
    --corp-dark: #006a9a;
    --corp-lighter: rgba(0, 155, 213, 0.05);
    --text-dark: #2c3e50;
    --bg-light: #f8f9fa;
    --border-radius: 8px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Header corporativo minimalista */
.cotizacion-header {
    background: linear-gradient(135deg, var(--corp-light), var(--corp-lighter));
    border: 1px solid rgba(0, 130, 187, 0.2);
    border-radius: var(--border-radius);
}

.gradient-text {
    color: var(--corp-primary);
    font-weight: 600;
}

/* Botón principal corporativo */
.btn-cotizacion {
    background: linear-gradient(135deg, var(--corp-primary), var(--corp-secondary));
    border: none;
    color: white;
    border-radius: var(--border-radius);
    font-weight: 500;
    padding: 12px 32px;
    transition: all 0.2s ease;
}

.btn-cotizacion:hover {
    background: linear-gradient(135deg, var(--corp-dark), var(--corp-primary));
    color: white;
    box-shadow: var(--shadow-md);
}

/* Tabla minimalista corporativa */
.table-cotizaciones {
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.table-cotizaciones thead {
    background: linear-gradient(135deg, var(--corp-primary), var(--corp-secondary));
    color: white;
}

.table-cotizaciones th {
    border: none;
    padding: 16px;
    font-weight: 500;
    font-size: 14px;
}

.table-cotizaciones tbody tr:hover {
    background: var(--corp-hover);
    transition: background-color 0.2s ease;
}

/* Modal headers corporativos con tonos variados */
.modal-header-primary {
    background: var(--corp-primary);
    color: white;
    border-bottom: none;
}

.modal-header-secondary {
    text-align: center;
    background: var(--corp-secondary);
    color: white;
    border-bottom: none;
}

.modal-header-dark {
    background: var(--corp-dark);
    color: white;
    border-bottom: none;
}

/* Card headers corporativos con variaciones */
.card-header-search {
    background: var(--corp-secondary);
    color: white;
    border-bottom: none;
}

.card-header-details {
    background: var(--corp-primary);
    color: white;
    border-bottom: none;
}

.card-header-montos {
    background: var(--corp-dark);
    color: white;
    border-bottom: none;
}

.card-header-confirmados {
    background: linear-gradient(135deg, var(--corp-secondary), var(--corp-primary));
    color: white;
    border-bottom: none;
}

/* Inputs modernos y minimalistas */
.input-modern {
    border: 1px solid #ced4da;
    border-radius: var(--border-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-modern:focus {
    border-color: var(--corp-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 130, 187, 0.25);
}

/* Botones de acción */
.btn-action {
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Cards minimalistas */
.card {
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* Sugerencias */
.list-suggestions {
    border-radius: var(--border-radius);
    border: 1px solid #dee2e6;
    box-shadow: var(--shadow-md);
}

.list-suggestions li:hover {
    background: var(--corp-light);
    color: var(--corp-primary);
}

/* Input groups corporativos */
.input-group-text.bg-primary {
    background: var(--corp-primary) !important;
}

.input-group-text.bg-secondary {
    background: var(--corp-secondary) !important;
}

.input-group-text.bg-success {
    background: var(--corp-dark) !important;
}

.input-group-text.bg-warning {
    background: var(--corp-secondary) !important;
}

.input-group-text.bg-info {
    background: var(--corp-primary) !important;
}

/* Outline buttons corporativos */
.btn-outline-primary {
    border-color: var(--corp-primary);
    color: var(--corp-primary);
}

.btn-outline-primary:hover {
    background: var(--corp-primary);
    border-color: var(--corp-primary);
}

.btn-outline-secondary {
    border-color: var(--corp-secondary);
    color: var(--corp-secondary);
}

.btn-outline-secondary:hover {
    background: var(--corp-secondary);
    border-color: var(--corp-secondary);
}

.btn-outline-success {
    border-color: var(--corp-dark);
    color: var(--corp-dark);
}

.btn-outline-success:hover {
    background: var(--corp-dark);
    border-color: var(--corp-dark);
}

.btn-outline-warning {
    border-color: var(--corp-secondary);
    color: var(--corp-secondary);
}

.btn-outline-warning:hover {
    background: var(--corp-secondary);
    border-color: var(--corp-secondary);
}

.btn-outline-info {
    border-color: var(--corp-primary);
    color: var(--corp-primary);
}

.btn-outline-info:hover {
    background: var(--corp-primary);
    border-color: var(--corp-primary);
}

/* Responsivo para Nueva Cotización */
@media (max-width: 768px) {
    .btn-cotizacion {
        padding: 10px 24px;
        font-size: 16px;
    }
    
    .table-cotizaciones th {
        padding: 12px 8px;
        font-size: 13px;
    }
}

/* Utilities específicas */
.hidden {
    display: none !important;
}

/* Modal body corporativo */
.modal-body-corp {
    background: linear-gradient(to bottom, var(--bg-light), #ffffff);
}

/* Alertas corporativas */
.alert-corp {
    background: var(--corp-light);
    border: 1px solid rgba(0, 130, 187, 0.3);
    color: var(--corp-dark);
}

/* Labels corporativos */
.label-corp-primary {
    color: var(--corp-primary);
}

.label-corp-secondary {
    color: var(--corp-secondary);
}

.label-corp-dark {
    color: var(--corp-dark);
}

.col-lg-9 {
    max-width: 80% !important;
    margin-left: auto;
    margin-right: auto;
}

/* Estilos para menú expandible */
.submenu-expandible {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    display: none;
}

.menu-expandible {
    position: relative;
}

.menu-principal {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
}

.menu-principal:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    text-decoration: none !important;
}

.chevron-icon {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.submenu-expandible .nav-item {
    padding-left: 1rem;
}

.submenu-expandible .nav-link {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    border-left: 2px solid transparent;
    transition: border-color 0.2s ease, padding-left 0.2s ease, background-color 0.2s ease !important;
}

.submenu-expandible .nav-link:hover {
    border-left-color: #009BD5 !important;
    padding-left: 1.2rem !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* Asegurar que el contenedor del menú tenga espacio para expandirse */
.nav.flex-column {
    overflow: visible !important;
}

/* Evitar que los enlaces se comporten como enlaces normales cuando no deben */
.menu-principal[href="#"] {
    color: inherit !important;
}

.menu-principal[href="#"]:hover {
    color: inherit !important;
}

/* ===== ESTILOS PARA BOTONES DE VISTA DEL CALENDARIO ===== */
.btn.active {
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.btn-light.active {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #0082BB !important;
}

.btn-outline-light {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #ffffff !important;
}

/* ===== ESTILOS ADICIONALES PARA COTIZACIONES ===== */

/* Botón corporativo celeste */
.btn-corp-celeste {
    background: linear-gradient(90deg, var(--login-brand-blue), var(--login-brand-accent));
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(0,130,187,0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.btn-corp-celeste:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,130,187,0.22);
    opacity: 0.98;
}
.btn-corp-celeste:active,
.btn-corp-celeste:focus {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(0,130,187,0.16);
    outline: none !important;
}

/* Botones corporativos rojos (outline y filled) */
.btn-corp-rojo {
    background: linear-gradient(90deg, #dc3545, #c82333);
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(220,53,69,0.14);
}
.btn-corp-rojo:hover { box-shadow: 0 10px 30px rgba(220,53,69,0.18); transform: translateY(-2px); }
.btn-corp-outline-rojo {
    background: transparent;
    color: #dc3545 !important;
    border: 2px solid #dc3545 !important;
}
.btn-corp-outline-rojo:hover {
    background: rgba(220,53,69,0.06) !important;
    color: #a71d2a !important;
    border-color: #a71d2a !important;
}


.btn-corp-outline {
    background: transparent;
    color: var(--login-brand-blue) !important;
    border: 2px solid var(--login-brand-blue) !important;
}

.company-logo {
    max-width: 75px !important;
    height: auto !important;
}

.cotizacion-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

.gradient-text {
    background: linear-gradient(135deg, #0082BB, #009BD5) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #0082BB, #009BD5) !important;
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, #6c757d, #495057) !important;
}



.form-control-sm {
    padding: .25rem .4rem;
    font-size: .8rem;
}
label.form-label.small {
    margin-bottom: .1rem;
}

/* ===== Nuevas reglas para encabezado de cotización (flex + responsive + PDF) ===== */
.pdf-content { background: #fafbfc; font-family: Arial, Helvetica, sans-serif !important; color: var(--text-dark); }
/* Asegurar que el contenedor usado para generar el PDF use Arial también en impresión */
#contenidoPDF, #contenidoPDF * { font-family: Arial, Helvetica, sans-serif !important; }

/* Encabezado: mantiene logo + info + documento alineados */
.document-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    background: #fff;
    border-radius: var(--border-radius);
}

.doc-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 60%;
    min-width: 0;
}

.company-logo-wrap { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.company-logo { max-height: 90px; width: auto; filter: none; }

.company-info { flex: 1 1 auto; min-width: 0; }
.company-info .small-table { font-size: 0.92em; margin-bottom: 0; }
.label-cell { width: 32%; white-space: nowrap; }

.doc-right { flex: 0 0 220px; display: flex; align-items: center; justify-content: flex-end; }
.document-card { background: #ffffff; color: #000; padding: 10px 14px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.04); width: 100%; max-width: 220px; }
.document-title { font-weight: 700; color: var(--text-dark); letter-spacing: 0.6px; margin-bottom: 6px; }
.document-number { margin-bottom: 6px; }
.document-date { font-size: 0.95em; color: #333; }

/* Dejar separación visual entre la info y la tarjeta de documento (no se tocan) */
.document-header-flex .company-info { margin-right: 12px; }
.document-header-flex .doc-right { padding-left: 12px; border-left: 1px solid rgba(0,0,0,0.06); }

/* Forzar tamaño de fuente 10px en las secciones solicitadas dentro del modal/PDF */
/* Abarca: tabla de datos de la empresa, información del cliente, tarjeta de documento y tabla de servicios */
#contenidoPDF .company-info .small-table,
#contenidoPDF .small-table,
#contenidoPDF .company-info,
#contenidoPDF .document-card,
#contenidoPDF .document-card *,
#contenidoPDF .card-body .small-table,
#contenidoPDF .legal-services-table,
#contenidoPDF .legal-services-table th,
#contenidoPDF .legal-services-table td,
#contenidoPDF #tabla-items,
#contenidoPDF #subtotal,
#contenidoPDF #iva,
#contenidoPDF #total {
    font-size: 10px !important;
    line-height: 1.2 !important;
}

#contenidoPDF .document-title { font-size: 10px !important; }
#contenidoPDF .document-date { font-size: 10px !important; }


/* Ajustes para la tabla dentro del modal para consistencia tipográfica */
.modal-body .table.table-borderless { font-size: 0.95em; }
.modal-body .card-body { background: #fff; padding: 2rem; }

/* Badge pequeña para Contactos Solicitados en el menú */
.menu-badge-contactos {
    font-size: 0.65rem;
    padding: 0.25em 0.45em;
    vertical-align: middle;
    border-radius: 8px;
}

/* Forzar texto blanco para badges rojos (consistencia) */
.menu-badge-contactos, .menu-badge-visitas {
    color: #fff !important;
}
.modal-body .table.table-borderless td.fw-semibold { font-weight: 600; }

/* Evitar solapamientos en PDF: evitar overflow y forzar page-breaks controlados */
.pdf-corp-table { page-break-inside: auto; }
.pdf-corp-table tr { page-break-inside: avoid; page-break-after: auto; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }

/* Forzar títulos de sección dentro del contenido PDF/modal a negro para máxima legibilidad */
#contenidoPDF .pdf-corp-section-title { color: #000 !important; }

/* Responsive: en pantallas pequeñas apilar */
@media (max-width: 767.98px) {
    .document-header-flex { flex-direction: column; align-items: stretch; padding: 12px; }
    .doc-left { width: 100%; }
    .doc-right { width: 100%; justify-content: flex-start; border-left: none; padding-left: 0; margin-top: 10px; }
    .company-logo { max-height: 70px; }
}

/* Imprimir / html2pdf: reducir sombras y forzar fondos blancos */
@media print {
    .document-card, .document-header-flex, .pdf-content { box-shadow: none !important; }
    .document-header-flex { border: 2px solid var(--corp-primary); }
    .company-logo { filter: none !important; }
}

/* Utilidades pequeñas */
.small-table td, .small-table th { padding: 2px 6px; }

/* Estilo para el número de cotización: sin fondo ni contorno, texto negro */
.document-number .badge,
.document-title .badge,
#NumeroCotizcion {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 700 !important;
}

/* Allow NumeroCotizcion to show explicit newlines */
#NumeroCotizcion {
  white-space: pre-line;
  line-height: 1.05;
}

/* Ensure PDF-generating state also respects newlines */
.pdf-generating #NumeroCotizcion { white-space: pre-line; }

/* Ocultar elementos solo en la versión PDF/impresa */
.hide-on-pdf { visibility: visible; }
@media print {
    .hide-on-pdf { display: none !important; }
}

/* También mejorar compatibilidad con html2pdf (usa clase pdf-generating) */
.pdf-generating .hide-on-pdf { display: none !important; }

/* Si el footer legal queda muy cerca del final de página, forzar salto antes de él */
.move-to-next-page { display: block; }
@media print {
    .move-to-next-page { page-break-before: always; }
}
/* durante la generación con html2pdf aplicamos la misma regla usando el body state */
.pdf-generating .move-to-next-page { page-break-before: always; }

/* pequeño ajuste visual cuando se mueve el footer para mantener separación */
.legal-footer.move-to-next-page { margin-top: 20px; }

/* Forzar tamaño de fuente 8px en el pie legal dentro del contenido PDF */
#contenidoPDF #legalFooter,
#contenidoPDF #legalFooter * {
    font-size: 8px !important;
    line-height: 1.05 !important;
}

/* High-res PDF rendering tweaks (aplicadas temporalmente con la clase body.pdf-highres) */
.pdf-highres {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.pdf-highres .shadow-sm, .pdf-highres .shadow-lg {
    box-shadow: none !important; /* sombras rasterizan mal */
}
.pdf-highres .gradient-text, .pdf-highres .bg-gradient-primary {
    background: none !important; /* degradados pueden perder contraste al rasterizar */
    color: #0082BB !important;
}
.pdf-highres img {
    /* Preferimos -webkit-optimize-contrast para navegadores basados en WebKit/Chrome y como prefijo para Edge Chromium */
    image-rendering: -webkit-optimize-contrast;
    /* 'crisp-edges' removido por compatibilidad con Edge; se usan prefijos y 'pixelated' como fallbacks */
    /* 'pixelated' puede ser útil como fallback en navegadores que lo soportan */
    image-rendering: pixelated;
}
.pdf-highres .company-logo { max-height: 64px !important; }
.pdf-highres .pdf-corp-table td, .pdf-highres .pdf-corp-table th { background: #fff !important; color: #000 !important; }
.pdf-highres .legal-footer { font-size: 8px !important; }
.pdf-highres .badge { box-shadow: none !important; }


/* ===== Compact layout for PDF/modal after font-size reduction ===== */
/* Scope all rules to #contenidoPDF so site-wide layout is unaffected */
#contenidoPDF {
    --pdf-compact-padding: 6px;
    --pdf-compact-padding-sm: 4px;
}

#contenidoPDF .document-header-flex { padding: 8px !important; gap: 10px !important; }
#contenidoPDF .company-logo { max-height: 70px !important; }
#contenidoPDF .company-info { padding: 6px !important; }
#contenidoPDF .company-info .small-table td, #contenidoPDF .company-info .small-table th,
#contenidoPDF .small-table td, #contenidoPDF .small-table th {
    padding: 3px 6px !important;
}

#contenidoPDF .document-card { padding: 6px 8px !important; }
#contenidoPDF .document-title, #contenidoPDF .document-date { margin-bottom: 4px !important; }

#contenidoPDF .card.border-2, #contenidoPDF .card.border-2 .card-body {
    padding: 8px !important;
}

#contenidoPDF .legal-services-table th, #contenidoPDF .legal-services-table td {
    padding: 6px 8px !important;
}

#contenidoPDF .modal-body .card-body { padding: 8px !important; }

#contenidoPDF .pdf-corp-section-title { padding-bottom: 3px !important; margin-bottom: 6px !important; }

#contenidoPDF .legal-footer { padding: 8px !important; }
#contenidoPDF .legal-footer .row > div { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Reduce default table cell spacing for compact PDF */
#contenidoPDF table.table td, #contenidoPDF table.table th { padding: 6px 8px !important; }

/* Ensure totals row remains readable but compact */
#contenidoPDF .pdf-corp-total-row td { padding-top: 8px !important; padding-bottom: 8px !important; }
/* Compact adjustments for cotización header and client info (scoped to PDF/modal) */
#contenidoPDF .document-header-flex {
  align-items: flex-start;
  gap: 0.5rem;
}

#contenidoPDF .document-header-flex .doc-left {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

#contenidoPDF .company-logo {
  max-height: 48px !important;
  width: auto !important;
}

#contenidoPDF .company-info {
  max-width: 360px;
  margin-left: 0.35rem;
}

#contenidoPDF .document-header-flex .doc-right {
  flex: 0 0 220px;
  max-width: 220px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

#contenidoPDF .document-card {
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--bs-primary, #0082BB);
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

#contenidoPDF .document-title .badge,
#contenidoPDF #NumeroCotizcion {
  background: transparent !important;
  color: #000 !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.95rem !important;
}

/* Make the client info card more compact */
#contenidoPDF .legal-doc-card .card-body {
  padding: 0.5rem !important;
}

#contenidoPDF .legal-doc-card .card-header {
  padding: 0.35rem 0.5rem !important;
  font-size: 13px !important;
}

#contenidoPDF .small-table td,
#contenidoPDF .small-table th {
  padding: 0.28rem 0.45rem !important;
  font-size: 10px !important;
}

/* Reduce vertical spacing between sections inside the modal/PDF */
#contenidoPDF .row.mb-4 {
  margin-bottom: 0.6rem !important;
}

#contenidoPDF .pdf-corp-header {
  font-size: 14px !important;
  margin-bottom: 0.15rem;
}

/* Tweak footer list spacing to keep the overall block short */
#contenidoPDF .legal-footer .list-unstyled.small li {
  font-size: 8px !important;
  margin-bottom: 0.28rem;
}

/* Slightly reduce table cell vertical padding for the services table */
#contenidoPDF .legal-services-table td,
#contenidoPDF .legal-services-table th {
  padding: 0.45rem 0.5rem !important;
}

/* When generating PDF, keep compact layout enforced */
.pdf-generating #contenidoPDF .company-logo { max-height: 48px !important; }
.pdf-generating #contenidoPDF .company-info { max-width: 360px; }
.pdf-generating #contenidoPDF .legal-doc-card .card-body { padding: 0.45rem !important; }
/* Corporate outline for the document card (NumeroCotizcion) */
#contenidoPDF .document-card {
  border: 2px solid var(--bs-primary, #0082BB);
  border-radius: 0.375rem;
  background: #fff;
  padding: 0.35rem 0.6rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

#contenidoPDF .document-title {
  margin-bottom: 0.15rem;
}

/* Keep the number badge text plain and ensure it fits inside the bordered card */
#contenidoPDF #NumeroCotizcion {
  background: transparent !important;
  color: #000 !important;
  padding: 0.15rem 0.4rem !important;
  display: inline-block;
}

/* Ensure border is kept when generating PDF */
.pdf-generating #contenidoPDF .document-card {
  border-color: var(--bs-primary, #0082BB);
}

/* Ensure document-card border matches corporate header color */
#contenidoPDF .document-card {
  border: 2px solid #0082BB !important;
}

.pdf-generating #contenidoPDF .document-card {
  border-color: #0082BB !important;
}

/* --- Fixes for small-screen menu and dropdown visibility --- */
/* Ensure the explicit toggler icon matches expected size and color (moved from inline styles) */
.navbar-toggler .bi-list { font-size: 1.25rem; color: inherit; }

/* Make sure offcanvas and dropdowns appear above other content on small screens */
.offcanvas { z-index: 2000 !important; }
.dropdown-menu { z-index: 3000 !important; }

/* Prevent dropdowns inside responsive tables from being clipped */
.table-responsive { overflow: auto; }
.table-responsive .dropdown-menu { position: absolute; z-index: 3000 !important; }

/* Allow main container and parents to not clip positioned children (offcanvas, dropdowns) */
.container-fluid.main-container, .main-container { overflow: visible !important; }

/* Sidebar should sit below offcanvas when shown */
.sidebar-fixed-width { z-index: 1020; }

/* Small UX tweak: ensure the navbar toggler is visible when using dark backgrounds */
.navbar-custom .navbar-toggler { border-color: rgba(255,255,255,0.25); }

/* --- Fix dropdown clipping in small screens: allow table-responsive to show dropdowns --- */
@media (max-width: 991.98px) {
  .table-responsive { overflow: visible !important; }
  .table-responsive .dropdown-menu { position: absolute !important; z-index: 4000 !important; }
}

/* End of dropdown clipping fix */

/* Styles previously inline in Clientes.html, moved here to satisfy linter */
.offcanvas .Logo { width: 75px; height: auto; }
.sidebar-fixed-width { width: 250px; }
.sidebar-fixed-width .Logo { width: 75px; height: auto; display:block; margin:0 auto; }
.container-fluid.main-container { margin-left: 0; margin-top: 1rem; }

/* Small width for RUT DV field used in client forms */
#DV { max-width: 88px; }

/* ===== ESTILOS PARA TABLA RESPONSIVA DE COTIZACIONES ===== */
/* Tabla responsiva con vista de tarjetas en móviles */
@media screen and (max-width: 768px) {
    .table-responsive-custom {
        border: none;
    }
    
    .table-responsive-custom table {
        border: none;
    }
    
    .table-responsive-custom thead {
        display: none;
    }
    
    .table-responsive-custom tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        background: #fff;
    }
    
    .table-responsive-custom tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: right !important;
    }
    
    .table-responsive-custom tbody td:last-child {
        border-bottom: none;
    }
    
    .table-responsive-custom tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #0082BB;
        text-align: left;
        flex: 1;
        padding-right: 1rem;
    }
    
    .table-responsive-custom tbody td button {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    /* Ajustes de paginación en móvil */
    .card-footer .d-flex {
        flex-direction: column;
        gap: 1rem;
    }
    
    .card-footer .d-flex > * {
        width: 100%;
    }
    
    .card-footer .d-flex .gap-3 {
        flex-direction: column;
        gap: 0.5rem !important;
    }
}

/* Estilos adicionales para mejorar legibilidad en pantallas muy pequeñas */
@media screen and (max-width: 576px) {
    .cotizacion-header .card-title {
        font-size: 1.5rem;
    }
    
    .cotizacion-header .card-text {
        font-size: 0.9rem;
    }
    
    .card-header h5 {
        font-size: 1rem;
    }
    
    /* Filtros en columna en móvil */
    .row.g-3 > [class*="col-"] {
        width: 100% !important;
    }
}

/* ===== MODAL EXTRA ANCHO PARA DETALLES DE COTIZACIÓN ===== */
.modal-xxl {
    max-width: 95% !important;
    width: 95% !important;
}

@media (min-width: 1400px) {
    .modal-xxl {
        max-width: 1600px !important;
        width: 1600px !important;
    }
}

/* ===== Z-INDEX HIERARCHY PARA DROPDOWN PREDICTIVO ===== */
/* Asegura que el dropdown de sugerencias siempre esté visible sobre TODOS los elementos */
.suggestions-list {
    z-index: 99999 !important;
    position: fixed !important;
}

/* El modal footer no debe interferir con el dropdown */
.modal-footer {
    z-index: auto !important;
    position: relative !important;
}

/* El modal body mantiene su comportamiento normal */
.modal-body {
    position: relative;
    z-index: auto;
}

/* Bootstrap modal layers (para referencia) */
.modal-backdrop {
    z-index: 1050;
}

.modal {
    z-index: 1055;
}

/* ===== CLASES PARA NEWCOTIZACIONES.HTML ===== */

/* Título con line-height ajustado */
.title-compact {
    line-height: 1.4;
}

/* Modal detalles de cotización - estructura completa */
.modal-detalles-dialog {
    height: 90vh;
    margin: 2.5vh auto;
}

.modal-detalles-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-detalles-header {
    flex-shrink: 0;
}

.modal-detalles-body {
    flex: 1;
    overflow-y: hidden;
    overflow-x: hidden;
}

.modal-detalles-row {
    height: 100%;
}

/* Panel izquierdo (75% ancho) */
.panel-left-detalles {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Panel derecho (25% ancho) */
.panel-right-resumen {
    height: 100%;
    overflow-y: hidden;
}

.panel-right-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Iconos circulares con gradiente */
.icon-circle-gradient {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0082BB, #009BD5);
}

.icon-circle-secondary {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #009BD5;
}

/* Encabezados de sección */
.section-title-primary {
    color: #0082BB;
}

.section-title-secondary {
    color: #009BD5;
}

.section-shrink {
    flex-shrink: 0;
}

/* Card headers con gradiente corporativo */
.card-header-gradient-primary {
    background: linear-gradient(135deg, #0082BB, #009BD5);
    border: none;
}

.card-header-solid-primary {
    background: #0082BB;
    border: none;
    flex-shrink: 0;
}

.card-header-solid-secondary {
    background: #009BD5;
    border: none;
    flex-shrink: 0;
}

/* Card body con scroll */
.card-body-light-bg {
    background-color: #f8f9fa;
}

.card-body-scrollable {
    flex: 1;
    overflow-y: auto;
    background-color: #f8f9fa;
}

/* Cards flexibles para resumen */
.card-flex-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Modal footer con gradiente */
.modal-footer-gradient {
    flex-shrink: 0;
    background: linear-gradient(to right, #f8f9fa 0%, #ffffff 100%);
}

/* Badges de resumen con estilos específicos */
.badge-monto-neto {
    background: #0082BB;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

.badge-iva {
    background: #6c757d;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

.badge-total {
    background: #009BD5;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

/* Inputs de resumen financiero */
.input-monto-neto {
    border: 2px solid #0082BB;
    width: 150px;
    text-align: right;
    background: white;
    color: #0082BB;
    font-size: 1rem;
}

.input-iva {
    border: 2px solid #6c757d;
    width: 150px;
    text-align: right;
    background: white;
    color: #6c757d;
    font-size: 1rem;
}

.input-total {
    border: 2px solid #009BD5;
    width: 180px;
    text-align: right;
    background: white;
    color: #009BD5;
    font-size: 1.1rem;
}


/* ========================================
   CONTACTO-SOLICITADO RESPONSIVE STYLES
   Clases específicas con prefijo cs-
   ======================================== */

/* Contenedor principal responsive */
.cs-main-container {
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Header card responsive */
.cs-page-header {
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.cs-header-gradient {
    background: linear-gradient(135deg, #0082BB 0%, #0066AA 100%);
    padding: 1.5rem;
    border: none;
}

.cs-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-header-subtitle {
    font-size: 0.9rem;
    opacity: 0.95;
    margin: 0.5rem 0 0 0;
}

.cs-badge-count {
    background: white !important;
    color: #0082BB !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

/* Tabla responsive con scroll horizontal */
.cs-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cs-table {
    width: 100%;
    min-width: 1200px;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.cs-table thead th {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 1rem 0.75rem;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.cs-table tbody tr {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #e9ecef;
}

.cs-table tbody tr:hover {
    background-color: #f1f9ff;
}

.cs-table tbody td {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    color: #495057;
}

.cs-table tbody td:last-child {
    position: sticky;
    right: 0;
    background: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.05);
}

.cs-table tbody tr:hover td:last-child {
    background-color: #f1f9ff;
}

/* Botón asignar en tabla */
.cs-btn-assign {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.cs-btn-assign:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 130, 187, 0.3);
}

/* Vista de tarjetas para móvil */
.cs-cards-container {
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.cs-contact-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef;
}

.cs-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 130, 187, 0.2);
}

.cs-card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem;
    border-bottom: 2px solid #0082BB;
}

.cs-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-card-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-weight: 600;
}

.cs-card-body {
    padding: 1.25rem;
}

.cs-info-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cs-info-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.cs-info-label {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.85rem;
    min-width: 100px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cs-info-label i {
    font-size: 1rem;
    color: #0082BB;
}

.cs-info-value {
    color: #212529;
    font-size: 0.9rem;
    flex: 1;
    word-break: break-word;
}

.cs-card-actions {
    padding: 1rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.cs-btn-card-action {
    width: 100%;
    padding: 0.75rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.cs-btn-card-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 130, 187, 0.3);
}

/* Estados de carga y vacío */
.cs-loading-spinner,
.cs-empty-state,
.cs-error-state {
    padding: 3rem 1.5rem;
    text-align: center;
}

.cs-loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
}

.cs-empty-state {
    font-size: 1.1rem;
    color: #6c757d;
}

.cs-empty-state .cs-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

/* Modal personalizado */
.cs-modal-header {
    background: linear-gradient(135deg, #0082BB 0%, #0066AA 100%);
    color: white;
    padding: 1.25rem 1.5rem;
}

.cs-modal-title {
    font-weight: 700;
    font-size: 1.25rem;
}

.cs-modal-info-row {
    margin-bottom: 1rem;
}

.cs-modal-label {
    font-weight: 700;
    color: #495057;
    margin-bottom: 0.25rem;
}

.cs-modal-value {
    color: #212529;
    font-size: 1rem;
}

/* Breakpoints responsive */

/* Tablets grandes y pequeñas (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .cs-table {
        min-width: 1000px;
        font-size: 0.85rem;
    }
    
    .cs-table thead th {
        padding: 0.75rem 0.5rem;
        font-size: 0.7rem;
    }
    
    .cs-table tbody td {
        padding: 0.75rem 0.5rem;
    }
    
    .cs-header-title {
        font-size: 1.3rem;
    }
}

/* Móviles y tablets pequeñas (< 768px) */
@media (max-width: 767px) {
    .cs-page-header {
        margin-bottom: 1rem;
        border-radius: 0;
    }
    
    .cs-header-gradient {
        padding: 1rem;
    }
    
    .cs-header-title {
        font-size: 1.2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .cs-header-subtitle {
        font-size: 0.85rem;
    }
    
    .cs-badge-count {
        font-size: 0.8rem;
        padding: 0.35rem 0.75rem;
    }
    
    /* Ocultar tabla, mostrar tarjetas */
    .cs-table-wrapper {
        display: none !important;
    }
    
    .cs-cards-container {
        display: block !important;
        padding: 0.75rem;
    }
    
    .cs-contact-card {
        margin-bottom: 1rem;
    }
    
    .cs-card-header {
        padding: 0.875rem;
    }
    
    .cs-card-title {
        font-size: 1rem;
        flex-wrap: wrap;
    }
    
    .cs-card-body {
        padding: 1rem;
    }
    
    .cs-info-label {
        min-width: 90px;
        font-size: 0.8rem;
    }
    
    .cs-info-value {
        font-size: 0.85rem;
    }
}

/* Móviles pequeños (< 576px) */
@media (max-width: 575px) {
    .cs-header-gradient {
        padding: 0.875rem;
    }
    
    .cs-header-title {
        font-size: 1.1rem;
    }
    
    .cs-cards-container {
        padding: 0.5rem;
    }
    
    .cs-contact-card {
        border-radius: 0.5rem;
    }
    
    .cs-card-header {
        padding: 0.75rem;
    }
    
    .cs-card-body {
        padding: 0.875rem;
    }
    
    .cs-info-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .cs-info-label {
        min-width: auto;
        font-size: 0.75rem;
    }
    
    .cs-info-value {
        font-size: 0.8rem;
        padding-left: 1.5rem;
    }
    
    .cs-card-actions {
        padding: 0.75rem;
    }
    
    .cs-btn-card-action {
        padding: 0.625rem;
        font-size: 0.9rem;
    }
}

/* Paginación */
.cs-pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background: transparent;
    border-top: none;
    flex-wrap: wrap;
    gap: 1rem;
}

.cs-pagination-info {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
}

.cs-pagination-info strong {
    color: #0082BB;
    font-weight: 700;
}

.cs-pagination-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.cs-pagination-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #dee2e6;
    background: white;
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem;
}

.cs-pagination-btn:hover:not(:disabled) {
    background: #0082BB;
    color: white;
    border-color: #0082BB;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 130, 187, 0.3);
}

.cs-pagination-btn:disabled {
    background: #e9ecef;
    color: #adb5bd;
    border-color: #dee2e6;
    cursor: not-allowed;
    opacity: 0.6;
}

.cs-pagination-btn.active {
    background: linear-gradient(135deg, #0082BB 0%, #0066AA 100%);
    color: white;
    border-color: #0082BB;
    box-shadow: 0 4px 12px rgba(0, 130, 187, 0.4);
    transform: scale(1.05);
}

.cs-pagination-btn i {
    font-size: 1rem;
}

.cs-pagination-number {
    min-width: 40px;
    padding: 0.5rem 0.75rem;
}

.cs-pagination-nav {
    min-width: 40px;
    font-weight: 700;
}

.cs-pagination-ellipsis {
    color: #6c757d;
    padding: 0 0.5rem;
    font-weight: 700;
    cursor: default;
}

/* Selector de items por página */
.cs-items-per-page {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cs-items-per-page label {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.cs-items-per-page select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 0.5rem;
    background: white;
    color: #495057;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230082BB' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.cs-items-per-page select:hover {
    border-color: #0082BB;
}

.cs-items-per-page select:focus {
    outline: none;
    border-color: #0082BB;
    box-shadow: 0 0 0 3px rgba(0, 130, 187, 0.1);
}

/* Responsive paginación */
@media (max-width: 767px) {
    .cs-pagination-container {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    
    .cs-pagination-info {
        width: 100%;
        text-align: center;
        font-size: 0.85rem;
    }
    
    .cs-pagination-controls {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .cs-pagination-btn {
        min-width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    
    .cs-pagination-number {
        min-width: 36px;
        padding: 0.4rem 0.6rem;
    }
    
    .cs-items-per-page {
        width: 100%;
        justify-content: center;
    }
    
    .cs-items-per-page select {
        flex: 0;
    }
    
    /* Ocultar números intermedios en móvil */
    .cs-pagination-btn.cs-hide-mobile {
        display: none;
    }
}

@media (max-width: 575px) {
    .cs-pagination-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .cs-pagination-number {
        min-width: 32px;
        padding: 0.3rem 0.5rem;
    }
}

/* Impresión */
@media print {
    .cs-cards-container {
        display: none !important;
    }
    
    .cs-table-wrapper {
        display: block !important;
        overflow: visible;
    }
    
    .cs-table {
        min-width: 100%;
        font-size: 8pt;
    }
    
    .cs-table thead th,
    .cs-table tbody td {
        padding: 0.25rem;
    }
    
    .cs-btn-assign,
    .cs-card-actions {
        display: none !important;
    }
    
    .cs-pagination-container {
        display: none !important;
    }
}

/* ========================================
   FORMULARIO DE CONTACTO - COLORES CORPORATIVOS
   ======================================== */

/* Fondo de página */
.contact-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Card del formulario */
.card-form {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 130, 187, 0.12);
    overflow: hidden;
}

/* Header del formulario */
.form-header {
    background: transparent;
    color:  #009BD5;
    padding: 2rem;
    margin: -1.25rem -1.25rem 1.5rem -1.25rem;
    text-align: center;
}

.form-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color:  #009BD5;
}

.form-header p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.95;
    color:  #009BD5;
}

/* Inputs con focus corporativo */
.contact-page .form-control:focus,
.contact-page .form-select:focus {
    border-color: #0082BB;
    box-shadow: 0 0 0 0.2rem rgba(0, 130, 187, 0.25);
}

/* Labels requeridos */
.contact-page .form-label.required::after {
    content: ' *';
    color: #0082BB;
    font-weight: bold;
}

/* Botón de envío con colores corporativos */
.btn-submit {
    background: linear-gradient(135deg, #0082BB, #009BD5);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 130, 187, 0.3);
}

.btn-submit:hover {
    background: linear-gradient(135deg, #006699, #0082BB);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 130, 187, 0.4);
    color: white;
}

.btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 130, 187, 0.3);
}

.btn-submit:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Mejoras visuales para inputs */
.contact-page .form-control,
.contact-page .form-select {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    transition: all 0.2s ease;
}

.contact-page .form-control:hover,
.contact-page .form-select:hover {
    border-color: #009BD5;
}

/* Texto informativo */
.contact-page .text-muted {
    color: #6c757d !important;
    font-size: 0.875rem;
}

/* Validación con colores corporativos */
.contact-page .form-control.is-invalid,
.contact-page .form-select.is-invalid {
    border-color: #dc3545;
}

.contact-page .form-control.is-valid,
.contact-page .form-select.is-valid {
    border-color: #0082BB;
}

.contact-page .invalid-feedback {
    color: #dc3545;
    font-size: 0.875rem;
}

.contact-page .valid-feedback {
    color: #0082BB;
    font-size: 0.875rem;
}

/* ========== ESTILOS PARA VISTA ADMINISTRATIVA DE VISITAS ========== */

/* ===== CALENDARIOS COMPACTOS ===== */
.calendario-compacto {
    height: auto !important;
    min-height: 380px !important;
    max-height: none !important;
    width: 100% !important;
    overflow: visible !important;
}

.calendario-compacto .fc {
    height: auto !important;
    min-height: 380px !important;
    overflow: visible !important;
}

.calendario-compacto .fc-view-harness {
    height: auto !important;
    min-height: 380px !important;
    overflow: visible !important;
}

.calendario-compacto .fc-scroller,
.calendario-compacto .fc-scroller-liquid-absolute {
    overflow-y: visible !important;
    overflow-x: visible !important;
    height: auto !important;
}

.calendario-compacto .fc-daygrid-body {
    height: auto !important;
    overflow: visible !important;
}

.calendario-compacto .fc-daygrid-day-frame {
    min-height: 28px !important;
    height: auto !important;
    overflow: visible !important;
}

.calendario-compacto .fc-daygrid-day-number {
    font-size: 0.75rem !important;
    padding: 3px 4px !important;
}

.calendario-compacto .fc-toolbar {
    padding: 8px 0 !important;
    margin-bottom: 8px !important;
}

.calendario-compacto .fc-toolbar-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.calendario-compacto .fc-event {
    font-size: 0.7rem !important;
    padding: 2px 4px !important;
    margin-bottom: 2px !important;
}

.calendario-compacto .fc-daygrid-day-top {
    padding: 2px !important;
}

.calendario-compacto .fc-col-header-cell {
    padding: 4px 3px !important;
    font-size: 0.75rem !important;
}

.calendario-compacto .fc-scrollgrid {
    overflow: visible !important;
}

.calendario-compacto .fc-daygrid-event-harness {
    margin-bottom: 2px !important;
    overflow: visible !important;
}

.calendario-compacto .fc-daygrid-day-events {
    overflow: visible !important;
    margin-bottom: 0 !important;
}

/* ===== CONTENEDOR DE CALENDARIOS EN TRIMESTRE ===== */
.calendarios-trimestre {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    overflow: visible !important;
    padding-left: 0.5rem !important;
    width: 100% !important;
}

.calendarios-trimestre > div {
    width: 100% !important;
    overflow: visible !important;
}

.calendar-mini {
    height: auto !important;
    min-height: 380px !important;
    width: 100% !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

/* ===== TIPOS DE EVENTOS CON COLORES CORPORATIVOS ===== */

/* Badge de tipo de evento */
.fc-event .event-type-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    z-index: 10000 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    transition: transform 0.2s ease !important;
    overflow: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.fc-event:hover .event-type-badge {
    transform: scale(1.1) !important;
}

/* 1. EVENTOS NORMALES - Visitas regulares del usuario */
.fc-event.evento-normal {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1.5px solid rgba(0, 102, 161, 0.6) !important;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.fc-event.evento-normal .event-type-badge {
    background-color: #0082BB !important;
    color: #ffffff !important;
}

/* 2. EVENTOS DE ASISTENTE - Usuario es acompañante */
.fc-event.evento-asistente {
    background: linear-gradient(135deg, rgba(227, 242, 253, 0.9), rgba(187, 222, 251, 0.9)) !important;
    border: 1.5px solid rgba(25, 118, 210, 0.6) !important;
    color: #1565c0 !important;
    box-shadow: 0 1px 3px rgba(33, 150, 243, 0.25) !important;
    position: relative;
}

.fc-event.evento-asistente .event-type-badge {
    background-color: #2196f3 !important;
    color: #ffffff !important;
}

.fc-event.evento-asistente .fc-event-title {
    font-style: italic;
    font-weight: 500;
}

.fc-event.evento-asistente::after {
    content: "ASISTENTE";
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #2196f3;
    color: white;
    font-size: 0.5rem;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 600;
    letter-spacing: 0.3px;
    z-index: 15;
}

/* 3. EVENTOS REAGENDADOS - Historial de cambios */
.fc-event.evento-reagendado {
    background: linear-gradient(135deg, rgba(245, 245, 245, 0.9), rgba(233, 236, 239, 0.9)) !important;
    border: 1.5px dashed rgba(73, 80, 87, 0.5) !important;
    color: #495057 !important;
    opacity: 0.88;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.fc-event.evento-reagendado .event-type-badge {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.fc-event.evento-reagendado .fc-event-title {
    text-decoration: line-through;
    font-style: italic;
}

.fc-event.evento-reagendado::after {
    content: "REAGENDADO";
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #6c757d;
    color: white;
    font-size: 0.5rem;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 600;
    letter-spacing: 0.3px;
    z-index: 15;
}

/* 4. EVENTOS CERRADOS/FINALIZADOS - Visitas completadas */
.fc-event.evento-cerrado {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    border: 2px solid #28a745 !important;
    color: #155724 !important;
    opacity: 0.95;
    position: relative;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2) !important;
    font-weight: 500;
}

.fc-event.evento-cerrado .event-type-badge {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

.fc-event.evento-cerrado .fc-event-title {
    font-weight: 500;
}

.fc-event.evento-cerrado::before {
    content: "✔";
    position: absolute;
    top: 2px;
    right: 2px;
    color: #28a745;
    font-size: 0.85rem;
    font-weight: bold;
    z-index: 15;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Efectos hover diferenciados */
.fc-event.evento-normal:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 130, 187, 0.4) !important;
}

.fc-event.evento-asistente:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(33, 150, 243, 0.5) !important;
    border-color: #1976d2 !important;
}

.fc-event.evento-reagendado:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4) !important;
    opacity: 1;
}

.fc-event.evento-cerrado:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4) !important;
    opacity: 1;
    border-color: #1e7e34 !important;
}

/* Colores de importancia */
.fc-event.importancia-alta .event-type-badge,
.fc-event.imp-alta .event-type-badge {
    background-color: #dc3545 !important;
}

.fc-event.importancia-media .event-type-badge,
.fc-event.imp-media .event-type-badge {
    background-color: #fd7e14 !important;
}

.fc-event.importancia-baja .event-type-badge,
.fc-event.imp-baja .event-type-badge {
    background-color: #28a745 !important;
}

.fc-event.importancia-normal .event-type-badge,
.fc-event.imp-normal .event-type-badge {
    background-color: #0082BB !important;
}

/* Forzar overflow visible en contenedores */
.fc-event,
.fc-daygrid-event,
.fc-timegrid-event,
.fc-h-event,
.fc-v-event,
.fc-event-main,
.fc-event-main-frame {
    overflow: visible !important;
    position: relative !important;
}

.fc-event-main,
.fc-event-main-frame {
    padding-right: 26px !important;
    overflow: visible !important;
}

/* ===== TABS DE TRIMESTRE - MINIMALISTA CORPORATIVO ===== */
#trimestreTabs {
    border-bottom: 2px solid #e8e8e8;
}

#trimestreTabs .nav-link {
    color: #ffffff;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    transition: all 0.2s ease;
    padding: 1rem 1.5rem;
    font-weight: 500;
    background: transparent;
}

#trimestreTabs .nav-link:hover {
    color: #0082BB;
    border-bottom-color: rgba(0, 130, 187, 0.3);
    background: rgba(0, 130, 187, 0.03);
}

#trimestreTabs .nav-link.active {
    color: #ffffff !important;
    border-bottom-color: #009BD5 !important;
    font-weight: 600;
    background: rgba(0, 130, 187, 0.05) ;
}

/* Contador minimalista junto al texto del trimestre */
#trimestreTabs .contador-trimestre {
    background: none !important;
    color: #009BD5 !important;
    border: none !important;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0;
    margin-left: 0.25rem;
    vertical-align: middle;
    box-shadow: none !important;
}

/* Inputs de fecha corporativos */
#filtroFechaInicio,
#filtroFechaFin {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#filtroFechaInicio:focus,
#filtroFechaFin:focus {
    border-color: #0082BB;
    box-shadow: 0 0 0 0.2rem rgba(0, 130, 187, 0.1);
}

/* Botón filtrar corporativo */
button[onclick="aplicarFiltros()"] {
    background: #0082BB;
    border: 0;
    border-radius: 4px;
    transition: all 0.2s ease;
}

button[onclick="aplicarFiltros()"]:hover {
    background: #009BD5;
    box-shadow: 0 2px 8px rgba(0, 130, 187, 0.25);
}

button[onclick="aplicarFiltros()"]:active {
    background: #006a99;
}

/* Selector de año */
#anioActual {
    min-width: 60px;
    text-align: center;
}

#contenedorFechas {
    display: none;
}

/* ========== RESPONSIVE VISTA ADMINISTRATIVA ========== */

/* Tablets y móviles grandes (hasta 992px) */
@media (max-width: 992px) {
    #trimestreTabs .nav-link {
        padding: 0.65rem 0.85rem !important;
        font-size: 0.9rem !important;
    }
    
    #trimestreTabs .nav-link i {
        font-size: 1rem !important;
    }
    
    #anioActual {
        min-width: 50px !important;
        font-size: 0.95rem !important;
    }
}

/* Móviles (hasta 768px) */
@media (max-width: 768px) {
    /* Header card más compacto */
    .cotizacion-header .card-body {
        padding: 0.75rem !important;
    }
    
    .cotizacion-header h1.card-title {
        font-size: 1.2rem !important;
    }
    
    /* Tabs más compactos en móvil */
    #trimestreTabs .nav-link {
        padding: 0.5rem 0.3rem !important;
        font-size: 0.85rem !important;
    }
    
    #trimestreTabs .nav-link i {
        display: none !important;
    }
    
    /* Selector de año compacto */
    #anioActual {
        min-width: 55px !important;
        font-size: 1rem !important;
    }
    
    /* Calendarios más pequeños */
    .fc-toolbar-title {
        font-size: 0.9rem !important;
    }
    
    .fc-daygrid-day-number {
        font-size: 0.7rem !important;
    }
    
    .fc-event {
        font-size: 0.65rem !important;
        padding: 2px 3px !important;
    }
    
    /* Cards de usuarios/clientes */
    .card-compact .card-header h5 {
        font-size: 0.9rem !important;
    }
    
    .card-compact .btn-sm {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.75rem !important;
    }
    
    .table-compact {
        font-size: 0.75rem !important;
    }
    
    .table-compact th,
    .table-compact td {
        padding: 0.3rem 0.2rem !important;
    }
    
    .btn-action {
        padding: 0.2rem 0.35rem !important;
        font-size: 0.7rem !important;
    }
}

/* Móviles pequeños (hasta 576px) */
@media (max-width: 576px) {
    .cotizacion-header .card-body {
        padding: 0.75rem !important;
    }
    
    .cotizacion-header h1.card-title {
        font-size: 1.1rem !important;
        margin-bottom: 0 !important;
    }
    
    #trimestreTabs .nav-link {
        padding: 0.4rem 0.15rem !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
    }
    
    .card-header .btn-sm {
        padding: 0.25rem 0.35rem !important;
        font-size: 0.75rem !important;
    }
    
    #anioActual {
        min-width: 45px !important;
        font-size: 0.9rem !important;
    }
    
    .form-check-label {
        font-size: 0.75rem !important;
    }
    
    .form-control-sm {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .fc-toolbar-title {
        font-size: 0.85rem !important;
    }
    
    .fc-daygrid-day-number {
        font-size: 0.65rem !important;
    }
    
    .fc-event {
        font-size: 0.65rem !important;
        padding: 1px 2px !important;
    }
    
    .table-compact {
        font-size: 0.7rem !important;
    }
    
    .table-compact th,
    .table-compact td {
        padding: 0.3rem 0.15rem !important;
    }
    
    .btn-action {
        padding: 0.15rem 0.25rem !important;
        font-size: 0.65rem !important;
    }
    
    .modal-dialog {
        margin: 0.25rem !important;
    }
    
    .modal-body {
        padding: 0.75rem !important;
    }
}

/* Modo landscape móvil */
@media (max-width: 896px) and (orientation: landscape) {
    .cotizacion-header .card-body {
        padding: 0.5rem !important;
    }
    
    .cotizacion-header h1 {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }
}

/* ===== ESTILOS PARA MODAL NUEVO EVENTO COMPACTO ===== */
.modal.NuevoEvento .modal-dialog {
    max-width: 35%;
    margin: 1rem auto;
}

.modal.NuevoEvento .modal-content {
    max-height: 55vh;
    overflow: hidden;
    border-radius: 0.5rem;
}

.modal.NuevoEvento .modal-header {
    padding: 0.5rem 0.75rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.modal.NuevoEvento .modal-title {
    font-size: 0.95rem;
}

.modal.NuevoEvento .modal-body {
    padding: 0.75rem;
    max-height: calc(55vh - 110px);
    overflow-y: auto;
    overflow-x: hidden;
}

.modal.NuevoEvento .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

.modal.NuevoEvento .form-control,
.modal.NuevoEvento .form-select {
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    height: auto;
    min-height: 32px;
}

.modal.NuevoEvento .input-group .btn {
    padding: 0.35rem 0.65rem;
}

.modal.NuevoEvento .alert {
    padding: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0;
}

.modal.NuevoEvento .modal-footer {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.modal.NuevoEvento .modal-footer .btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
}

/* Reducir espaciado entre filas del formulario */
.modal.NuevoEvento .row.g-1 {
    row-gap: 0.5rem !important;
}

/* Ajustes para iconos */
.modal.NuevoEvento .bi {
    font-size: 0.9rem;
}

/* Dropdown del cliente compacto */
.modal.NuevoEvento #eventoClienteDropdownMenu {
    max-height: 180px;
    overflow-y: auto;
    min-width: 300px;
}

/* Ajustar datalist oculto */
.modal.NuevoEvento datalist {
    display: none;
}

/* ===== RESPONSIVE MODAL NUEVO EVENTO ===== */

/* Tablets y pantallas medianas */
@media (max-width: 992px) {
    .modal.NuevoEvento .modal-dialog {
        max-width: 70%;
    }
}

/* Tablets pequeñas */
@media (max-width: 768px) {
    .modal.NuevoEvento .modal-dialog {
        max-width: 85%;
        margin: 0.5rem;
    }
    
    .modal.NuevoEvento .modal-content {
        max-height: 90vh;
    }
    
    .modal.NuevoEvento .modal-body {
        max-height: calc(90vh - 110px);
        padding: 0.65rem;
    }
    
    .modal.NuevoEvento .form-label {
        font-size: 0.8rem;
    }
    
    .modal.NuevoEvento .form-control,
    .modal.NuevoEvento .form-select {
        font-size: 0.8rem;
        padding: 0.3rem 0.45rem;
    }
}

/* Móviles */
@media (max-width: 576px) {
    .modal.NuevoEvento .modal-dialog {
        max-width: 95%;
        margin: 0.25rem;
    }
    
    .modal.NuevoEvento .modal-content {
        max-height: 95vh;
    }
    
    .modal.NuevoEvento .modal-header {
        padding: 0.4rem 0.6rem;
    }
    
    .modal.NuevoEvento .modal-title {
        font-size: 0.85rem;
    }
    
    .modal.NuevoEvento .modal-body {
        max-height: calc(95vh - 100px);
        padding: 0.5rem;
    }
    
    .modal.NuevoEvento .form-label {
        font-size: 0.75rem;
        margin-bottom: 0.15rem;
    }
    
    .modal.NuevoEvento .form-control,
    .modal.NuevoEvento .form-select {
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
        min-height: 30px;
    }
    
    .modal.NuevoEvento .input-group .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .modal.NuevoEvento .modal-footer {
        padding: 0.4rem 0.6rem;
        flex-direction: column;
        gap: 0.35rem;
    }
    
    .modal.NuevoEvento .modal-footer .btn {
        width: 100%;
        padding: 0.4rem;
        font-size: 0.8rem;
    }
    
    .modal.NuevoEvento .bi {
        font-size: 0.85rem;
    }
    
    .modal.NuevoEvento .row.g-1 {
        row-gap: 0.4rem !important;
    }
    
    /* Hacer campos de fecha en columna completa en móvil */
    .modal.NuevoEvento .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .modal.NuevoEvento #eventoClienteDropdownMenu {
        max-height: 150px;
        min-width: 100%;
    }
}

/* Móviles pequeños */
@media (max-width: 400px) {
    .modal.NuevoEvento .modal-dialog {
        margin: 0.15rem;
    }
    
    .modal.NuevoEvento .modal-title {
        font-size: 0.8rem;
    }
    
    .modal.NuevoEvento .form-label {
        font-size: 0.7rem;
    }
    
    .modal.NuevoEvento .form-control,
    .modal.NuevoEvento .form-select {
        font-size: 0.7rem;
    }
}