:root {
    --blue-plecsys: #004aad;
    --blue-plecsys-light: #dcebf5;
    --cf-navy: #3f4a62; /* reemplaza negro */
    --cf-blue-900: #0A2540;
    --cf-blue-800: #0D3B66;
    --cf-blue-700: #155B9A;
    --cf-blue-600: #1E74C6;
    --cf-blue-500: #2A8AE0;
    --cf-blue-200: #CFE7FF;
    --cf-blue-100: #EAF4FF;
    --cf-cream-50: #fffff9; /* fondo general, body */
    --cf-cream-100: #fffef2; /* cards, paneles */
    --cf-cream-150: #fffce6; /* secciones suaves */
    --cf-cream-200: #fff9d9; /* hover ligero */
    /* CREMA NEUTRO */
    --cf-cream-300: #f5f1dc; /* bordes suaves */
    --cf-cream-400: #e8e3c9; /* separadores */
    --cf-cream-500: #d8d1b2; /* líneas fuertes */
    /* CREMA OSCURO (acento sutil) */
    --cf-cream-600: #bfb58f; /* headers secundarios */
    --cf-cream-700: #a69a6d; /* títulos suaves */
    --cf-cream-800: #7f744f; /* texto destacado */
    --cf-border: #D7E7F8;
    --cf-text: #0B1F3B;
    --cf-muted: #5C7290;
    --cf-bg: #F6FAFF;
    --cf-white: #FFFFFF;
    --cf-success-bg: #0d3066; /* total rows look */
    --cf-success-text: #FFFFFF;
    --cf-danger-bg: #2e347d;
    --cf-shadow: 0 10px 30px rgba(11,31,59,.10);
    /* >>> FIX: columnas fijas para alinear tabla principal + inner table */
    --cf-col-name: 260px;
    --cf-col-type: 120px;
    --cf-month-cols: 12;
    --cf-col-month: calc((100% - var(--cf-col-name) - var(--cf-col-type)) / var(--cf-month-cols));
}

.text-blue-plecsys {
    color: var(--blue-plecsys);
    padding-left: 8px;
    border-left: 4px solid var(--blue-plecsys-light);
}
.bg-c-orange{
    background-color: #ff8500;
}

.bg-c-blue-light {
    background-color: var(--cf-blue-600);
}

.btn.btn-plecsys-bi {
    position: relative;
    border-radius: 0px;
}
th.text-end,
td.text-end {
    text-align: right !important;
}

.index-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 2px 14px 2px;
}

.index-header-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--cf-navy);
    letter-spacing: 4px;
}

.index-header-subtitle {
    font-size: 12px;
    color: var(--cf-muted);
    letter-spacing: 0.6px;
}

.btn.btn-plecsys-bi-active {
    position: relative;
    border-radius: 0px;
    border-bottom: 1px solid green;
}


.div text-box-plecsys-01 {
    border-bottom: 2px solid blue;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
}

.title-table {
    font-size: 16px;
    font-weight: 900;
    color: var(--cf-navy);
    letter-spacing: 2px;
    margin-left: -3px;
}

.tablePlecsys {
    color: #333;
    text-align: left;
    width: 100%;
    border-radius: 2px;
    position: relative;
}



    .tablePlecsys thead {
        position: sticky;
        top: 0;
        background: linear-gradient(90deg, var(--cf-navy), #0b255c) !important;
        z-index: 30;
    }
        .tablePlecsys thead::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            background: gray;
        }

        .tablePlecsys thead th {
            color: #c7c7c7;
            position: relative;
            font-weight: bolder;
            text-transform: uppercase;
            font-size: 11px;
            top: 0px;
            padding: 10px;
            box-shadow: -1px -0px 1px rgba(255,255,255,0.8), 1px 3px 1px rgba(0,0,0,0.25);
        }

            .tablePlecsys thead th:first-child {
                background-color: #182133 !important;
                border-left: 1px solid black;
            }

            .tablePlecsys thead th.latest {
                border-right: 1px solid;
                background-color: #031a4b !important;
            }

                .tablePlecsys thead th.latest ~ th {
                    background-color: #ffffff !important;  
              
                }

    .tablePlecsys tbody tr:nth-child(even) td.latest {
        background-color: #deeafe !important;
    }
    .tablePlecsys tbody tr:nth-child(odd) td.latest {
        background-color: #deeafe !important;
    }
            .tablePlecsys tbody td.latest ~ td {
                background-color: #f2f2f2 !important;
                z-index:30;
            }



    .tablePlecsys tbody tr:hover td.latest ~ td {
        display: table-cell;
    }

    .tablePlecsys th {
        color: black;
        font-size: 8px;
        font-weight: bold;
        letter-spacing: 1px;
     
        height: 10px;
        position: relative;
        padding-right: 18px;  
        white-space: nowrap;
    }

        .tablePlecsys th label {
            position: relative;
            padding-left: 10px !important;
            user-select: none;
            -webkit-user-select: none; /* Chrome / Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE/Edge antiguo */
        }

    .tablePlecsys tr:nth-child(even) td {
        background-color: #fff;
    }

    .tablePlecsys td {
         
        border-bottom: 1px solid #d6d6d6;
        border-top: 0px solid #d6d6d6;
    }

    .tablePlecsys tbody td:first-child {
        background-color: #deeeff7f !important;
        border: none !important;
        border-bottom: 1px solid #d6d6d6 !important;
        font-weight: bolder;
        border-left: 1px solid black !important;
    }


    /* Aclarar toda la fila cuando el mouse está sobre ella */
    .tablePlecsys tbody tr:hover td {
        background-color: #f3f6fa;
        transition: background-color 0.15s ease;
    }

    /* Hundir solo la celda bajo el mouse */
    .tablePlecsys tbody td:hover {
        background-color: #e2e8f0 !important;
        box-shadow: inset 2px 2px 4px rgba(0,0,0,0.28), inset -2px -2px 3px rgba(255,255,255,0.7);
        border: none !important;

    }

    .tablePlecsys tbody tr:hover td:first-child {
        box-shadow: inset 4px 0 0 #041a4b !important;
        font-size: 12px;
    }


    .tablePlecsys td {
        font-size: 10px;
        background-color: #fff;
        white-space: nowrap;
        padding: 8px;
        font-weight: bold;
 
    }

    /* ▲ ASCENDENTE */
    .tablePlecsys th.sorted-asc::before {
        content: "▲";
        position: absolute;
        left: 2px; /* triángulo a la izquierda del título */
        top: 6px; /* ALINEADO con el texto, no con el filtro */
        font-size: 9px;
        color: #041a4b;
    }

    /* ▼ DESCENDENTE */
    .tablePlecsys th.sorted-desc::before {
        content: "▼";
        position: absolute;
        left: 2px;
        top: 6px;
        font-size: 9px;
        color: #041a4b;
    }


/*  TABLE PLECSYS INTERNAL*/

.tablePlecsys-100 thead {
    position: sticky;
    top: 0;
    background: linear-gradient(90deg, var(--cf-cream-100), var(--cf-cream-400));
    z-index: 30;
}
    .tablePlecsys-100 thead::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1.5px;
        background: #888;
    }

        .tablePlecsys-100 thead th {
            color: #041a4b;
            position: relative;
            font-weight: bolder;
            text-transform: uppercase;
            font-size: 11px;
            top: 0px;
            padding: 10px;
            box-shadow: -1px -0px 1px rgba(255,255,255,0.8), 1px 3px 1px rgba(0,0,0,0.25);
        }

            .tablePlecsys-100 thead th:first-child {
                background-color: var(--cf-cream-300) !important;
                border-left: 1px solid var(--cf-cream-300);
            }

            .tablePlecsys-100 thead th.latest {
                border-right: 1px solid;
                background-color: var(--cf-cream-500) !important;
            }

                .tablePlecsys-100 thead th.latest ~ th {
                    background-color: #ffffff !important;
                }

.tablePlecsys-100 tbody tr:nth-child(even) td.latest {
    background-color: #deeafe !important;
}
.tablePlecsys-100 tbody tr:nth-child(odd) td.latest {
    background-color: #deeafe !important;
}
.tablePlecsys-100 tbody td.latest ~ td {
    background-color: #f2f2f2 !important;
    z-index: 30;
}



.tablePlecsys-100 tbody tr:hover td.latest ~ td {
    display: table-cell;
}

.tablePlecsys-100 th {
    color: black;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    height: 10px;
    position: relative;
    padding-right: 18px;
    white-space: nowrap;
}

    .tablePlecsys-100 th label {
        position: relative;
        padding-left: 10px !important;
        user-select: none;
        -webkit-user-select: none; /* Chrome / Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE/Edge antiguo */
    }

.tablePlecsys-100 tr:nth-child(even) td {
    background-color: #fff;
}

.tablePlecsys-100 td {
    border-bottom: 1px solid #d6d6d6;
    border-top: 0px solid #d6d6d6;
}

.tablePlecsys-100 tbody td:first-child {
    background-color: var(--cf-cream-100) !important;
    border: none !important;
    border-bottom: 1px solid #d6d6d6 !important;
    font-weight: bolder;
    border-left: 1px solid var(--cf-cream-300) !important;
}


    /* Aclarar toda la fila cuando el mouse está sobre ella */
.tablePlecsys-100 tbody tr:hover td {
    background-color: #f3f6fa;
    transition: background-color 0.15s ease;
}

    /* Hundir solo la celda bajo el mouse */
.tablePlecsys-100 tbody td:hover {
    background-color: #e2e8f0 !important;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.28), inset -2px -2px 3px rgba(255,255,255,0.7);
    border: none !important;
}

.tablePlecsys-100 tbody tr:hover td:first-child {
    box-shadow: inset 4px 0 0 #041a4b !important;
    font-size: 12px;
}


.tablePlecsys-100 td {
    font-size: 10px;
    background-color: #fff;
    white-space: nowrap;
    padding: 10px;
    font-weight: bold;
}

    /* ▲ ASCENDENTE */
.tablePlecsys-100 th.sorted-asc::before {
    content: "▲";
    position: absolute;
    left: 2px; /* triángulo a la izquierda del título */
    top: 6px; /* ALINEADO con el texto, no con el filtro */
    font-size: 9px;
    color: #041a4b;
}

    /* ▼ DESCENDENTE */
.tablePlecsys-100 th.sorted-desc::before {
    content: "▼";
    position: absolute;
    left: 2px;
    top: 6px;
    font-size: 9px;
    color: #041a4b;
}




/* Estilo general de la tabla */
.tablePlecsysDetails {
    width: 100%;
    border-collapse: collapse;
}

    .tablePlecsysDetails th, .tablePlecsysDetails td {
        padding: 2px;
        border: 1px solid #ddd;
    }

    /*Estilo de encabezados*/
    .tablePlecsysDetails th {
        text-align: center;
        position: relative;
    }

/* Línea divisoria entre encabezado y filtros */
.header-divider {
    border-top: 1px solid #ddd;
    margin-top: 5px;
}

/* Estilo de los filtros */
.filter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

.filter-operator {
    width: 35px;
    margin-right: 5px;
}

hr {
    border: none;
    height: 1px;
    background: linear-gradient( 90deg, #2451cc, #d7d6d6 );
}

.filter-input {
    width: 100%;
    padding: 4px 6px;
    background: #ffffff; /* un tono gris más oscuro */
    border: none;
    border-radius: 0;
    /* BORDES INVERTIDOS → efecto elevado */
    box-shadow: inset -1px -1px 0px #bdbdbd, /* sombra interna superior (oscura) */
    inset 1px 2px 0px #fafafa, /* brillo interno inferior (claro) */
    -1px -1px 0px #767575, /* borde superior/izquierdo oscuro */
    1px 1px 0px #e6e6e6; /* borde inferior/derecho claro */

    font-size: 0.85rem;
    transition: all 0.15s ease-in-out;
}

    /* Efecto de foco → más profundidad y oscurecimiento */
    .filter-input:focus {
        outline: none;
        background: #fffcda;
        box-shadow: inset -1px -1px 1px #bdbdbd, /* relieve interno superior invertido */
        inset 1px 1px 1px #fafafa, /* relieve interno inferior claro */
        -1px -1px 0px #2b2b2b, /* borde superior/izquierdo mucho más oscuro */
        1px 1px 0px #e6e6e6; /* borde inferior/derecho más claro */
    }




.searchWrapper {
    position: fixed;
    left: 0;
    width: 100%;
    background: white;
    z-index: 999;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
}

.accordionPlecsys {
    position: relative;
    color: blue;
    cursor: pointer;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 12px;
    padding: 8px 24px;
}

    .accordionPlecsys::after {
        content: "";
        position: absolute;
        left: 16px; /* respeta padding izquierdo */
        right: 24px; /* respeta padding derecho */
        bottom: 0;
        height: 2px;
        background-color: #004aad;
    }

    .active, .accordionPlecsys:hover {
        background-color: #ffffff !important;
    }

#filterButtonId {
    float: right; /* se alinea a la derecha */
    height: 25px; /* altura adecuada */
    padding: 0 18px; /* espacio interno */
    line-height: 25px; /* centra el texto vertical */
    border: none; /* sin bordes */
    color: #fff; /* texto blanco */
    font-size: 11px;
    font-weight:900;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25); /* sombra elegante */
    border-radius: 0 !important; /* NO será redondo */
    display: flex; /* para centrar icono + texto */
    align-items: center; /* centrado vertical */
    gap: 6px; /* espacio entre icono y texto */
    border-left: 10px solid #afcfef;
}

    #filterButtonId:hover {
        background-color: #0069d9;
        border-left: 10px solid #93f28f;
    }

.accordionSmartFlowRow {
    font-size: 10px;
    background-color: #e9eef4;
    white-space: nowrap;
    padding: 10px;
    font-weight: bold;
    border-right: 1px solid var(--windows-color_bluegray_darkest);
}

.accordionTdSmartFlow {
    border-bottom: none !important;
    border-top: none !important;
    border-right: none !important;
    border-collapse: unset !important;
    background-color: #e9eef4 !important
}

.accordionTdSmartFlowChild td {
    background-color: #fff !important;
}

.active, .accordionPlecsysSmartFlow:hover {
    background-color: #ccc;
}




.panelPlecsys {
    display: none;
    background-color: white;
}


.form-check-input-plecsys {
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.AceptInvoice-box {
    margin: 20px;
    padding: 50px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    font-size: 16px;
    line-height: 24px;
    color: #555;
}



.tab-content-plecsys {
    padding: 35px 30px;
    background: #d6d6d6;
    -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
}


.card-plecsys {
    color: black;
    padding: 5%;
    height: 120px;
    border-radius: 5px;
    border-color: red;
    box-shadow: 0 1px 5px 0 #888;
    background-color: #fff;
    margin-bottom: 30px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    margin-left: 25px;
}

.card-plecsys-location {
    color: black;
    padding: 5%;
    height: 200px;
    border-radius: 5px;
    border-color: red;
    box-shadow: 0 1px 5px 0 #888;
    background-color: #fff;
    margin-bottom: 30px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    margin-left: 25px;
}

.select2-plecsys-container {
    width: 90% !important;

}

.select2-plecsys-container-ThirdCharge_id {
    width: 90% !important;
}

.row-plecsys {
    border-bottom: solid;
    border-width: 1px;
    border-color: lightgray;
    background-color: #fff;
    padding: 1%;
}

.row-plecsys-inline {
    display: flex;
    flex-wrap: wrap;
    padding: 2px;
}


.btn-plecsys {
    padding-top: 2px;
    box-shadow: 3px 2px 2px #d6d6d6;
}

.label-plecsys {
    padding: 2px;
    box-shadow: 3px 2px 2px #d6d6d6;
}

.label-plecsys_right {
    font-size: 15px;
}

.modal_client {
    width: 95%;
}

.form-plecsys {
    width: 100%;
    border-bottom: 1px solid gray;
    border-top: 0px solid black;
    border-right: 0px solid gray;
    border-left: 0px solid gray;
    border-radius: 2px;
    background-color: #f1f1f1;
    height: 30px;
    padding: 2px;
    /* box-shadow: 5px 2px 2px #888888;*/
}





.label-plecsys_delete {
    border: none;
    color: red;
    background: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}

    .label-plecsys_delete:hover {
        box-shadow: 1px 2px 2px #888;
    }

.label-plecsys_edit {
    border: none;
    color: #ff6a00;
    background: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}

    .label-plecsys_edit:hover {
        box-shadow: 1px 2px 2px #888;
    }


/**  =====================
      WORKFLOW VIEW
==========================  **/

.timeline {
    list-style: none;
    padding: 20px 0;
    padding-top: 30px;
    position: relative;
}

    .timeline:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 55%;
        width: 2px;
        background-color: #343a40;
        transform: translateX(-50%);
    }

.timeline-item {
    margin-bottom: 24px;
    position: relative;
}

.timeline-badge {
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    width: 65px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    position: absolute;
    top: -5px;
    left: 10px;
    border-radius: 4px;
}

.timeline-date {
    color: #fff;
    font-size: 0.8em;
    background-color: #343a40;
    border-radius: 20px;
    padding: 5px 10px;
    position: absolute;
    top: 0;
    right: 10px;
}

.timeline-counter {
    color: black;
    font-size: 0.8em;
    background-color: #edf3f3;
    border-radius: 20px;
    padding: 5px;
    position: center;
    top: -10px;
    right: -20px;
    text-align: center;
    border-style: dotted;
    border-width: 0.5px;
    border-color: gray;
}

.timeline-panel {
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 0.25em;
    padding: 20px;
    margin-left: 50px;
}

.form-height {
    height: 130vh !important;
}

.form-container {
    margin-top: 70px !important;
    padding: 20px !important;
}

.form-container-menu {
    margin-top: 120px !important;
    padding: 20px !important;
}

.form-container-menu-list {
    margin-top: 120px !important;
    padding: 20px !important;
}

.navbar {
    background-color: #031a4b !important;
    height: 50px;
    box-shadow: 2px 2px 20px gray;
    font-size: 14px !important;
    border-color: white;
    border-bottom-width: 1px;
    border-bottom-style:solid;
}

@media (max-width: 991.98px) {
    .navbar {
        height: auto; /* Anula el height fijo, permitiendo que el contenido determine la altura */
        min-height: 50px; /* Opcional: Asegura una altura mínima si lo necesitas */
        /* Si solo quieres eliminar el height fijo, solo necesitas la línea 'height: auto;' */
    }
}

.center-text{
    text-align:center !important;
}

/* 1. Ancho del contenedor para evitar que el texto se amontone */
.dropdown-menu.notification {
    min-width: 320px; /* Ancho mínimo profesional */
    max-width: 350px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Sombra suave */
    border-radius: 8px;
    padding: 0;
}

/* 2. Encabezado más limpio */
.noti-head {
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
    border-radius: 8px 8px 0 0;
}

    .noti-head a {
        font-size: 12px;
        text-decoration: none;
        color: #007bff;
        margin-left: 10px;
    }

/* 3. Estilo de la lista de notificaciones */
.noti-body .notification {
    padding: 15px;
    border-bottom: 1px solid #f8f9fa;
    transition: background 0.2s;
    display: block; /* Asegura que ocupe todo el ancho */
}

    .noti-body .notification:hover {
        background-color: #f8fbff;
    }

/* 4. Ajuste de la imagen y cuerpo */
.notification .media {
    display: flex !important;
    align-items: flex-start;
}

.notification .img-radius {
    width: 40px !important; /* Tamaño ícono estándar */
    height: 40px !important;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 5. Tipografía y espaciado */
.notification .media-body p {
    margin: 0;
    color: #6c757d;
    font-size: 13px;
    line-height: 1.5;
}

.notification .media-body strong {
    color: #333;
    font-size: 14px;
    display: block; /* El título arriba, el texto abajo */
    margin-bottom: 2px;
}

.n-time {
    font-size: 11px;
    font-weight: 400;
}

/* Separadores de sección (Última, Pendientes) */
.n-title {
    background: #f8f9fa;
    padding: 5px 15px;
}

    .n-title p {
        font-size: 11px;
        font-weight: 700;
        color: #a0a0a0;
        letter-spacing: 1px;
    }

/* Estilo para los Badges de Tags Profesionales */
.tag-badge {
    background: #eef4ff; /* Azul muy pálido de fondo */
    color: #1c4e80; /* Texto en azul oscuro */
    border: 1px solid #d0e1ff;
    border-radius: 50px; /* Forma de píldora completa */
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.tag-badge-remove {
    margin-left: 10px;
    background: #d0e1ff;
    color: #1c4e80;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s;
}

    .tag-badge-remove:hover {
        background: #ff4d4d;
        color: white;
    }

/* Contenedor visual */
#selectedTagsList {
    background-color: #f8f9fa;
    border: 1px solid #ced4da !important;
    border-radius: 8px;
    padding: 10px;
    min-height: 100px;
}

/* Personalización para que el SweetAlert combine con Plecsys */
.swal2-popup.swal2-toast {
    background: #ffffff;
    border-left: 5px solid #1c4e80; /* El mismo azul de tus tags */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.swal2-title {
    color: #1c4e80 !important;
    font-weight: 600 !important;
}

/* 1. Fondo del modal (Backdrop) */
.modal-backdrop.show {
    /* Opacidad del elemento al 100% para que el filtro funcione */
    opacity: 1 !important;
    /* Fondo negro al 50% de transparencia */
    background-color: rgba(0, 0, 0, 0.15) !important;
    /* Efecto de desenfoque y ajuste de brillo */
    backdrop-filter: blur(2px) brightness(0.6) !important;
    -webkit-backdrop-filter: blur(2px) brightness(0.6) !important;
}

/* 2. Desenfoque del contenido de fondo */
body.modal-open .pcoded-main-container {
    filter: blur(15px) !important;
    transition: filter 0.4s ease;
    /* Zoom ligero para evitar bordes blancos por el blur */
    transform: scale(1.03);
    /* Mejora el rendimiento del renderizado */
    backface-visibility: hidden;
}

/* Evitar que el modal mismo se desenfoque o cause errores de cálculo */
.modal.fade.show {
    backdrop-filter: none !important;
}

/* Contenedor principal del Modal */
.modal-content {
    border: none;
    border-radius: 0px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden; /* Para que el header respete el radio del borde */
    border-bottom-right-radius: 50px;
}

/* Header estilizado */
.modal-header {
    background: linear-gradient(135deg, #1c4e80 0%, #041a4b 100%);
    padding: 10px 15px;
    border: none;
    height: 70px;
    border-radius: 0px;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.5px;

}

/* Cuerpo del modal con mejor espaciado */
.modal-body {
    padding: 30px;
    background-color: #fcfcfc;
}

/* Labels más legibles */
label.f-w-600 {
    color: #444;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: block;
}

/* Dropdown (Select) personalizado */
#tagSearch {
    height: 45px;
    border: 2px solid #eaedf1;
    border-radius: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

    #tagSearch:focus {
        border-color: #1c4e80;
        box-shadow: 0 0 0 4px rgba(28, 78, 128, 0.1);
    }

/* Área de Tags con aspecto de "Dashboard" */
#selectedTagsList {
    background-color: #ffffff;
    border: 2px dashed #eaedf1 !important; /* Estilo 'dropzone' */
    border-radius: 10px;
    padding: 15px;
    min-height: 120px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
}

/* Footer más limpio */
.modal-footer {
    padding: 20px 25px;
    background-color: #ffffff;
    border-top: 1px solid #f1f1f1;
}