/* status  */

/* Ocultar divider en menu lateral */
.nav.child_menu li.divider {
    display: none;
}

.status-sector {
    border-radius: 5px;
    padding: 4px 17px;
    white-space: nowrap;
}
.status-abierto {
    background-color: #00FF00;
    color: #000;
    opacity: 0.8;
}

.status-cerrado {
    background-color: #b10202;
    color: #fff;
    opacity: 0.9;
}

.status-item-buttom {
    border-radius: 5px;
    padding: 9px 30px;
    white-space: nowrap;
    border: 0px;
    width: 100%;
}
hr {    
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--c-5);
    margin: 1em 0;
    padding: 0;
  }
  
.excerpt {line-height: 2;}

.absolute {position: absolute;}
.z-1 {z-index: 1;}

.msj_atencion {
    background-color: var(--c-7);
    border-radius: 5px;
    color: var(--c-1);
    padding: 5px 30px;
    font-size: 15px;
}

.act {
    border-radius: 5px;
    padding: 2px 7px 2px 16px;
    color: white;
    font-size: 12px;
    min-width: 65px;
    text-align: right;
    margin-bottom: 6px;
    
}

.act_green {
    background-color: green;
    color: wheat;
 }

.act_yellow {
    background-color: yellow;
    color: black;
}

.act_red {
    background-color: red;
    color: white;
}

.btn-table-abierto {
    color: black;
    text-decoration: none;
    background-color: #00FF00 !important;
    padding: 3px 10px !important;
    border-radius: 4px;
    min-width: 38px;
    text-align: right;
  }

.btn-table-cerrado {
    color: white;
    text-decoration: none;
    background-color: #b10202 !important;
    padding: 3px 10px !important;
    border-radius: 4px;
    min-width: 38px;
    text-align: right;
  }

 .btn-table-cerrado:hover { color: var(--c-6); }
 .btn-table-abierto:hover { color: #000; }

/* =================================
   JQUERY VALIDATE - SELECT2 FIX
   ================================= */

/* Estilos para mensajes de error de validación */
.error, label.error, span.error {
    color: #e74c3c !important;
    font-size: 12px !important;
    margin-top: 5px !important;
    display: block !important;
    font-weight: normal !important;
}

/* Asegurar que los mensajes de error de Select2 se posicionen correctamente */
.select2-container + .error,
.select2-container + label.error,
.select2-container + span.error {
    margin-top: 5px !important;
}

/* Espaciado adicional para campos con Select2 */
.form-group .select2-container {
    width: 100% !important;
}

/* Asegurar que los errores no interfieran con el diseño */
.form-group {
    margin-bottom: 20px;
    position: relative;
}

/* Estilo para errores en campos de fecha con datepicker */
.datespicker + .error,
.datespicker + label.error,
.datespicker + span.error {
    margin-top: 5px !important;
}

/* Estilos para campos con error */
.error-input {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25) !important;
}

/* Estilos para Select2 con error */
.error-select2 .select2-selection {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25) !important;
}

/* =================================
   TÍTULOS DE SECCIÓN CORPORATIVOS
   ================================= */

/* Títulos de sección con estilo corporativo Valle de Las Leñas */
.section-title {
    background-color: #f5f5f5;
    padding: 16px 12px;
    margin: 0 0 15px 0;
    border-left: 4px solid #007bff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    color: #333333;
}

.section-title i {
    margin-right: 8px;
    color: #007bff;
}

/* Separador de sección opcional */
.section-separator {
    border-top: 2px solid #E6E9ED;
    margin: 15px 0;
}

/* Estilo alternativo para títulos más grandes */
.section-title-lg {
    background-color: #f5f5f5;
    padding: 12px 16px;
    margin: 0 0 20px 0;
    border-left: 6px solid #007bff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 0 6px 6px 0;
    color: #333333;
}

.section-title-lg i {
    margin-right: 10px;
    color: #007bff;
}

/* =================================
   MEJORAS ESPECÍFICAS PARA MODALES
   ================================= */

/* Estilo para contenido de explosivos que puede ser ancho */
.explosivo-item {
    min-width: 600px; /* Asegurar ancho mínimo para el contenido */
}

/* Mejorar los botones de agregar/eliminar explosivos */
.explosivo-item .btn {
    white-space: nowrap;
    min-width: auto;
}

/* Asegurar que los labels no se corten */
.modal-body .control-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

/* Mejorar el espaciado de los campos requeridos */
.modal-body .required {
    color: #e74c3c;
}

/* Mejorar la visualización de mensajes de ayuda */
.modal-body .form-text {
    font-size: 12px;
    margin-top: 3px;
    color: #6c757d;
}

/* Asegurar que las secciones dentro de modales se vean bien */
.modal-body .section-title {
    margin: 20px 0 15px 0;
    padding: 12px;
    font-size: 14px;
}

.modal-body .section-title:first-child {
    margin-top: 0;
}

/* Mejorar la apariencia de los paneles dentro de modales */
.modal-body .x_panel {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #fafafa;
}

/* Asegurar que el contenido ancho sea scrolleable horizontalmente - Solo cuando el modal esté abierto */
.modal.show .modal-body-wide {
    overflow-x: auto;
    max-width: 100%;
}

/* Indicador visual para scroll horizontal */
.modal-body-wide::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.modal-body-wide::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal-body-wide::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.modal-body-wide::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Mejorar la responsividad de elementos en modales */
@media (max-width: 768px) {
    .explosivo-item {
        min-width: auto;
        flex-direction: column;
    }
    
    .explosivo-item .col-md-5,
    .explosivo-item .col-md-4,
    .explosivo-item .col-md-3 {
        width: 100%;
        margin-bottom: 15px;
        padding-left: 0;
        padding-right: 0;
    }
    
    .modal-body .section-title {
        font-size: 13px;
        padding: 10px;
    }
}