﻿/* =========================================================
   MÓDULO UI - ESTILOS DE FORMULARIOS Y PANELES
   Ubicación: /assets/css/globales/UI/forms.css
   ========================================================= */

/* --- 1. TARJETAS DE ENCABEZADO (Bordes Semánticos) --- */
/* Usados para resaltar la cabecera del formulario */
.border-left-primary {
    border-left: 4px solid #4e73df !important;
}

.border-left-success {
    border-left: 4px solid #1cc88a !important;
}

.border-left-info {
    border-left: 4px solid #36b9cc !important;
}

.border-left-warning {
    border-left: 4px solid #f6c23e !important;
}

.border-left-danger {
    border-left: 4px solid #e74a3b !important;
}

/* --- 2. PESTAÑAS PERSONALIZADAS (Nav Tabs Custom) --- */
/* Estilo limpio para separar secciones del formulario */
.nav-tabs-custom .nav-link {
    color: #6c757d;
    cursor: pointer;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

    .nav-tabs-custom .nav-link.active {
        color: #4e73df;
        background-color: transparent;
        border-bottom: 3px solid #4e73df; /* Línea inferior en vez de caja */
    }

    .nav-tabs-custom .nav-link:hover:not(.active) {
        color: #4e73df;
        background-color: #f8f9fc;
    }

/* Ajuste para el contenedor del contenido de las pestañas */
.tab-content {
    min-height: 400px;
    padding-top: 20px;
    position: relative; /* Para loaders absolutos */
}

/* --- 3. INPUTS Y GRUPOS --- */
/* Ajuste para inputs que parecen solo texto (readonly visual) */
.form-control-plaintext {
    font-weight: bold;
    color: #5a5c69;
}

/* Ajuste para líneas divisorias verticales en cabeceras */
.border-left-divider {
    border-left: 1px solid #e3e6f0;
    height: 35px;
    margin: 0 15px;
}

/* --- 4. BOTONES ESPECÍFICOS DE FORMULARIO --- */
.btn-close-custom {
    font-size: 0.7rem;
    margin-left: 10px;
}

/* Botones redondos pequeños (para filtros o acciones rápidas) */
.btn-round {
    border-radius: 50%;
    width: 38px;
    height: 38px;
    padding: 0;
    line-height: 38px;
    text-align: center;
}
