:root {
    --principal: #183f6c;
    --white: #ffffff;
    --grey: #627885;
    --gris: #f2f5f7;
    --nav: #e5e9f0;
}
* {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px; 
    line-height: 1.5;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari (400) */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin (400) */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.bg-blue {
    background-color: var(--principal);
    color: var(--white);
}
/*****************************************************************************************/
/* Css Items MenuSide */
/*****************************************************************************************/

.custom-accordion .accordion-button:not(.collapsed) {
    background-color: var(--principal) !important;
    color: var(--white) !important;
    box-shadow: none;
}

.custom-accordion .accordion-button::after {
    filter: brightness(0) invert(1);
}
.custom-accordion .accordion-button:not(.collapsed),
.custom-accordion .accordion-button:focus {
    background-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important; 
}
.custom-accordion .list-group-item-action:hover,
.custom-accordion .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.1) !important; 
    color: #ffffff !important; 
}



/*****************************************************************************************/
/* Css param encabezado principal */
/*****************************************************************************************/
.encabezado {
    background-color: var(--principal);
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.encabezado-left {
    background-color: var(--principal);
    text-align: left;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 5px;
    padding-left: 15px;
}
/*****************************************************************************************/
/* Css param letras */
/*****************************************************************************************/
.formal-title {
    color: var(--white);
    font-weight: 700;
    font-size: 1.40rem;
}
.formal-subtitle {
    font-size: .86rem;
    color: var(--white);
}

.formal-title-blue {
    color: var(--principal);
    font-weight: 700;
    font-size: 1.40rem;
}

.formal-subtitle-blue {
    font-size: .86rem;
    color: var(--principal);
}

.title {
    background-color: var(--principal);
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: var(--white);
}

.subtitulo {
    background-color: #eeeeee;
    color: var(--principal);
    font-weight: bold;
}

.parrafo {
    color: #33445a;
    font-size: .80rem;
    font-weight: 600;
    margin-bottom: 4px;
}
/*****************************************************************************************/
/* Css param textbox */
/*****************************************************************************************/
.text-box {
    border: 0.5px solid var(--gris);
    border-radius: 5px;
    padding: 5px;
    min-width: 100%;
    color: var(--grey);
}

.text-coment {
    border: hidden !important;
    width: 100%;
    height: 100%;
}

.text-input-group {
    border: 1px solid #d7dee7;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    transition: all .2s ease;
}

    .text-input-group .input-group-text {
        border: 0;
        border-right: 1px solid #d7dee7;
        background-color: #fff;
        color: #62748a;
        min-width: 55px;
        justify-content: center;
    }

    .text-input-group .form-control,
    .text-input-group .form-select {
        border: 0;
        background-color: #fff;
        padding: 8px 12px;
        font-size: .90rem;
        box-shadow: none;
    }

        .text-input-group .form-control:focus,
        .text-input-group .form-select:focus {
            box-shadow: none;
        }

    .text-input-group:focus-within {
        border-color: #447db6;
        box-shadow: 0 0 0 .15rem rgba(33,93,153,.12);
    }
/*****************************************************************************************/
/* Css param botones */
/*****************************************************************************************/

.btn_principal {
    background-color: var(--principal);
    color: white;
    border-color: #595c60;
    border-radius: 4px;
    transition-duration: 0.4s;
}

    .btn_principal:hover {
        background-color: blue;
        color: white;
    }

.btn_limpiar {
    background-color: #aaaaaa;
    color: white;
    border-color: #595c60;
    border-radius: 4px;
    transition-duration: 0.4s;
}

    .btn_limpiar:hover {
        background-color: silver;
        color: white;
    }
/*****************************************************************************************/
/* Side Menu */
/*****************************************************************************************/

.navbar {
    background-color: var(--nav) !important;
}
.nav-item a {
    color: var(--grey) !important;
}

#sidebar {
    width: 280px;
    background: var(--principal);
    color: var(--white);
    padding-top: 1rem;
    overflow-y: auto;
    transition: width 0.3s ease, margin-left 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

    #sidebar::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/img/login-puerto.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.05;
        z-index: -1;
    }

  
    #sidebar.collapsed {
        margin-left: -280px; 
    }
    
#main-container {
    transition: width 0.3s ease, flex-grow 0.3s ease;
    min-width: 0;
}
#sidebar .submenu-link{
    margin: 2px 0;
    border-radius: 6px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#sidebar .submenu-link:hover{
    background-color: rgba(255,255,255,.08) !important;
}



#sidebar .submenu-link.active {
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(66,200,232,.16);
    color: #fff !important;
    font-weight: 600;
}

#sidebar .submenu-link.active ion-icon,
#sidebar .submenu-link.active span{
    color: #fff !important;
}

/* -------------------- RESPONSIVE (MÓVILES Y TABLETS) -------------------- */
@media (max-width: 991px) {
    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        padding-top: 60px !important;
        z-index: 1020 !important;
        margin-left: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

        #sidebar.show {
            transform: translateX(0);
        }
}

/*****************************************************************************************/
/* Css param tablas */
/*****************************************************************************************/

/* =====================================================
   CONTENEDOR GENERAL
===================================================== */

.dt-container {
    color: #264362;
    font-size: 14px;
}


/* =====================================================
   TABLA
===================================================== */

table.dataTable {
    width: 100% !important;
    margin: 0 !important;

    border-collapse: separate !important;
    border-spacing: 0;

    background-color: #ffffff;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    overflow: hidden;
}


/* =====================================================
   ENCABEZADO
===================================================== */

table.dataTable thead {
    background: linear-gradient(
        135deg,
        #173d65 0%,
        #245a8d 100%
    );
}

table.dataTable thead th {
    padding: 14px 12px !important;

    color: #ffffff !important;
    font-size: 11px;
    font-weight: 600;

    text-align: center;
    vertical-align: middle;
    white-space: nowrap;

    background-color: transparent !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

table.dataTable thead th:last-child {
    border-right: none !important;
}


/* Iconos de ordenamiento */

table.dataTable thead th .dt-column-order {
    color: rgba(255, 255, 255, 0.8) !important;
}


/* =====================================================
   CUERPO DE LA TABLA
===================================================== */

table.dataTable tbody td {
    padding: 12px !important;

    color: #42566d;
    text-align: center;
    vertical-align: middle;

    background-color: #ffffff;
    border-top: none !important;
    border-bottom: 1px solid #e8edf2 !important;
}


/* Filas alternadas */

table.dataTable tbody tr:nth-child(even) td {
    background-color: #f7f9fb;
}


/* Efecto al pasar el mouse */

table.dataTable tbody tr:hover td {
    color: #173d65;
    background-color: #edf4fa !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


/* Última fila */

table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}


/* =====================================================
   BUSCADOR Y CANTIDAD DE REGISTROS
===================================================== */

.dt-container .dt-search,
.dt-container .dt-length {
    margin-bottom: 16px;

    color: #42566d;
    font-weight: 500;
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    min-height: 40px;
    padding: 7px 12px !important;

    color: #264362;
    background-color: #ffffff;

    border: 1px solid #ccd6e0 !important;
    border-radius: 5px !important;
    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.dt-container .dt-search input {
    min-width: 220px;
    margin-left: 8px;
}

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    border-color: #245a8d !important;
    box-shadow: 0 0 0 3px rgba(36, 90, 141, 0.15) !important;
}


/* =====================================================
   INFORMACIÓN INFERIOR
===================================================== */

.dt-container .dt-info {
    padding-top: 18px !important;

    color: #6b7d90;
    font-size: 13px;
}


/* =====================================================
   PAGINACIÓN
===================================================== */

div.dt-container div.dt-paging {
    padding-top: 14px;
}

.descripcion-noticia {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: 60px;
    transition: max-height 0.4s ease;
}

    .descripcion-noticia.abierto {
        -webkit-line-clamp: unset;
        display: block;
    }

/* Botones normales */

div.dt-container div.dt-paging button.dt-paging-button {
    min-width: 38px;
    height: 38px;

    margin: 0 3px;
    padding: 6px 10px !important;

    color: #264362 !important;
    -webkit-text-fill-color: #264362 !important;

    background: #ffffff !important;
    background-image: none !important;

    border: 1px solid #d7e0e8 !important;
    border-radius: 5px !important;

    box-shadow: none !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* Hover de botones normales */

div.dt-container div.dt-paging button.dt-paging-button:not(.current):not(.disabled):hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: #245a8d !important;
    background-image: none !important;

    border-color: #245a8d !important;
}


/* Número seleccionado */

div.dt-container div.dt-paging button.dt-paging-button.current,
div.dt-container div.dt-paging button.dt-paging-button.current:hover,
div.dt-container div.dt-paging button.dt-paging-button.current:focus,
div.dt-container div.dt-paging button.dt-paging-button.current:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: #173d65 !important;
    background-image: none !important;

    border-color: #173d65 !important;

    box-shadow: 0 3px 8px rgba(23, 61, 101, 0.25) !important;
    outline: none !important;
    opacity: 1 !important;
}


/* Botones desactivados */

div.dt-container div.dt-paging button.dt-paging-button.disabled,
div.dt-container div.dt-paging button.dt-paging-button.disabled:hover {
    color: #aab4be !important;
    -webkit-text-fill-color: #aab4be !important;

    background: #f4f6f8 !important;
    background-image: none !important;

    border-color: #e1e6eb !important;

    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}


/* =====================================================
   ESTADO VACÍO
===================================================== */

table.dataTable tbody td.dt-empty {
    padding: 0 !important;

    background-color: #ffffff !important;
    border: none !important;
}


/* Evita que el hover cambie el estado vacío */

table.dataTable tbody tr:hover td.dt-empty {
    background-color: #ffffff !important;
}


/* =====================================================
   SCROLL HORIZONTAL
===================================================== */

.dt-scroll-body,
.table-responsive {
    border-radius: 6px;
}


/* =====================================================
   DISEÑO RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    .dt-container .dt-search,
    .dt-container .dt-length {
        width: 100%;
        text-align: left;
    }

    .dt-container .dt-search input {
        width: 100%;
        min-width: 0;
        margin: 7px 0 0;
    }

    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 10px 8px !important;
        font-size: 12px;
    }

    div.dt-container div.dt-paging button.dt-paging-button {
        min-width: 34px;
        height: 34px;
        margin: 0 2px;
        padding: 5px 8px !important;
    }
}

.accordion-button.encabezado-left {
    background-color: transparent !important;
    color: white !important;
}

    .accordion-button.encabezado-left:not(.collapsed) {
        background-color: transparent !important;
        color: white !important;
        box-shadow: none !important;
    }
    .accordion-button.encabezado-left::after {
        filter: brightness(0) invert(1) !important;
    }

.accordion-button.sin-flecha::after {
    display: none !important;
}

.btn-toggle-sign .pedido-minus {
    display: none;
}

.btn-toggle-sign[aria-expanded="true"] .pedido-plus {
    display: none;
}

.btn-toggle-sign[aria-expanded="true"] .pedido-minus {
    display: inline-block;
}

/* ================================
   LOGO Menu
================================ */

.logo-encabezado {
    width: 62px;
    height: 62px;
    background-color: var(--white);
    color: var(--principal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(24, 63, 108, .15);
}

    .logo-encabezado ion-icon {
        font-size: 31px;
    }

.logo-subencabezado {
    width: 42px;
    height: 42px;
    background-color: var(--white);
    color: var(--principal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(24, 63, 108, .15);
}