:root {
    --white: #ffffff;
    --lilac: #cd9ffa;
    --bluishViolet: #7a60ffba;
    --darckViolet: #5038cb;
    --dimViolet: #4e3e9c;
    --obsViolet: #48246b;
    --violet: #7430b9a1;
    --lightGray: #e4e4e4;
    --gray: #a6b2dcab;
    --drakGray: #5d6166;
    --black: #000000;
    --font: 'Poppins', sans-serif;
}

/*=========TODOS============*/
.text-none{
    text-transform: none !important;
}

/*degrade para los bloques*/
.card{
    box-shadow: 1px 1px 20px rgba(39, 1, 61, 0.171) !important;
}
/*margin para que los containers se separen del footer*/
.container-fluid{
    margin-bottom: 50px;
}
/*===BUSCAR===*/
.div-search{
    display: flex;
    justify-content: end;
}
.f-txt{
    font-size: 1.03rem !important;
}
@media (max-width: 575px) {
/*tamaño del buscador*/
.div-search{
    margin-top: 10px !important;
    display: flex;
    justify-content: left;
}

}
/*estilo del boton X que se encuentra dentro del input*/
#buscador-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238e1efc'%3e%3cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#buscador-input::-webkit-search-cancel-button:hover {
    transform: scale(1.1);
    filter: brightness(0.8);
}

/*texto input*/
input::placeholder {
    color: var(--drakGray) !important;
}
/*Color de la tipografia (titulos, subtitulos)*/
.text-primary{
    color: var(--bluishViolet) !important;
}
.text-secundary{
    color: var(--dimViolet) !important;
}
.text-tertiary{
    color: var(--obsViolet) !important;
}
/*links*/
a {
    color: var(--darckViolet);
}

.title-color {
    color: var(--bluishViolet) !important;
}

/*elemento que tenga esta clase*/
.button {
    background-image: linear-gradient(to left, #7a60ff, #cd9ffa) !important;
    border: none;
}

.button-sf {
    background-color: transparent !important;
    border-color: var(--gray);
}

/*formularios*/
.form-control:focus,
.form-input:focus {
    border-color: var(--violet) !important;
}

.form-check-input:checked {
    background-color: var(--bluishViolet);
    border-color: var(--bluishViolet);
}

/*=========FOOTER============*/
.footer-copy {
    background: linear-gradient(to left, #7a60ff, #cd9ffa);
    position: relative;
    color: var(--white);
    font-size: 13px;
    text-align: center;
    padding: 15px 0px;
    width: 100%;        /* Asegura ancho completo */
    overflow: hidden;
}

.footer-copy p {
    margin-bottom: 0px;
    word-wrap: break-word;   /* Rompe links largos si es necesario */
    padding: 0 15px;
}
/* Elimina el margen negativo que causa el desborde en el footer */
.footer-copy .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* --- 2. ALINEACIÓN DE ICONOS EN EL MENÚ "PANEL" --- */

/* Contenedor Flex para alinear el icono y el enlace verticalmente */
.dropdown-menu .menu-item-with-icon {
    display: flex !important;
    align-items: center !important;
    line-height: 1.5;
}


@media (max-width: 1199px) {

    .flex-shrink-0 {
        margin-top: -100px;

    }
    .navbar-toggler {
        font-size: 1.7rem !important;
    }
    .container-fluid {
        margin-bottom: 40px;
    }

}
@media (max-width: 370px) {
    

    .navbar-logo{
        display: grid;
  place-items: center;
    }

}

/*=========CUERPO DEL TEMPLATE============*/
.app-wrapper {
    margin-top: -60px !important;
    margin-left: 0 !important;
    margin-bottom: -40px;
}
.app-wrapper .aw-main {
    margin-inline-start: 90%;
}
.app-wrapper::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    background-color: transparent !important;
}

.app-wrapper::before li a {
    color: var(--black);
}
/*=========LANCAMIENTO============*/
.icon-btn {
    background-color: var(--bluishViolet);
    border: none;
}

.icon-btn:hover {
    background-color: var(--darckViolet) !important;
    border-color: var(--bluishViolet) !important;
}


/*=========RESPONSIVIDAD============*/
/*celular*/
@media (min-width: 300px) and (max-width: 499px) {
    .logo-main h3 {
        display: none;
    }

    .pe-slide-item a {
        color: var(--white) !important;
    }
}

@media (max-width: 540px) {
    .logo-main h3 {
        font-size: 1.2rem;
    }

    .pe-slide-item a {
        color: var (--white) !important;
    }
}

/*=========INDEX============*/
.banner {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    background: linear-gradient(to left, #7a60ff, #cd9ffa);
    padding-top: 40px;
    margin-top: 85px;
}

/* ===INICIO CON SEGUNDO NAVBAR=== */
#perfil-privado .banner{
    margin-top: 0;
    padding-top: 0;
}

/* sección caracteristicas*/
.single-feature {
    display: flex;
}

.single-feature .media-body {
    flex-grow: 1;
    text-align: right;
    margin-right: 15px;
    margin-left: 0;
}

.single-feature .media-body.text-left {
    flex-grow: 1;
    text-align: left;
    margin-right: 0;
}

/* sección contacto*/
#contact input::placeholder {
    color: var(--drakGray) !important;
}

#contact textarea::placeholder {
    color: var(--drakGray) !important;
}

.contact-info {
    padding: 1rem 2rem 1rem;
    border-radius: 8px;
    background: #7a60ff;
    background: linear-gradient(to left, #7a60ff, #cd9ffa);
}

.contact-item.media {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.contact-item.media .media-left {
    flex-shrink: 0;
    margin-right: 15px;
    font-size: 1.5em;
    color: white;
}

.contact-item.media .media-body {
    flex-grow: 1;
    text-align: left;
}

.contact-item {
    margin: 23px 0px;
}

.contact-item i {
    font-size: 20px;
}

.contact-item p {
    line-height: 20px;
    margin: 0;
}

.app-sing {
    margin-top: 111px;
    padding-bottom: 0 !important;
}







/*=========ALERTAS============*/
div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container).swal2-noanimation {
    z-index: 2200;
}

.detalleSesionModal {
    z-index: 2100;
}

.password-help_text{
    padding-left: 20px !important;
}

/*=========PRIMER NAVBAR (UNIVERSAL)============*/
/* nombre del usuaio de la sesion iniciada */
.dropdown-name{
    line-height: 1.5;
}
.menu-toggle-first{
    display: none;
}

.menuu ul{
    list-style-type: none;
    
}
.menuu > ul { display: flex !important; flex-direction: row; gap: 1.3rem; color: rgb(255, 255, 255);  list-style: none; font-weight: bold; font-size: 1.1rem; text-transform: uppercase;} 
.header-first{
    position: fixed; 
    top: 0;      
    right: 0;   
    width: 100%; 
    z-index: 2000;
}
.menuu{
    display:flex;
    background: linear-gradient(to left, #7a60ff, #cd9ffa);
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
    align-items: center;
    gap: 40px;
}
.subtxt{
    padding-left: 0 !important;
    z-index: 2100;
}

.subtxt a:hover{
    color: var(--violet) !important;
}
/*===titutlo + logo===*/
.row-logo {
    margin-left: 50px !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.row-logo .white {
    text-align: left;
}
.logo-1 {
    width: 35%;
    max-width: 45%;
}
.white {
    color:var(--white) !important;
    margin-bottom: 0px !important;
}
.nav-link:hover{
    color: #5f0099;
}
/*===Dropdawn (secciones) para boton hamburguesa===*/
.block-none{
    display: none;
}

/*=========SEGUNDO NAVBAR (INSTITUCION - PROFESIONAL)============*/

.menu-toggle { display: none; } 
.menus { display: flex; width: auto;padding: 150px 0 50px 80px; margin-bottom: 20px; background: linear-gradient(to left, #7a60ff, #cd9ffa); } 

.menus ul{
    list-style-type: none;
    
}
.menus > ul { display: flex !important; flex-direction: row; gap: 1.3rem; color: rgb(121, 120, 120);  list-style: none; } 
.nav-item.dropdown { position: relative; border-bottom: none; } 
.navtwo-link { border-radius: 0.375rem;  transition: background-color 0.15s ease; border: 0.5px solid var(--lightGray); font-size: 1rem; color: var(--white); padding: 15px; } 
.navtwo-link:hover, .navtwo-link:focus{ background-color: #ffffff; color: var(--violet); } 
.submenu { padding: 10px; position: absolute; top: 100%; left: 0; min-width: 10rem; z-index: 1000; display: block; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; background-color: var(--white); border-radius: 0.5rem; transform: translateY(10px); padding-left: 0; box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.288);} 
.submenu li{ font-size:1rem ; } 

/*.nav-item.dropdown:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0);} */
.dropdown-item { padding: 0.7rem 1rem; font-size: 1rem; transition: background-color 0.15s ease; color: rgb(121, 120, 120); text-transform: capitalize;} 
.subtxt a .ri-circle-line{
    padding-right: 5px;
}
.ri-circle-line{ font-size: 0.5rem !important; } 
.dropdown-item:hover { color: var(--violet); background-color: transparent; } 

/*===titulos de pagina===*/
/* Contenedor Principal */
.page-titles-container {
    position: absolute;
    right: 110px;
    transform: translateY(-55px); 
    display: flex;
    align-items: center; 
    margin: 0;
    padding: 0; 
}
/* 2. Estilos del Texto */
.page-titles-container span,
.page-titles-container h1 {
    color: white;
    margin: 0;  
    padding: 0;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
}

/* 3. Estilo del Separador */
.page-title-separator {
    margin: 0 8px; 
}

/*===Responsividad titulo Terapeutas Chile===*/
/* Oculta el logo de una sola línea (horizontal) a partir de 530px */


/* Ajuste para que el texto no se vea gigante en pantallas pequeñas */


/* z-index del modal sesion-profesional */
#crearRegistroModal {
    z-index: 2300 !important;
}
.modal-backdrop {
    z-index: 2200 !important;
}
#verDetalleRegistroModal{
    z-index: 2300 !important;
}
/* Backdrop del modal */

/*===Responsividad menus===*/
@media (max-width: 1370px) {
.menus { display: flex; width: auto;padding: 110px 0 50px 20px; margin-bottom: 20px; background: linear-gradient(to left, #7a60ff, #cd9ffa); } 
.navbar-logo{
    display: none;
}
.navbar-collapse{
    display: none;
}

/*===menu hamburgesa===*/
.menu-toggle-first {
    position: relative; 
    display: flex;
    justify-content: center; 
    align-items: center;
    width: 100%;
    height: 100px;
    background: linear-gradient(to left, #7a60ff, #cd9ffa);
    padding-bottom: 20px;
    padding-top: 20px;
    padding-right: 60px; 
    padding-left: 60px; 
}
.ri-menu-line{
    filter: drop-shadow(2px 2px 2px rgb(39, 3, 75));
}
.mobile-menu-btn {
    position: absolute;
    right: 28px; 
    top: 49px;
    transform: translateY(-50%); 
    background: none;
    border: none;
    font-size: 2rem;
    color: #fff;
    margin: 0; 
    padding: 0;
    z-index: 2;
}
.blok-tittle-mobile {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 15px; 
    flex-shrink: 0; 
}
.logo-mobile{
    height: 40px; 
    margin: 0; 
}
.txt-mobile {
    font-size: 1.7rem;
    padding: 0;
    margin-top: 5px;
}
.menuu{
    position: fixed;
    top: 70px;
    padding-top: 10px;
    right: 10px;
    transition: max-height 0.4s ease;
    display: none;
    background: #cd9ffa;    
    color: var(--white);
    z-index: 3000;
    border-radius: 14px;
    padding-bottom: 0;
}

.menuu.open{ display: flex;}
.menuu ul{ flex-direction: column;  list-style-type: none;}
.menuu >ul{ padding: 10px 20px 20px 20px; gap: 1px; display: flex; list-style: none; margin: 0;}
.menuu > ul > li{ position: relative;}
.menuu > ul > li > .dropdown-toggle,
.menuu > ul > li > .navtree-link-drop {
  display: block !important;
  background: transparent !important;
  color: inherit !important;
}
.menuu > ul > li.open > .dropdown-toggle,
.menuu > ul > li.open > .navtree-link-drop {
  display: block !important;
  background: transparent !important;
  color: inherit !important;
}
.menuu ul li:hover > a{ background-color: var(--white); color: var(--violet);}
/*estilo texto*/
.navtree-link, .navtree-link-drop{
    padding: 10px 10px;
    font-size: 1rem ;
    text-transform: none;
    font-weight: normal;
}
.nav-link:focus{
    background: var(--white) !important;
    box-shadow: none !important;
}
.submenu{
    position: static !important;
    width: 100% !important;
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s, opacity 0.3s;
    background: var(--white) !important;
}
/*.menuu li.dropdown:hover .submenu.subtxt {
    max-height: 300px; 
    padding-bottom: 10px;
}*/
.subtxt a {
    display: block; 
    padding: 15px 10px;
    margin-left: 0;
    text-transform: capitalize;
    color: rgb(121, 120, 120);
}
.subtxt a .ri-circle-line{
    padding-right: 5px;
}
.navtree-link{
border-radius: 0.375rem;  transition: background-color 0.15s ease; border: 0.5px solid var(--lightGray); font-size: 1rem; color: var(--white); margin-bottom: 19px;
}
.navtree-link:hover{ background-color: #ffffff; color: var(--violet); } 
.navtree-link-drop{
border-radius: 0.375rem;  transition: background-color 0.15s ease; border: 0.5px solid var(--lightGray); font-size: 1rem; color: var(--white);}

/*===titulos de pagina===*/
.page-titles-container {
    right: 40px; /* Reducir el margen en móviles */
}

/*===bloque de submenus===*/
.submenu-hori{
    display: block; 
    position: absolute !important;
    /* Aplicamos la lógica de ocultamiento/expansión de móvil */
    max-height: 0; 
    overflow: hidden; 
    padding-bottom: 0 !important;
    transition: max-height 0.5s ease;
    z-index: 2000;
}
/*.menus ul li:hover .submenu {
    max-height: 300px; /* Abierto al hacer hover 
    padding-bottom: 10px !important;
}*/

.submenu li{ font-size:1rem ; }

/*===Dropdawn (secciones) para boton hamburguesa===*/
.block-none{
    display: block;
}
.block-cnone{
    display: none;
}

/* Fix para submenús superpuestos en menú hamburguesa (móvil/tablet) */
  .menuu .submenu,
  .menuu .subtxt,
  .menus .submenu,
  .menus .subtxt {
    position: static !important;
    width: 100% !important;
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s, opacity 0.3s;
    background: var(--white) !important;
    box-shadow: none !important;
    z-index: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Elimina cualquier transform heredado y propiedades de posicionamiento */
    transform: none !important;
    top: auto !important;
    left: auto !important;
    min-width: 0 !important;
    border-radius: 0.5rem;
  }
  .menuu li.open > .submenu,
  .menuu li.open > .subtxt,
  .menus li.open > .submenu,
  .menus li.open > .subtxt {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menuu .profile-img {
    display: none !important;
  }
  .menuu img, .menuu .profile-img, .menuu .img-profile, .menuu .avatar, .menuu .user-img {
    display: none !important;
  }
}

@media (max-width: 870px){

    /*===Cuerpo===*/
/*.app-wrapper{
    se sube para que el titulo no tenga tanto espacio entre el cuerpo
    transform: translateY(-30px); 
}*/
/*===titulos de pagina===*/
.page-titles-container {
    transform: translateY(-35px); 
}

/*===fondo seccion navbar===*/
.line-maintwo {
    width: 100%;
    height: 230px;
    background: linear-gradient(to left, #7a60ff, #cd9ffa);
}
.perfil-privado .banner-text{
    margin: 0 ;
}
.perfil-privado h3{
    margin: 0;
}
/*===Bloque con submenus del navbar===*/
.menu-toggle {
    display: block;
    position: fixed;
    top: 25px;
    left: 30px;
    z-index: 2000;
    background: none;
    border: none;
    font-size: 2rem;
    color: #fff;
    margin: 0;
    padding: 0;
}
.menus{
    position: fixed;
    top: 70px;
    padding-top: 10px;
    left: 10px;
    transition: max-height 0.4s ease;
    display: none;
    background: #cd9ffa;    
    color: var(--white);
    z-index: 2000 !important;
    border-radius: 14px;
    padding-bottom: 0;
}
.modal-backdrop {
    z-index: 2100 !important; /* Más alto que el header y el menu-toggle */
}

.modal {
    z-index: 2200 !important; /* Más alto que el backdrop */
}

#crearRegistroModal, #verDetalleRegistroModal {
    z-index: 6210 !important;
}

.menus.open{ display: flex;}
.menus ul{ flex-direction: column;  list-style-type: none;}
.menus >ul{ padding: 10px 20px 20px 0px; gap: 1px; display: flex; list-style: none; margin: 0;}
.menus > ul > li{ position: relative;}

/*.menus ul li:hover .submenu{ max-height: 300px; opacity: 1;}*/
.submenu a:hover{ color: var(--violet);}

/* degrade para el boton de hamburguesa del segundo navbar */
.ri-menu-2-line{
    filter: drop-shadow(2px 2px 2px rgb(39, 3, 75));
}
.submenu-hori{
    display: block;
    position:static !important;
    margin-bottom: 10px;
}
/* eliminacion de iconos */
.nav-item i{
    display: none;
}

}
/* ===DATATABLE=== */

/* --- (Botones inactivos) --- */
.pagi-perso .page-link {
    color: var(--dimViolet);              /* Color del texto (Gris oscuro) */
    background-color: var(--white);   /* Fondo (Blanco) */
    border-color: none;
}

/* --- (Cuando pasas el mouse) --- */
.pagi-perso .page-link:hover {
    color: var(--white);              /* Texto al pasar mouse (Blanco) */
    background-color: var(--lilac);   /* Fondo al pasar mouse (TU COLOR) */
    border-color: none;       /* Borde al pasar mouse (TU COLOR) */
}

/* --- ( página actual) --- */
.pagi-perso .page-item.active .page-link {
    background-color: var(--bluishViolet);   /* Fondo activo (TU COLOR) */
    border-color: none;       /* Borde activo (TU COLOR) */
    color: var(--white);              /* Texto activo (Blanco) */
}

/* --- (Botones flecha cuando no funcionan) --- */
.pagi-perso .page-item.disabled .page-link {
    color: var(--gray);              /* Texto gris claro */
    background-color: #f8f9fa;   /* Fondo gris muy claro */
    border-color: #dee2e6;
}
.txt-table{
    color:  var(--dimViolet);
}
/*========= AJUSTE DE TABLAS============*/
/* --- Titulos extensos de tabla 12-15 caracteres --- */
.text-truncate-custom {
    display: inline-block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* añade los "..." automáticamente */
    vertical-align: middle;
    cursor: pointer;
}
/* --- se visualizan 5 filas --- */
.table-box {
    height: auto !important;
    max-height: 400px !important; 
    overflow-y: auto !important;
    display: block !important; 
}
/* Estilo para el contenedor del Tooltip */
.custom-tooltip .tooltip-inner {
    background: #8875e7 !important; /* Forzamos el color oscuro */
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 0.85rem !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    opacity: 1 !important;
}
.custom-tooltip .tooltip-arrow::before {border-top-color: var(--bluishViolet) !important; /* Color de la flecha igual al fondo */}

/*=========REGISTRARSE============*/
/* Estilos para selección de rol */
.role-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.role-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: #7a60ffba; 
}
.button-ligth{
    color: var(--white);
    background: #d1a2ffe1;
    height: 100%;
}
.button-ligth:hover{
    color: var(--white);
    background: #c690fc;
}
#id_password1.is-valid,
#id_password2.is-valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
    background-image: none !important;
    padding-right: 2.5rem !important;
}
#id_password1.is-invalid,
#id_password2.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-image: none !important;
    padding-right: 2.5rem !important;
}

@media (max-width: 530px) {
    /* Ajuste del contenedor padre para dar más espacio */
    .menu-toggle-first {
        height: auto !important; /* Que crezca según el contenido */
        padding: 15px 20px !important; /* Reducimos padding lateral para evitar el amontonamiento */
        flex-direction: column !important; /* Fuerza el diseño vertical */
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .blok-tittle-mobile {
        display: flex;
        flex-wrap: wrap; /* Permite las dos filas */
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 8px; /* Espacio entre imagen y texto */
    }

    /* Primera fila: TERAPEUTAS */
    .txt-t {
        flex: 0 0 100%; /* Ocupa todo el ancho */
        text-align: center;
        font-size: 1.4rem !important; /* Un poco más grande para que destaque */
        margin-bottom: 5px !important;
    }

    /* Segunda fila: Imagen + CHILE */
    .logo-mobile {
        width: 35px !important;
        height: 35px !important;
    }

    .txt-c {
        font-size: 1.4rem !important;
        margin: 0 !important;
    }

    /* Posicionamiento del botón Hamburguesa */
    .mobile-menu-btn {
        position: absolute !important;
        transform: translateY(-50%) !important;
        font-size: 2rem !important;
    }
    
}

/*=========SCROLL============*/
#edit-form-container, #notificaciones {
    scroll-margin-top: 300px; 
}
#home {
    scroll-margin-top: 300px; 
}
#about, #features, #team, #contact{
    scroll-margin-top: 110px; 
}
/* --- ESTILO DE LAS TABS (Pestañas) --- */
.nav-tabs {
    border-bottom: 1px solid var(--lightGray); /* Borde violeta suave debajo de todas */
}

.nav-tabs .nav-link {
    color: var(--darckViolet);
    border: 1px solid var(--lightGray);
    margin-right: 5px;
    background-color: transparent;
    transition: all 0.3s ease;
    margin-top: 5px;
}
.nav-tabs .nav-link:hover{
    border: 1px solid (--lilac);
    background: var(--lilac);
    color: var(--white);
}
/* Tab seleccionada: Violeta con letra blanca */
.nav-tabs .nav-link.active {
    background-color: var(--lilac) !important;
    color: white !important;
    border-color: var(--lilac)!important;
}

/* --- ESTILO DE LA TABLA COMPACTA --- */
#tabl .table {border: 0.5px solid #c1b5ce !important; vertical-align: middle; border-collapse: separate !important; border-spacing: 0;}
#tabl .table thead th {border: 0.5px solid #c1b5ce !important; vertical-align: middle;}
#tabl .table tbody td {border: 0.5px solid #c1b5ce !important; vertical-align: middle;}
#tabl .table tbody td {
    padding: 2px 5px;
    line-height: 1.1 !important;    /* Texto más apretado */
    height: 40px; /* Truco de CSS: la fila se ajustará al contenido mínimo */
}
.td-color{
    background-color: #9e85b923 !important;
}
#tabl .form-check-input, 
#tabl input[type="radio"] {
    width: 14px;
    height: 14px;
    margin: 0;
    vertical-align: middle;
}

/* Texto verticalmente */
.texto-vertical-container {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: right;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
}
.texto-vertical-container p {
    margin: 0;
    white-space: nowrap;
    line-height: 1.2;
    text-align: left; 
}
.rotate-text {
    height: 200px !important; /* Altura total para que nada se corte */
    vertical-align: bottom !important;
    padding-bottom: 15px !important;
    border: 1px solid #6f42c1 !important;
}
.numero-fijo {
    /* IMPORTANTE: Para que el número se disruptions recto, debe cancelar la rotación del padre */
    transform: rotate(-360deg); 
    display: inline-block;
    font-size: 1.1rem;
    margin-top: 10px; /* Espacio entre número y texto */
    font-weight: bold;
}
/* Número en posición normal */
.numero-fijo {
    display: block;
    font-weight: bold;
    
    font-size: 0.9rem;
    text-align: center;
}

/* Contenedor que realiza la rotación */
.texto-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* Rota para que se lea de abajo hacia arriba */
    text-align: left;
    margin: 0 auto;
    height: 120px; /* Ajusta según el largo de "La mitad del tiempo" */
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    justify-content: flex-start;
    margin-bottom: 5px;
}

.texto-vertical p {
    margin: 0;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}
/* Forzar que la tabla no colapse los bordes de forma que oculte tus colores */



/* Cuadrantes con color forzado (Truco del box-shadow para ganar a Bootstrap) */
.sect-sn { box-shadow: inset 0 0 0 999px #88b855c7 !important; color: white !important; font-weight: bold; }
.sect-sn-mid {box-shadow: inset 0 0 0 999px #88b85541 !important; color: black !important;}
.sect-av { box-shadow: inset 0 0 0 999px #4473c4c2 !important; color: white !important; font-weight: bold; }
.sect-av-mid {box-shadow: inset 0 0 0 999px #4473c43a !important; color: black !important;}
.sect-rg { box-shadow: inset 0 0 0 999px #e04b4bc7 !important; color: white !important; font-weight: bold; }
.sect-rg-mid {box-shadow: inset 0 0 0 999px #e04b4b2a !important; color: black !important;}
.sect-sk { box-shadow: inset 0 0 0 999px #e9ad3eef !important; color: white !important; font-weight: bold; }
.sect-sk-mid {box-shadow: inset 0 0 0 999px #e9ad3e38 !important; color: black !important;}
.sect-vl { box-shadow: inset 0 0 0 999px #c399ec !important; color: white !important; font-weight: bold;  }
.sect-vl-mid {box-shadow: inset 0 0 0 999px #cc9ffa3b !important; color: black !important;}

/* Contenedor fijo para los botones */
.floating-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    display: flex;
    gap: 10px;
    
}


/* Estilo para el botón Siguiente/Guardar (Verde según imagen) */
.btn-geo-success, .btn-regresar {
    background-color: var(--bluishViolet) !important;
    border: none !important;
    color: white !important;
    font-weight: bold;opacity: 1 !important;
}



.table-custom td, .table-custom th {
    text-align: center;
    vertical-align: middle;
    border: 1px solid #dee2e6;
}

#tab_sn .table thead th, #tab_sn .table tbody td, #tab_sn .table tfoot td {border: 0.5px solid #88b855c7 !important; vertical-align: middle;}
#tab_av .table thead th, #tab_av .table tbody td, #tab_av .table tfoot td {border: 0.5px solid #4473c4c2 !important; vertical-align: middle;}
#tab_rg .table thead th, #tab_rg .table tbody td, #tab_rg .table tfoot td {border: 0.5px solid #e04b4bc7 !important; vertical-align: middle;}
#tab_sk .table thead th, #tab_sk .table tbody td, #tab_sk .table tfoot td {border: 0.5px solid #e9ad3eef !important; vertical-align: middle;}
.num-span {
    background: var(--lilac);
    color: var(--white);
    width: 40px;  /* Tamaño fijo para que no rompa el recuadro */
    height: 40px;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Evita que se aplaste si el texto es largo */
}

/* Evita que el texto largo rompa la tarjeta */
@media (max-width: 991px) {
    .num-span {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* Quitamos el borde negro de todas las celdas editables */
.editable-cell:focus, 
.table-bord:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Opcional: un toque sutil para que el usuario sepa dónde está escribiendo */
.editable-cell:focus {
    background-color: #9e85b923; /* Un tinte muy leve del azul de tu tema */
}
.tam-table {
    /* Obliga a la tabla a medir al menos 1000px de ancho en pantallas chicas */
    min-width: 1000px !important; 
    /* Permite que las celdas se expandan según el texto */
    table-layout: auto !important; 
    width: 100% !important;
}

/* Asegura que el contenedor tenga el scroll activo */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* Suavidad en iPhone/Safari */
    margin-bottom: 1rem;
}
.editable-cell{
    /* Permite que el texto salte de línea */
    white-space: normal !important;
    word-wrap: normal;
    overflow-wrap: break-word;
    
    /* Evita que la celda colapse si está vacía */
    min-width: 100px; 
    min-height: 30px;
    
    /* Control opcional para que no sea infinita hacia abajo */
    max-width: 250px; 
}
/* placeholder para la tabla editable */
/*.editable-cell[contenteditable="true"]:empty:before {
    content: attr(data-placeholder);
    color: #adb5bd; 
    cursor: text;
}*/

/* ajustamos la posicion de los botones "informe y crear registro" */
@media (min-width: 740px) {
    /* Forzamos al contenedor principal a usar todo el ancho */
    .card-header .d-flex.flex-column.flex-sm-row {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Empujamos los botones a la derecha y eliminamos márgenes de Bootstrap */
    .card-header .d-flex.flex-wrap.justify-content-end {
        margin-left: auto !important;
        margin-right: 0 !important;
        width: auto !important; /* Evita que el contenedor de botones se expanda de más */
    }
    
    /* Si el título tiene márgenes que estorban, los reseteamos */
    .card-header h4 {
        margin-right: 20px !important;
    }
}
@media (max-width: 575px) {
    /* Forzamos al contenedor principal a usar todo el ancho */
    .card-header .d-flex.flex-column.flex-sm-row {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Empujamos los botones a la derecha y eliminamos márgenes de Bootstrap */
    .card-header .d-flex.flex-wrap.justify-content-end {
        margin-left: auto !important;
        margin-right: 0 !important;
        width: auto !important; /* Evita que el contenedor de botones se expanda de más */
    }
    
    /* Si el título tiene márgenes que estorban, los reseteamos */
    .card-header h4 {
        margin-right: 20px !important;
    }
}
/* Fix para submenús superpuestos */
.submenu, .subtxt {
  /* Solo transición y visibilidad globalmente */
  transition: max-height 0.3s, opacity 0.3s;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  /* Eliminar position/layout global para no afectar escritorio */
}
li.open > .submenu,
li.open > .subtxt {
  max-height: 300px;
  opacity: 1;
  visibility: visible;
}

/* Modales de previsualización de imágenes - z-index específicos */
#modalImagenPerfilProfesional,
#modalFirmaProfesional,
#modalImagenPerfilInstitucion,
#modalFirmaInstitucion,
#modalImagenPerfilApoderado {
    z-index: 2500 !important; /* Más alto que todo */
}

/* Backdrop de los modales de imagen debe estar debajo del modal */
.modal-backdrop.show {
    z-index: 2100 !important; /* Por defecto debajo de otros modales */
}

body.modal-open #modalImagenPerfilProfesional ~ .modal-backdrop,
body.modal-open #modalFirmaProfesional ~ .modal-backdrop,
body.modal-open #modalImagenPerfilInstitucion ~ .modal-backdrop,
body.modal-open #modalFirmaInstitucion ~ .modal-backdrop,
body.modal-open #modalImagenPerfilApoderado ~ .modal-backdrop {
    z-index: 2400 !important; /* Backdrop debajo del modal pero encima del resto */
}

/* Tamaño botones */
.btn-exterior {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 15px;
    background-color: var(--bluishViolet);
    color: var(--white);
    border: none;
    border-radius: 1.8rem;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.btn-exterior:hover {
    background-color: var(--darckViolet);
    color: var(--white);
}

.btn-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding: 0 15px;
    background-color: var(--bluishViolet);
    color: var(--white);
    border: none;
    border-radius: 1.8rem;
    font-size: 16px;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.btn-accion:hover {
    background-color: var(--darckViolet);
    color: var(--white);
}

/* Ajuste para móviles */
@media (max-width: 575px) {
    .btn-exterior {
        height: 35px;
        padding: 0 12px;
        font-size: 14px;
    }
    .btn-accion {
        height: 32px;
        padding: 0 10px;
        font-size: 16px;
    }
}