/* ==========================================================================
   KUMARA - MODALES COMPARTIDOS (Estilo Lateral + Brand Color)
   ========================================================================== */

.km-modern-modal .modal-content {
    min-height: 70vh;
    background-color: #ffffff;
}

/* Botón flotante */
.km-btn-close-floating {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1055;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0.8;
    border-radius: 50%;
    padding: 10px;
    transition: all 0.2s ease;
}

.km-btn-close-floating:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ---------------------------------------------------
   PANEL LATERAL (Aquí inyectamos tu color)
   --------------------------------------------------- */
.km-modal-sidebar {
    /* Tu color exacto con transparencia para un fondo suave */
    background-color: rgba(193, 103, 74, 0.08) !important;
    border-right: 1px solid rgba(193, 103, 74, 0.15);
}

/* Estilos de las pestañas (Inactivas) */
.km-nav-pills .nav-link {
    color: #665b58;
    /* Un gris cálido para combinar con el fondo */
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 6px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    background: transparent;
}

.km-nav-pills .nav-link:hover {
    background-color: rgba(193, 103, 74, 0.15);
    /* Hover ligeramente más oscuro */
    color: #111;
}

/* Estado Activo de la Pestaña */
.km-nav-pills .nav-link.active {
    /* Fondo blanco para conectar visualmente con el panel derecho */
    background-color: #ffffff !important;
    color: #111 !important;
    font-weight: 700;
    /* Línea indicadora con tu color sólido (rgb 193, 103, 74) */
    border-left: 3px solid #C1674A;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.02);
}

/* ---------------------------------------------------
   ÁREA DE CONTENIDO (Con Scroll Garantizado)
   --------------------------------------------------- */
.km-modal-content-area {
    /* Forzamos que este contenedor maneje el scroll interno */
    overflow-y: auto;
    /* Altura máxima para evitar que el modal crezca infinitamente */
    max-height: 70vh;
    /* Scroll fluido en dispositivos móviles/Mac */
    -webkit-overflow-scrolling: touch;
}

/* Opcional: Estilizar la barra de scroll para que luzca premium */
.km-modal-content-area::-webkit-scrollbar {
    width: 6px;
}

.km-modal-content-area::-webkit-scrollbar-track {
    background: transparent;
}

.km-modal-content-area::-webkit-scrollbar-thumb {
    background-color: rgba(193, 103, 74, 0.3);
    /* Tu color brand semi-transparente */
    border-radius: 10px;
}

.km-modal-content-area::-webkit-scrollbar-thumb:hover {
    background-color: rgba(193, 103, 74, 0.7);
    /* Más oscuro al pasar el mouse */
}

.km-legal-text {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
}

.km-legal-text p {
    margin-bottom: 1.5rem;
}

.km-legal-text strong {
    color: #111;
    font-weight: 700;
}

/* ---------------------------------------------------
   RESPONSIVE (Móviles)
   --------------------------------------------------- */
@media (max-width: 767.98px) {
    .km-modern-modal .row.g-0 {
        flex-direction: column;
    }

    .km-modal-sidebar {
        border-right: none !important;
        border-bottom: 1px solid rgba(193, 103, 74, 0.15);
        padding-bottom: 0 !important;
    }

    .km-nav-pills {
        display: flex;
        flex-direction: row !important;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .km-nav-pills .nav-link {
        margin-bottom: 0;
        margin-right: 10px;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: 6px 6px 0 0;
    }

    /* En móvil, la línea indicadora pasa abajo */
    .km-nav-pills .nav-link.active {
        border-left: none;
        border-bottom: 3px solid #C1674A;
        background-color: transparent !important;
    }

    .km-btn-close-floating {
        top: 10px;
        right: 10px;
    }
}

/* ---------------------------------------------------
   SISTEMA DE INYECCIÓN DE TEXTO ANTI-FORMATTER
   --------------------------------------------------- */
.km-navbar-username::after {
    content: attr(data-username);
}