/* =========== Google Fonts ============ */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap");

/* =============== Globals ============== */
* {
    font-family: "Ubuntu", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --blue: #282826;
    --white: #EFF5FF;
    --gray: #f5f5f5;
    --black1: #222;
    --black2: #999;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #EFF5FF;
    display: block;

}

.container {
    position: relative;
    width: 100%;
}

/* =============== Navigation ================ */
.inicio-icon {
    margin-left: 100px; /* Mueve el icono un poco a la derecha */
    margin-top: 22px; /* Mueve el icono un poco hacia abajo */
}
/* iconos de lista o flechitas*/
.chevron-icon-usuarios {
    margin-left: 70px;
    margin-top: 18px;
    font-size: 1.4rem;
}

.chevron-icon-creditos {
    margin-left: 32px;
    margin-top: 18px;
    font-size: 1.4rem;
}

.chevron-icon-reportes {
    margin-left: 62px;
    margin-top: 18px;
    font-size: 1.4rem;
}

.chevron-icon-prestamos {
    margin-left: 52px;
    margin-top: 18px;
    font-size: 1.4rem;
}

.chevron-icon-admin {
    margin-left: 20px;
    margin-top: 18px;
    font-size: 1.4rem;
}

.chevron-icon-mobil {
    margin-left: 80px;
    margin-top: 18px;
    font-size: 1.4rem;
}

.confi-icon {
    margin-left: 33px; /* Mueve el icono un poco a la derecha */
    margin-top: 22px; /* Mueve el icono un poco hacia abajo */
}

.large-logo {
    display: block;
    width: 130px; /* Ajusta el ancho de la imagen grande */
    height: auto; /* Ajusta la altura de la imagen grande */
    margin-left: 32px; /* Mueve la imagen un poco a la derecha */
    margin-top: 30px; /* Mueve la imagen un poco hacia abajo */
}

.small-logo {
    display: none;
    width: 50px; /* Ajusta el ancho de la imagen pequeña */
    height: auto; /* Ajusta la altura de la imagen pequeña */
    margin-right: 5px; /* Mueve la imagen un poco a la derecha */
    margin-top: 5px; /* Mueve la imagen un poco hacia abajo */
}

.large-logo {
    display: block;
}

.small-logo {
    display: none;
}

@media (max-width: 600px) {
    .large-logo {
        display: none;
    }

    .small-logo {
        display: block;
    }
}
/* Estilos del dropdown */
.select {
    display: none;
    position: relative;
    transition: 300ms;
    color: white;
    overflow: hidden;
}

.options {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    padding: 5px;
    background-color: #2a2f3b;
    transition: 300ms;
}

    .options input[type="radio"] {
        display: none;
    }

    .options label {
        font-size: 15px;
        margin-left: 21%;
        position: relative;
    }

        .options label::before {
            content: "\f0ca"; /* Código Unicode del icono de lista en Font Awesome */
            font-family: "Font Awesome 5 Free"; /* Nombre de la fuente */
            font-weight: 900; /* Peso de la fuente */
            position: absolute;
            left: -40px;
            top: 50%;
            transform: translateY(-50%);
        }

    .options label {
        display: inline-block;
        padding: 5px;
        background-color: #2a2f3b;
        color: white;
        border-radius: 5px;
        margin-bottom: 5px;
        cursor: pointer;
    }

        .options label:hover {
            background-color: #323741;
        }

/* Estilos de navegación */
.navigation {
    position: fixed;
    width: 300px;
    height: 100%;
    background: var(--blue);
    border-left: 10px solid var(--blue);
    transition: 0.5s;
    overflow: hidden;
}

    .navigation.active {
        width: 80px;
    }

    .navigation ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

        .navigation ul li {
            position: relative;
            width: 100%;
            list-style: none;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
        }

            .navigation ul li:hover,
            .navigation ul li.hovered {
                background-color: var(--white);
            }

            .navigation ul li:nth-child(1) {
                margin-bottom: 40px;
                pointer-events: none;
            }

            .navigation ul li a {
                position: relative;
                display: block;
                width: 100%;
                display: flex;
                text-decoration: none;
                color: var(--white);
            }

            .navigation ul li:hover a,
            .navigation ul li.hovered a {
                color: var(--blue);
            }

            .navigation ul li a .icon {
                position: relative;
                display: block;
                min-width: 60px;
                height: 60px;
                line-height: 75px;
                text-align: center;
            }

                .navigation ul li a .icon ion-icon {
                    font-size: 1.75rem;
                }

            .navigation ul li a .title {
                position: relative;
                display: block;
                padding: 0 10px;
                height: 60px;
                line-height: 60px;
                text-align: start;
                white-space: nowrap;
            }

            /* Estilos para mostrar el dropdown */
            .navigation ul li.show-dropdown .select {
                display: block;
                margin-top: 10px;
            }

            /* Ajuste de espacio cuando el dropdown está activo */
            .navigation ul li.show-dropdown + li {
                margin-top: 20px;
            }

            /* --------- curve outside ---------- */
            .navigation ul li:hover a::before,
            .navigation ul li.hovered a::before {
                content: "";
                position: absolute;
                right: 0;
                top: -50px;
                width: 50px;
                height: 50px;
                background-color: transparent;
                border-radius: 50%;
                box-shadow: 35px 35px 0 10px var(--white);
                pointer-events: none;
            }

            .navigation ul li:hover a::after,
            .navigation ul li.hovered a::after {
                content: "";
                position: absolute;
                right: 0;
                bottom: -50px;
                width: 50px;
                height: 50px;
                background-color: transparent;
                border-radius: 50%;
                box-shadow: 35px -35px 0 10px var(--white);
                pointer-events: none;
            }

/* ===================== Main ===================== */
.main {
    position: absolute;
    width: calc(100% - 300px);
    left: 300px;
    min-height: 100vh;
    background: var(--white);
    transition: 0.5s;

}

    .main.active {
        width: calc(100% - 80px);
        left: 80px;
    }

.topbar {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.toggle {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    cursor: pointer;
}

@media (max-width: 700px) {
    .nombre {
        display: none;
    }
}

.user {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    left: -130px;
}

    .user img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.campana {
    position: relative;
    left: 155px;
    top: -14px;
}

/* Cuando la pantalla es de 1500px o menos (típicamente tablets en modo paisaje), ajusta la posición left de .campana a 0px */
@media screen and (max-width: 1500px) {
    .campana {
        left: 0px;
    }
}

.fas.fa-bell {
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
}

.campana .fas.fa-bell {
    font-size: 1.5em;
}

.notification-dot {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    background-color: #F00;
    border-radius: 50%;
    display: block; /* Muestra el punto de notificación por defecto */
}

.modal {
    position: absolute;
    top: 30px;
    right: 0;
    width: 200px;
    height: 100px;
    background-color: #FFF;
    border: 1px solid #000;
    display: none; /* Oculta el modal por defecto */
    z-index: 9999; /* Asegura que el modal siempre esté en la parte superior */
    border-radius: 10px;
}

    .modal p {
        border-bottom: 1px solid #ddd; /* Agrega una línea divisoria entre las notificaciones */
        padding: 10px; /* Agrega un poco de espacio alrededor de las notificaciones */
        background-color: #f9f9f9; /* Cambia el color de fondo de las notificaciones */
        margin: 0; /* Elimina los márgenes predeterminados */
        border-radius: 10px;
        transition: background-color 0.3s; /* Agrega una transición suave al cambiar el color de fondo */
    }

        .modal p:hover {
            background-color: #e0e0e0; /* Cambia el color de fondo de las notificaciones al pasar el cursor por encima */
        }

        .modal p:last-child {
            border-bottom: none; /* Elimina la línea divisoria de la última notificación */
        }


    .modal .close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        color: #aaa; /* Cambia el color del botón de cierre */
    }

        .modal .close:hover {
            color: #000; /* Cambia el color del botón de cierre cuando se pasa el cursor por encima */
        }

.nombre-usuario {
    position: absolute;
    right: 20px;
    top: 9px;
}

.titulo-usuario {
    position: absolute;
    right: 72px;
    top: 30px;
    font-size: 0.8em;
    opacity: 0.5; /* Hace el texto semi-transparente */
}
/* ======================= Cards ====================== */
.segundo-encabezado {
    display: flex;
    align-items: center;
    width: 98%;
    padding-left: 20px;
    padding-top: 20px;
}

.Icono-lapiz, .domicilio {
    display: flex;
    align-items: center;
    margin: 0 20px;
}

    .Icono-lapiz i, .domicilio i {
        margin-right: 10px;
    }

.linea-horizontal {
    width: 100%;
    height: 10px;
    background-color: #ddd;
}

.linea-carga {
    height: 10px;
    background-color: #FF6600;
    width: 0;
}

.title h2 {
    padding-left: 20px;
    padding-top: 10px;
    color: #FF6600;
}

.fas.fa-pencil-alt {
    cursor: pointer;
}
.cardBox {
    position: relative;
    display: grid;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Ajusta el espacio entre los elementos */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en líneas múltiples si es necesario */
}

/*Inputs */
.Tnombre {
    margin-bottom: 4px;
}

.input {
    position: relative;
    flex: 1 1 200px; /* Permite que los inputs se ajusten y ocupen espacio disponible */
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.clear-icon {
    display: block;
    position: absolute;
    right: 10px;
    cursor: pointer;
    border-radius: 20px;
    color: #ffffff;
    font-size: 1.5em;
}

.input input[type="text"], .input input[type="text2"] {
    width: 100%;
    padding: 13px 30px 13px 13px; /* Ajuste el relleno para dar espacio al icono de borrar */
    border-radius: 10px;
    border: 1px solid #ccc;
    outline: none;
    transition: all 0.3s ease;
    background-color: #282826;
    color: #fff;
}

    .input input[type="text"]:focus, .input input[type="text2"]:focus {
        border-color: #FF6600;
        box-shadow: 0 0 10px #FF6600;
    }

.boton-buscar-index {
    flex-shrink: 0; /* Evita que el botón se reduzca más allá de su tamaño mínimo */
    width: 40%;
    padding: 9px;
    display: grid;
}

    .boton-buscar-index button {
        padding: 9px 20px;
        border-radius: 10px;
        border: none;
        outline: none;
        background-color: #FF6600;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1em;
    }

        .boton-buscar-index button:hover {
            background-color: #FF3300;
        }


.cardBox .card {
    position: relative;
    background: var(--white);
    padding: 5px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
}


    .cardBox .card:hover {
        background: var(--blue);
    }

        .cardBox .card:hover .numbers,
        .cardBox .card:hover .cardName,
        .cardBox .card:hover .iconBx {
            color: var(--white);
        }

/* ================== Order Details List ============== */
.details-index {
    position: relative;
    width: 100%;
    padding: 20px;
    display: grid;
    grid-gap: 30px;
}

    .details-index .recentOrders-index {
        position: relative;
        display: grid;
        min-height: 500px;
        background: white;
        box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        overflow: hidden;
        border: 0.5px solid #282826;
        overflow-x: auto;
    }

    .details-index table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 0px;
        border-radius: 40px;
        height: 150px;
    }

        .details-index table thead {
            background-color: #282826;
            color: #fff;
            top: -20px;
            border-radius: 40px;
            text-align: center;
        }

.icon-container-index {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Icono Info del Maestro - Lápiz Amarillo */
.fas.fa-pencil-alt {
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff8e1 0%, #ffe082 100%);
    border: 1.5px solid #ffb01b;
    border-radius: 9px;
    font-size: 17px;
    color: #ff8f00;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(255, 176, 27, 0.15);
}

.fas.fa-pencil-alt:hover {
    background: linear-gradient(135deg, #ffe082 0%, #ffd54f 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(255, 176, 27, 0.3);
}

/* Icono Estatus del Maestro - Flechas Azul */
.icon-estatus-maestro {
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1.5px solid #1976d2;
    border-radius: 9px;
    font-size: 17px;
    color: #0d47a1;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.15);
}

.icon-estatus-maestro:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
}

.details-index table tr td {
    border-right: 1px solid #ffffff; /* Agrega una línea a la derecha de cada td */
}

.details-index table tbody tr td {
    border-right: 1px solid #fff1d7;
}


.details-index table tr td:last-child {
    border-right: none; /* Elimina la línea a la derecha del último td */
    text-align: end;
}

.details-index table thead td {
    font-weight: 600;
    color: #fff;
    text-align: center;
    align-items: center;
    font-size: 14px;
}

.details-index .recentOrders-index table tr {
    color: var(--black1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

    .details-index .recentOrders-index table tr:last-child {
        border-bottom: none;
    }

.details-index .recentOrders-index table tbody tr:hover {
    background: #f2f2f2;
    color: var(--black1);
}

.details-index .recentOrders-index table tr td {
    padding: 10px;
}

    .details-index .recentOrders-index table tr td:last-child {
        text-align: end;
    }

    .details-index .recentOrders-index table tr td:nth-child(2) {
        text-align: end;
    }

    .details-index .recentOrders-index table tr td:nth-child(3) {
        text-align: center;
    }
/*Estilo de la alerta */
.alert {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1em;
    border: 1px solid #000;
    background-color: #fff;
    text-align: center;
    z-index: 1000;
    border-radius: 10px;
    padding: 1em;
    width: 80%;
    height: auto;
    max-width: 380px;
}

    .alert i {
        font-size: 2em;
        color: #f00;
    }

.fas.fa-exclamation-triangle {
    border-radius: 20%;
    padding: 10px;
    background-color: #ffb7b7;
    color: #f00;
}

.alert p {
    margin: 1em 1em;
}

.alert button {
    padding: 0.7em 1em;
    border-radius: 10px;
    background-color: #F00;
    width: 90%;
    color: #fff;
    font-size: medium;
}

.alert .button-container {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: auto;
}

    .alert .button-container button:first-child {
        margin-right: 20px;
        background-color: transparent; /* Cambia el color de fondo a transparente */
        border: 1px solid #808080; /* Agrega un borde gris */
        color: #000;
    }

    .alert .button-container button:last-child {
        background-color: #FFAA04; /* Cambia el color de fondo del segundo botón a verde */
        border: none; /* Elimina el borde del segundo botón */
    }

.alert .icon {
    background-color: #fff1d7; /* Cambia el color de fondo a rojo */
    border-radius: 10px; /* Hace que el icono sea redondo */
    padding: 10px; /* Agrega espacio alrededor del icono */
    color: #ffaa04;
}

/* Estilos para pantallas de tabletas y móviles */
@media (max-width: 768px) {
    .alert {
        top: 50%;
        width: 85%; /* Aumenta el ancho del modal a 85% */
    }

        .alert .button-container {
            flex-direction: column; /* Cambia la dirección de los botones a columna */
            align-items: stretch; /* Asegura que los botones se estiren para llenar el contenedor */
        }

            .alert .button-container button {
                margin-bottom: 10px; /* Añade margen debajo de los botones */
            }
}
/* ====================== Responsive Design ========================== */
@media (max-width: 991px) {
    .navigation {
        left: -300px;
    }

        .navigation.active {
            width: 300px;
            left: 0;
        }

    .main {
        width: 100%;
        left: 0;
    }

        .main.active {
            left: 300px;
        }

    .cardBox {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .details {
        grid-template-columns: 1fr;
    }

    .recentOrders {
        overflow-x: auto;
    }

    .status.inProgress {
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .cardBox {
        grid-template-columns: repeat(1, 1fr);
    }

    .cardHeader h2 {
        font-size: 20px;
    }

    .user {
        min-width: 40px;
    }

    .navigation {
        width: 100%;
        left: -100%;
        z-index: 1000;
    }

        .navigation.active {
            width: 100%;
            left: 0;
        }

    .toggle {
        z-index: 10001;
    }

    .main.active .toggle {
        color: #fff;
        position: fixed;
        right: 0;
        left: initial;
    }
}

.input-wrapper .autocomplete-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    height: 150px;
    overflow-y: auto;
    position: absolute; /* Añadir esta propiedad */
    background-color: white; /* Para asegurarte de que el fondo sea blanco */
    width: calc(100% - 2px); /* Ajusta el ancho para que coincida con el input, restando el borde */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    margin-top: calc(30%);
}

    .input-wrapper .autocomplete-list li {
        padding: 8px;
        cursor: pointer;
    }

        .input-wrapper .autocomplete-list li:hover {
            background-color: #f0f0f0;
            font-weight: bold;
        }

@media (max-width: 1650px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(38%);
    }
}

@media (max-width: 1500px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(42%);
    }
}

@media (max-width: 1400px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(47%);
    }
}

@media (max-width: 1200px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(67%);
    }
}

@media (max-width: 1100px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(60%);
    }
}

@media (max-width: 1000px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(87%);
    }
}

@media (max-width: 900px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(53%);
    }
}

@media (max-width: 830px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(47%);
    }
}

@media (max-width:730px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(42%);
    }
}

@media (max-width:671px) {
    .input-wrapper .autocomplete-list {
        margin-top: calc(54%);
    }
}

/* ============ ESTATUS - DISEÑO ENTERPRISE FORMAL ============ */
.estatus-cell {
    min-width: 200px;
    padding: 8px 12px !important;
    vertical-align: middle;
}

.estatus-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.estatus-container:hover .estatus-icon {
    transform: scale(1.1);
}

.estatus-container:hover .estatus-texto {
    color: #1a1a1a;
}

.estatus-icon {
    font-size: 14px;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    transition: all 0.2s ease;
    line-height: 26px;
    text-align: center;
    box-sizing: border-box;
}

.estatus-icon::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.estatus-texto {
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* ===== COLORES POR ESTATUS ===== */

/* ADHERIDO - Verde */
.estatus-adherido { 
    color: #059669; 
    background-color: #ecfdf5;
    border: 1.5px solid #059669;
}
.estatus-container:has(.estatus-adherido) .estatus-texto { color: #047857; }

/* PENDIENTE - Amarillo/Ámbar */
.estatus-pendiente { 
    color: #d97706; 
    background-color: #fffbeb;
    border: 1.5px solid #d97706;
}
.estatus-container:has(.estatus-pendiente) .estatus-texto { color: #b45309; }

/* BAJA POR JUBILACION - Azul */
.estatus-jubilacion { 
    color: #2563eb; 
    background-color: #eff6ff;
    border: 1.5px solid #2563eb;
}
.estatus-container:has(.estatus-jubilacion) .estatus-texto { color: #1d4ed8; }

/* BAJA POR INVALIDEZ - Morado */
.estatus-invalidez { 
    color: #7c3aed; 
    background-color: #f5f3ff;
    border: 1.5px solid #7c3aed;
}
.estatus-container:has(.estatus-invalidez) .estatus-texto { color: #6d28d9; }

/* BAJA POR CAMBIO ESTADO - Cyan */
.estatus-cambio { 
    color: #0891b2; 
    background-color: #ecfeff;
    border: 1.5px solid #0891b2;
}
.estatus-container:has(.estatus-cambio) .estatus-texto { color: #0e7490; }

/* BAJA POR DEFUNCION - Gris */
.estatus-defuncion { 
    color: #4b5563; 
    background-color: #f3f4f6;
    border: 1.5px solid #4b5563;
}
.estatus-container:has(.estatus-defuncion) .estatus-texto { color: #374151; }

/* BAJA POR INSTRUCCION COMITE - Marrón */
.estatus-comite { 
    color: #92400e; 
    background-color: #fef3c7;
    border: 1.5px solid #92400e;
}
.estatus-container:has(.estatus-comite) .estatus-texto { color: #78350f; }

/* BAJA VOLUNTARIA - Rosa */
.estatus-voluntaria { 
    color: #db2777; 
    background-color: #fdf2f8;
    border: 1.5px solid #db2777;
}
.estatus-container:has(.estatus-voluntaria) .estatus-texto { color: #be185d; }

/* BAJA POR PRE-JUBILACIÓN - Índigo */
.estatus-prejubilacion { 
    color: #4f46e5; 
    background-color: #eef2ff;
    border: 1.5px solid #4f46e5;
}
.estatus-container:has(.estatus-prejubilacion) .estatus-texto { color: #4338ca; }

/* BAJA POR PERMISO SIN GOCE - Teal */
.estatus-singoce { 
    color: #0d9488; 
    background-color: #f0fdfa;
    border: 1.5px solid #0d9488;
}
.estatus-container:has(.estatus-singoce) .estatus-texto { color: #0f766e; }

/* BAJA POR PERMUTA - Lima/Verde */
.estatus-permuta { 
    color: #65a30d; 
    background-color: #f7fee7;
    border: 1.5px solid #65a30d;
}
.estatus-container:has(.estatus-permuta) .estatus-texto { color: #4d7c0f; }

/* TRAMITES EN PROCESO - Púrpura con animación sutil */
.estatus-tramite-invalidez,
.estatus-tramite-fallecimiento,
.estatus-tramite-voluntaria,
.estatus-tramite-retiro {
    color: #7c3aed;
    background-color: #f5f3ff;
    border: 1.5px solid #7c3aed;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.estatus-container:has(.estatus-tramite-invalidez) .estatus-texto,
.estatus-container:has(.estatus-tramite-fallecimiento) .estatus-texto,
.estatus-container:has(.estatus-tramite-voluntaria) .estatus-texto,
.estatus-container:has(.estatus-tramite-retiro) .estatus-texto {
    color: #6d28d9;
}

/* LICENCIA PREJUBILATORIA - Azul Cielo */
.estatus-licencia-pre { 
    color: #0284c7; 
    background-color: #e0f2fe;
    border: 1.5px solid #0284c7;
}
.estatus-container:has(.estatus-licencia-pre) .estatus-texto { color: #0369a1; }

/* LICENCIA SIN GOCE - Turquesa */
.estatus-licencia-singoce { 
    color: #14b8a6; 
    background-color: #ccfbf1;
    border: 1.5px solid #14b8a6;
}
.estatus-container:has(.estatus-licencia-singoce) .estatus-texto { color: #0d9488; }

/* RENUNCIA A PLAZA - Rojo */
.estatus-renuncia { 
    color: #dc2626; 
    background-color: #fef2f2;
    border: 1.5px solid #dc2626;
}
.estatus-container:has(.estatus-renuncia) .estatus-texto { color: #b91c1c; }

/* BAJA DIRECTA - Rojo oscuro */
.estatus-directa { 
    color: #b91c1c; 
    background-color: #fee2e2;
    border: 1.5px solid #b91c1c;
}
.estatus-container:has(.estatus-directa) .estatus-texto { color: #991b1b; }

/* SIN DEFINIR - Naranja con animación */
.estatus-sin-definir { 
    color: #ea580c;
    background-color: #fff7ed;
    border: 1.5px solid #ea580c;
    animation: pulse-icon 1.5s ease-in-out infinite;
}
.estatus-container:has(.estatus-sin-definir) .estatus-texto { color: #c2410c; }

/* Default - Gris neutro */
.estatus-default { 
    color: #6b7280; 
    background-color: #f3f4f6;
    border: 1.5px solid #6b7280;
}
.estatus-container:has(.estatus-default) .estatus-texto { color: #4b5563; }

/* NO REGISTRADO - Naranja */
.estatus-no-registrado { 
    color: #ea580c; 
    background-color: #fff7ed;
    border: 1.5px solid #ea580c;
}
.estatus-container:has(.estatus-no-registrado) .estatus-texto { color: #c2410c; }

/* ============ FIN ESTATUS ============ */

/* ============ ICONOS DE REPORTES - ENTERPRISE ============ */

/* Estado de Cuenta - Azul Marino */
.icon-estado-cuenta {
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1.5px solid #1976d2;
    border-radius: 9px;
    font-size: 17px;
    color: #0d47a1;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.15);
}

.icon-estado-cuenta:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
}

/* Generar Referencia - Verde Esmeralda */
.icon-generar-ref {
    padding: 8px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 1.5px solid #4caf50;
    border-radius: 9px;
    font-size: 17px;
    color: #2e7d32;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.15);
}

.icon-generar-ref:hover {
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

/* Reporte Estatus - Morado */
.icon-reporte-estatus {
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border: 1.5px solid #9c27b0;
    border-radius: 9px;
    font-size: 17px;
    color: #7b1fa2;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(156, 39, 176, 0.15);
}

.icon-reporte-estatus:hover {
    background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(156, 39, 176, 0.3);
}

/* Constancia Prejubilación - Índigo */
.icon-prejubilacion {
    padding: 8px;
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
    border: 1.5px solid #3f51b5;
    border-radius: 9px;
    font-size: 17px;
    color: #303f9f;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(63, 81, 181, 0.15);
}

.icon-prejubilacion:hover {
    background: linear-gradient(135deg, #c5cae9 0%, #9fa8da 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(63, 81, 181, 0.3);
}

/* Constancia Sin Goce - Teal */
.icon-sin-goce {
    padding: 8px;
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    border: 1.5px solid #009688;
    border-radius: 9px;
    font-size: 17px;
    color: #00695c;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 150, 136, 0.15);
}

.icon-sin-goce:hover {
    background: linear-gradient(135deg, #b2dfdb 0%, #80cbc4 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 150, 136, 0.3);
}

/* Constancia Renuncia - Naranja */
.icon-renuncia {
    padding: 8px;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1.5px solid #ff9800;
    border-radius: 9px;
    font-size: 17px;
    color: #e65100;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.15);
}

.icon-renuncia:hover {
    background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}

/* Constancia Baja Directa - Rojo */
.icon-baja-directa {
    padding: 8px;
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border: 1.5px solid #f44336;
    border-radius: 9px;
    font-size: 17px;
    color: #c62828;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(244, 67, 54, 0.15);
}

.icon-baja-directa:hover {
    background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

/* Botón Cambio de Beneficiario - Badge interactivo */
.btn-cambio-beneficiario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1.5px solid #1976d2;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0d47a1;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.15);
    text-decoration: none;
    position: relative;
}

.btn-cambio-beneficiario:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
    color: #0d47a1;
    text-decoration: none;
}

/* Indicador de que es clickeable */
.btn-cambio-beneficiario::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #1976d2;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-cambio-beneficiario:hover::after {
    opacity: 1;
    animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Tooltip para indicar acción */
.btn-cambio-beneficiario[title] {
    cursor: pointer;
}

/* ============ FIN ICONOS ENTERPRISE ============ */