/* ====== MENU AJUSTES ====== */
.titulo-ajustes{
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 19px;
    border-radius: 3px;
    border-bottom: 2px solid var(--color-azul-principal);
}

#AJUSTES-CONTENEDOR {
    display: flex;
    height: calc(100% - 33px);
}

.menu-ajustes {
    width: 18%;
    background-color: var(--color-gris-terciario);
    height: 100%;
    border-radius: 2px;
    position: relative;
    box-shadow: 6px 0 12px -4px rgba(0,0,0,0.35);
    margin-right: 10px;
    user-select: none;
}

.opcion-menu-ajustes {
    background-color: var(--color-blanco);
    color: var(--color-negro);
    padding: 6px;
    width: 100%;
    margin-bottom: 5px;
    font-size: 14px;
}

.opcion-menu-ajustes:hover {
    cursor: pointer;
    background-color: var(--color-azul-principal);
    color: var(--color-blanco);
}

.opcion-menu-ajustes {
    cursor: pointer;
    padding: 10px;
}

.opcion-menu-ajustes i {
    margin-right: 5px;
}

.opcion-menu-ajustes.activo {
    background-color: #004291;
    color: #ffffff;
    font-weight: 600;
}

.contenido-ajustes {
    flex: 1;
    background: #fff;
    padding: 0px 10px;
    border-radius: 6px;
}

/* =========== API WHATSAPP CLOUD =========== */
/* ========================================== */
.api-whatsapp-ajustes-titulo {
    display: block;
    width: 100%;
    padding: 10px 10px;
    border-bottom: 2px solid var(--color-gris-terciario);
    font-size: 16px;
    border-radius: 2px;
    font-weight: 500;
}

.container-data-whatsapp {
    margin-top: 10px;
    width: 100%;
    font-size: 15px;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap; /* 👈 clave */
    gap: 20px;
}

.group-access-token {
    width: 100%;
}

.group-access-token label {
    display: block;
    margin-bottom: 7px;
}

.group-access-token input {
    display: block;
    width: 90%;
    height: 30px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    padding-left: 7px;
    padding-right: 7px;
    outline: none;
    display: inline-block;
}

.group-access-token input:focus {
    box-shadow: 0 0 0 1px var(--color-azul-claro);
    border: 1px solid var(--color-azul-claro);
}

.ver-access-token {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 5px;
}

.ver-access-token:hover {
    cursor: pointer;
}

.guardar-access-token {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 4px;
}

.guardar-access-token:hover {
    cursor: pointer;
}

/* MODAL CREDENCIALES ACCESS TOKEN WHATSAPP */
#MODAL-CREDENCIALES-WHATSAPP {
    display: none;               /* Oculta por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45); /* Sombra negra */
    justify-content: center;
    align-items: center;
    z-index: 5;
}

#MODAL-CREDENCIALES-WHATSAPP.activo {
    display: flex;
}

.content-modal-whatsapp {
    background-color: var(--color-blanco);
    width: 30%;
    height: 280px;
    border-radius: 5px;
    font-size: 18px;
    margin-top: -5%;
    position: relative;
}

.header-modal-whatsapp {
    background-color: var(--color-gris-terciario);
    height: 40px;
    align-content: center;
    text-align: left;
    padding-left: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom: 15px;
}

.header-modal-whatsapp i {
    margin-right: 7px;
}

.contenido-modal-whatsapp {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 30px;
    font-size: 15px;
    border-bottom: 1px solid var(--color-gris-terciario);
}

.group-credenciales-whatsapp {
    margin-top: 30px;
}

.group-credenciales-whatsapp input {
    width: 75%;
    border: 1px solid var(--color-negro);
    margin-top: 10px;
    height: 30px;
    border-radius: 3px;
    padding-left: 10px;
    padding-right: 10px;
}

.footer-modal-whatsapp {
    display: flex;          /* 👈 esto faltaba */
    justify-content: flex-end;
    gap: 8px;               /* opcional, separación entre botones */
    padding-right: 10px;
}

.cancelar-credencial-whatsapp {
    width: 120px;
    height: 30px;
    align-content: center;
    text-align: center;
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    border-radius: 5px;
    margin-top: 10px;
}

.enviar-credencial-whatsapp {
    width: 120px;
    height: 30px;
    align-content: center;
    text-align: center;
    background-color: var(--color-azul-claro);
    color: var(--color-blanco);
    border-radius: 5px;
    margin-top: 10px;
}

.text-extra-modal-whatsapp {
    font-size: 12px;
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 5px;
}

/* NUMBER ID */
.group-phone-number-id {
    width: calc(40% - 10px); /* 2 columnas */
    margin-top: 20px;
}

.group-phone-number-id label {
    display: block;
    margin-bottom: 7px;
}

.group-phone-number-id input {
    display: block;
    width: 75%;
    height: 30px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    padding-left: 7px;
    padding-right: 7px;
    outline: none;
    display: inline-block;
}

.group-phone-number-id input:focus {
    box-shadow: 0 0 0 1px var(--color-azul-claro);
    border: 1px solid var(--color-azul-claro);
}

.ver-phone-number-id {
    display: inline-block;
    width: 30px;
    height: 31px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 5px;
}

.ver-phone-number-id:hover {
    cursor: pointer;
}

.guardar-phone-number-id {
    display: inline-block;
    width: 30px;
    height: 31px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 4px;
}

.guardar-phone-number-id:hover {
    cursor: pointer;
}

/* WABA ID */
.group-waba-id {
    width: calc(40% - 10px); /* 2 columnas */
    margin-top: 20px;
}

.group-waba-id label {
    display: block;
    margin-bottom: 7px;
}

.group-waba-id input {
    display: block;
    width: 75%;
    height: 30px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    padding-left: 7px;
    padding-right: 7px;
    outline: none;
    display: inline-block;
}

.group-waba-id input:focus {
    box-shadow: 0 0 0 1px var(--color-azul-claro);
    border: 1px solid var(--color-azul-claro);
}

.ver-waba-id {
    display: inline-block;
    width: 30px;
    height: 31px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 5px;
}

.ver-waba-id:hover {
    cursor: pointer;
}

.guardar-waba-id {
    display: inline-block;
    width: 30px;
    height: 31px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 4px;
}

.guardar-waba-id:hover {
    cursor: pointer;
}

/* WEBHOOK ENDPOINT */
.group-webhook-endpoint {
    width: calc(65% - 10px); /* 2 columnas */
    margin-top: 20px;
}

.group-webhook-endpoint label {
    display: block;
    margin-bottom: 7px;
}

.group-webhook-endpoint input {
    display: block;
    width: 85%;
    height: 30px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    padding-left: 7px;
    padding-right: 7px;
    outline: none;
    display: inline-block;
}

.group-webhook-endpoint input:focus {
    box-shadow: 0 0 0 1px var(--color-azul-claro);
    border: 1px solid var(--color-azul-claro);
}

.ver-webhook-endpoint {
    display: inline-block;
    width: 30px;
    height: 31px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 5px;
}

.ver-webhook-endpoint:hover {
    cursor: pointer;
}

.guardar-webhook-endpoint {
    display: inline-block;
    width: 30px;
    height: 31px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 4px;
}

.guardar-webhook-endpoint:hover {
    cursor: pointer;
}

/* VERIFY TOKEN */
.group-verify-token {
    width: calc(35% - 10px); /* 2 columnas */
    margin-top: 20px;
}

.group-verify-token label {
    display: block;
    margin-bottom: 7px;
}

.group-verify-token input {
    display: block;
    width: 75%;
    height: 30px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    padding-left: 7px;
    padding-right: 7px;
    outline: none;
    display: inline-block;
}

.group-verify-token input:focus {
    box-shadow: 0 0 0 1px var(--color-azul-claro);
    border: 1px solid var(--color-azul-claro);
}

.ver-verify-token {
    display: inline-block;
    width: 30px;
    height: 31px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 5px;
}

.ver-verify-token:hover {
    cursor: pointer;
}

.guardar-verify-token {
    display: inline-block;
    width: 30px;
    height: 31px;
    border: 1px solid var(--color-negro);
    border-radius: 3px;
    align-content: center;
    text-align: center;
    margin-left: 4px;
}

.guardar-verify-token:hover {
    cursor: pointer;
}

/* ========================================== */
/* =========== FIN API WHATSAPP CLOUD =========== */



/* ========================================== */
/* =============== API FACEBOOK ============= */
.api-facebook-ajustes-titulo {
    display: block;
    width: 100%;
    padding: 10px 10px;
    border-bottom: 2px solid var(--color-gris-terciario);
    font-size: 16px;
    border-radius: 2px;
    font-weight: 500;
    margin-bottom: 10px;
}

.contenedor-api-facebook {
    width: 100%;
    height: auto;
}

.conexion-api-facebook {
    width: 100%;
    height: 80px;
    border: 1px solid #ddd;
    display: flex;
}

.conectar-api-facebook {
    width: 35%;
    text-align: center;
}

#btn-facebook-login {
    margin-top: 5px;
}

.nombre-pagina-api-facebook {
    width: 40%;
}

.status-api-facebook  {
    width: 25%;
}

.titulo-nombre-pagina-api-facebook,
.titulo-conexion-api-facebook,
.titulo-pagina-api-facebook,
.titulo-status-api-facebook {
    display: block;
    height: 40%;
    text-align: center;
    align-content: center;
    border-bottom: 1px solid var(--color-gris-terciario);
}

#btn-facebook-login,
#btn-facebook-logout {
    width: 60%;
    height: 35px;
    margin: 0 auto;
    display: block;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    margin-top: 6px;
}

#btn-facebook-login {
    display: none;
    background: #3b82f6;
}

#btn-facebook-logout {
    display: none;
    background: #dc2626;
}

.nombre-pagina-api-facebook {
    width: 40%;
}

.valor-nombre-pagina-api-facebook-on,
.valor-nombre-pagina-api-facebook-off,
.valor-status-pagina-api-facebook-on,
.valor-status-pagina-api-facebook-off {
    height: 60%;
    text-align: center;
    align-content: center;
    display: none;
}

.valor-status-pagina-api-facebook-on {
    color: #16a34a;
}

.valor-status-pagina-api-facebook-off {
    color: #dc2626;
}

.status-rojo {
    color: #e53935; /* rojo */
    font-weight: 600;
}

.status-verde {
    color: #2e7d32; /* verde */
    font-weight: 600;
}

.content-expiracion-token {
    border: 1px solid var(--color-gris-terciario);
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
    margin-top: 10px;
}

.fecha-expiracion-token {
    font-weight: 500;
    color: var(--color-rojo);
}
/* ============= FIN API FACEBOOK ============ */
/* =========================================== */


/* ========================================== */
/* ============== API INSTAGRAM ============= */

.api-instagram-ajustes-titulo {
    display: block;
    width: 100%;
    padding: 10px 10px;
    border-bottom: 2px solid var(--color-gris-terciario);
    font-size: 16px;
    border-radius: 2px;
    font-weight: 500;
    margin-bottom: 10px;
}

.contenedor-api-instagram {
    width: 100%;
    height: auto;
}

.conexion-api-instagram {
    width: 100%;
    height: 80px;
    border: 1px solid #ddd;
    display: flex;
}

.conectar-api-instagram {
    width: 35%;
    text-align: center;
}

#btn-instagram-login {
    margin-top: 5px;
}

.nombre-cuenta-api-instagram {
    width: 40%;
}

.status-api-instagram {
    width: 25%;
}

.titulo-nombre-cuenta-api-instagram,
.titulo-conexion-api-instagram,
.titulo-status-api-instagram {
    display: block;
    height: 40%;
    text-align: center;
    align-content: center;
    border-bottom: 1px solid var(--color-gris-terciario);
}

#btn-instagram-login,
#btn-instagram-logout {
    width: 60%;
    height: 35px;
    margin: 0 auto;
    display: block;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    margin-top: 6px;
}

#btn-instagram-login {
    display: none;
    background: linear-gradient(
        45deg,
        #f58529,
        #dd2a7b,
        #8134af,
        #515bd4
    );
}

#btn-instagram-logout {
    display: none;
    background: #dc2626;
}

.valor-nombre-cuenta-api-instagram-on,
.valor-nombre-cuenta-api-instagram-off,
.valor-status-cuenta-api-instagram-on,
.valor-status-cuenta-api-instagram-off {
    height: 60%;
    text-align: center;
    align-content: center;
    display: none;
}

.valor-status-cuenta-api-instagram-on {
    color: #16a34a;
}

.valor-status-cuenta-api-instagram-off {
    color: #dc2626;
}

.content-expiracion-token {
    border: 1px solid var(--color-gris-terciario);
    padding: 7px;
    margin-top: 10px;
}

.fecha-expiracion-token-instagram {
    font-weight: 500;
    color: var(--color-rojo);
}

/* ============ FIN API INSTAGRAM ============ */
/* =========================================== */