/**
 * Estilos globales para checkboxes - CRIDEZ Portal
 * 
 * Aplicación del color corporativo #f39c12 (naranja) a todos los checkboxes
 * de la aplicación para mantener consistencia visual
 * 
 * Funcionalidades:
 * - Color corporativo en checkboxes marcados
 * - Sobreescribe estilos de AdminLTE y Bootstrap
 * - Efectos hover y focus consistentes
 * - Compatible con formularios modales y páginas
 * 
 * Uso: Incluir en config/adminlte.php en la sección 'css'
 */

/* === CHECKBOXES CORPORATIVOS CRIDEZ === */

/* Propiedad moderna para color de accent */
.form-check-input {
    accent-color: #f39c12 !important;
}

/* Color cuando está marcado - Sobreescribir AdminLTE/Bootstrap */
.form-check-input:checked {
    background-color: #f39c12 !important;
    border-color: #f39c12 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* Estado focus - Color corporativo */
.form-check-input:focus {
    border-color: #f39c12 !important;
    box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.25) !important;
}

/* Hover en checkbox */
.form-check-input:hover {
    border-color: #f39c12 !important;
}

/* Anular colores azules/celestes de frameworks */
.form-check-input:not(:checked):not(:indeterminate):hover {
    border-color: #f39c12 !important;
}

/* === MEJORAS UX PARA LABELS CLICKEABLES === */

/* Labels clickeables con hover sutil */
.clickable-label {
    cursor: pointer !important;
    user-select: none;
    transition: color 0.2s ease;
}

.clickable-label:hover {
    color: #f39c12 !important;
}

/* === ESPACIADO PARA MODALES === */

/* Estilos de .row para mejorar espaciado */
.modal .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -7.5px;
    margin-left: -7.5px;
}

/* Columnas en modales */
.modal .col-md-4 {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

/* Espaciado original de AdminLTE - Solo cambiar color, mantener espaciado */
.modal .form-check {
    /* NO modificar padding ni margin - usar valores originales de AdminLTE */
    position: relative;
    display: block;
    padding-left: 1.25rem; /* Valor original de AdminLTE */
    margin-bottom: 0rem; /* Reducido aún más el espaciado vertical */
}

.modal .form-check:hover {
    background-color: transparent;
}

/* Espaciado general de modal-body */
.modal .modal-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.5rem !important;
}

/* === COMPATIBILIDAD CON DIFERENTES CONTEXTOS === */

/* Mantener estilos originales de AdminLTE - Solo cambiar colores */
.form-check {
    /* Usar valores originales de AdminLTE */
    position: relative;
    display: block;
    padding-left: 1.25rem;
    /* El margin-bottom viene del .form-group (1rem por defecto) */
}

/* Si queremos reducir solo verticalmente manteniendo todo lo demás igual */
.form-group .form-check {
    margin-bottom: 0.3rem; /* Reducir más el espaciado vertical - de 0.5rem a 0.3rem */
}

/* Checkboxes en DataTables */
.dataTables_wrapper .form-check-input:checked {
    background-color: #f39c12 !important;
    border-color: #f39c12 !important;
}

/* Checkboxes en cards */
.card .form-check-input:checked {
    background-color: #f39c12 !important;
    border-color: #f39c12 !important;
}

/* Checkboxes en formularios normales */
.form-group .form-check-input:checked,
.input-group .form-check-input:checked {
    background-color: #f39c12 !important;
    border-color: #f39c12 !important;
}