@charset "UTF-8";
/*La regla @charset debe ser lo primero que se indique en una hoja de estilo, no puede existir ning�n car�cter previo, ni siquiera comentarios.*/

/*#region Name*/
/*#endregion*/
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0;
}

/*La propiedad overscroll-behavior con el valor none deshabilita el comportamiento de desplazamiento excesivo, que incluye el "pull-to-refresh" en navegadores móviles. Evita el refresco al desplazar el dedo*/
body {
    overscroll-behavior: none;
}

/* Archivo CSS */
.visible-en-grandes-pantallas {
    display: none; /* Oculto por defecto */
}

@media (min-width: 1024px) {
    .visible-en-grandes-pantallas {
        display: block; /* Visible en pantallas grandes */
    }
}

.validacion-mensaje {
    font-size: xx-small;
    color: red; 
}

/*Estilo para los botones de Telerik tamaño: t_sm t_md t_lg t_xl t_xxl */
.tlk-btn{
    height: 28px;
    justify-content: center; /* Centrado horizontal */
    align-items: center;
}
    .tlk-btn.t-md {
        height: 35px;
    }

.texto-encabezado-pagina {
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    background: linear-gradient(90deg, #f8fafc 0%, #e3e6ea 100%);
    /*border-radius: 12px;*/
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.08);
    /* padding: 1rem 2rem;*/
    /*margin-bottom: 1.5rem;*/
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(44, 62, 80, 0.08);
    /*Linea horizontal superior e inferior*/
    border-top: 2px solid #5c6bc0;
    border-bottom: 2px solid #5c6bc0;
}

/*estilo empleado para el texto situado encima de los componentes telerik*/
.telerik-span-muted {
    color: gray;
    font-size: smaller;
}

.texto_fichero_adjunto {
    background-color: #E0F7FA;
    color: #00796B;
    padding: 3px;
    border-radius: 5px;
    display: inline-block;
    margin: 2px 0;
    border: 2px solid #B2EBF2;
    font-weight: bold;
    font-size: 0.85em;
}

/*Estilo de texto elegante empleada en */
.titulo_elegante {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 32px; /* Ajustado a 32px */
    padding: 28px 18px; /* Ajustado proporcionalmente */
    text-align: center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
}

    .titulo_elegante.eleganteshadow {
        color: #131313;
        background-color: #e7e5e4;
        letter-spacing: 0.15em;
        text-shadow: 0.35px -0.35px 0 #767676, -0.35px 0.7px 0.35px #737272, -0.7px 1.4px 0.35px #767474, -1.05px 2.1px 0.35px #787777, -1.4px 2.8px 0.35px #7b7a7a, -1.75px 3.5px 0.35px #7f7d7d, -2.1px 4.2px 0.35px #828181, -2.45px 4.9px 0.35px #868585, -2.8px 5.6px 0.35px #8b8a89, -3.15px 6.3px 0.35px #8f8e8d, -3.5px 7px 0.35px #949392, -3.85px 7.7px 0.35px #999897, -4.2px 8.4px 0.35px #9e9c9c, -4.55px 9.1px 0.35px #a3a1a1, -4.9px 9.8px 0.35px #a8a6a6, -5.25px 10.5px 0.35px #adabab, -5.6px 11.2px 0.35px #b2b1b0, -5.95px 11.9px 0.35px #b7b6b5, -6.3px 12.6px 0.35px #bcbbba, -6.65px 13.3px 0.35px #c1bfbf, -7px 14px 0.35px #c6c4c4, -7.35px 14.7px 0.35px #cbc9c8, -7.7px 15.4px 0.35px #cfcdcd, -8.05px 16.1px 0.35px #d4d2d1, -8.4px 16.8px 0.35px #d8d6d5, -8.75px 17.5px 0.35px #dbdad9, -9.1px 18.2px 0.35px #dfdddc, -9.45px 18.9px 0.35px #e2e0df, -9.8px 19.6px 0.35px #e4e3e2;
    }

/*#region Escalar imagen a tamaño real*/
.imagen-escalar {
    transition: max-height 0.3s ease;
}

    .imagen-escalar:hover {
        max-height: none;
        transform: scale(3.25);
        /*transform: scale(1.75);*/
    }

/* Escalado para pantallas pequeñas (móviles/tablets) */
@media (max-width: 767px) {
    .imagen-escalar:hover {
        transform: scale(1.75); /* Escalado menor para móvil */
    }
}

/*#endregion*/

.cursor-pointer {
    cursor: pointer;
}

.colorFondoPredeterminado {
    /*background: linear-gradient(0deg, #c2c2c2 0%, #ffffff 100%);*/
    background: rgb(222,222,222);
    background: linear-gradient(90deg, rgba(222,222,222,1) 0%, rgba(252,252,252,1) 47%, rgba(222,222,222,1) 100%);
    border-radius: 10px;
}

/*#region contenido Flex, el contenido no se distribuye si no cabe en la fila, por tanto, ocupa toda la fila*/
.contenedor_no_flex {
    position: relative;
    display: flex; /*Contenedor flexible, distribuye los componentes de forma flexible*/
    flex-direction: row; /*Row distribución horizontal del contenido. column distribución vertical del contenido*/
    flex-wrap: nowrap; /*Si el ancho del contenedor es inferior a la suma de los elementos que contiene, permite que estos se situen en filas por debajo*/
    width: fit-content; /*Ajusta el ancho al contenido*/
    height: fit-content;
    gap: 5px;
    /*background: steelblue; */
}
/*#endregion*/

.absoluta_centrado {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*#region contenido Flex, el ancho del contenedor se ajusta al contenido de los elementos*/
.contenedor_flex_fit_content {
    display: flex; /*Contenedor flexible, distribuye los componentes de forma flexible*/
    flex-direction: row; /*Row distribución horizontal del contenido. column distribución vertical del contenido*/
    flex-wrap: wrap; /*Si el ancho del contenedor es inferior a la suma de los elementos que contiene, permite que estos se situen en filas por debajo*/
    width: fit-content; /*Ajusta el ancho al contenido*/
    height: fit-content;
    gap: 4px;
    /*background: steelblue; */
}
/*#endregion*/

/*#region contenido Flex, el ancho del contenedor ocupa toda la fila*/
.contenedor_flex {
    display: flex; /*Contenedor flexible, distribuye los componentes de forma flexible*/
    flex-direction: row; /*Row distribución horizontal del contenido. column distribución vertical del contenido*/
    flex-wrap: wrap; /*Si el ancho del contenedor es inferior a la suma de los elementos que contiene, permite que estos se situen en filas por debajo*/
    gap: 4px; /*ancho de separación entre los elementos*/
    /*justify-content: space-between;*/ /*El espacio horizontal se distribuye de forma uniforme entre los elementos*/
}

.elemento_flex {
    flex-grow: 1; /*La flex-growpropiedad especifica cuánto crecerá un elemento flexible en relación con el resto de elementos flexibles*/
}
/*#endregion*/


/*#region Modal Tooltip, simula una ventana emergente en medio de la pantalla con posibilidad de cierre (util versión móvil) y funciona como un tooltip cuando el raton deja de estar encima del componente*/

/* Mostrar cuando el elemento padre tiene el hover */
.Padre_Modal_Tooltip:hover div.Modal_Tooltip {
    display: block;
}

/* Oculto por defecto */
.Modal_Tooltip {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo para que ocupe toda la ventana */
    top: 50%; /* Posición en el centro vertical */
    left: 50%; /* Posición en el centro horizontal */
    transform: translate(-50%, -50%); /* Trasladar para centrar */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    background-color: rgba(0, 0, 0, 0.88); /* Fondo semitransparente */
    color: white; /* Color del texto */
    padding: 1rem; /* Espaciado interno */
    border-radius: 10px; /* Esquinas redondeadas */
    /*border: black 2px solid;*/
    overflow-y: auto; /* Scrollbar vertical automático */
}

    .Modal_Tooltip.resolucion {
        width: 65vw; /* Ancho del tooltip */
        /*height: 60vh;*/ /* Alto del tooltip */
        height: auto; /* Ajusta la altura al contenido */
        max-height: 60vh; /* Altura máxima del contenido */
    }

    .Modal_Tooltip.visible {
        display: block; /* Visible cuando se agrega la clase 'visible' */
    }
/* Media query para definir estilos de móvil o tablet. Max-width Si el dispositivo tiene un tamaño de ancho menor a resolución HD (1280px) */
@media (max-width: 1279px) {
    .Modal_Tooltip.resolucion {
        width: 100vw; /* Ancho del tooltip */
        height: auto; /* Ajusta la altura al contenido */
        max-height: 70vh; /* Altura máxima del contenido */
    }
}
/*#endregion*/

/*#region Tooltip tabla*/
/*Fijate que la pseudoclase es sobre el estado del elemento padre (selectores anidados) por tanto se aplica en el selector anidado cuando cambia el estado del padre (estado raton encima)*/
.tooltip-datosplantilla-container:hover .tooltip-datosplantilla-text {
    visibility: visible;
   /* opacity: 0.9;*/
}

.tooltip-datosplantilla-text {
    position: absolute;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    visibility: hidden;
    width: fit-content;
    height: fit-content;
    background-color: #ffc107;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    z-index: 11;
    top: calc(50%);
    left: calc(30%);
    transition: opacity 0.3s;
}

/*#endregion*/

/*#region Estilo para la barra cargando*/
.loading-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    border: 4px solid rgba(40, 84, 197, 0.14);
    border-top-color: #2854c5;
    border-right-color: #2854c5;
    border-radius: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    animation: loading-circle 0.8s linear infinite;
}

    .loading-bar::after {
        content: '';
        position: absolute;
        inset: 7px;
        border: 3px solid transparent;
        border-bottom-color: #58a6ff;
        border-left-color: #58a6ff;
        border-radius: 50%;
        animation: loading-circle-reverse 0.65s linear infinite;
    }

@keyframes loading-circle {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes loading-circle-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-bar,
    .loading-bar::after {
        animation-duration: 1.6s;
    }
}
/*#endregion*/


/*#region Ventana Modal con fondo gris, se trata de un selector css tipo atributo*/
.ventanaModal {
    position: fixed; /*Atención, utilizaré fixed ya que necesito que las ventanas modales, tenga siempre la altura de la ventana del navegador. 
                      position: fixed: Un elemento con position:fixed está fijo respecto a la ventana. Se mantiene donde está aunque se desplace el documento. 
                      position: absolute: Los elementos posicionados absolutamente lo están respecto a un bloque contenedor, que es el antepasado posicionado más próximo*/
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    box-sizing: border-box;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.ventanaModal .contenido {
    box-sizing: border-box;
    max-width: 100vw;
}

/* Si el dispositivo tiene un tamaño de ancho >= a la resolución */
@media (min-width: 1280px) {
    /* Contenido de la ventana Modal*/
    .ventanaModal .contenido {
        overflow-y: scroll;
        background-color: #ffffff;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 92%;
        max-width: 1600px;
        height: 100%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    /*El ancho de la ventana modal ocupa el 80%*/
    /*    modal-dialog-width {
        max-width: 80% !important;
        margin: auto !important;        
    }*/
}

/* Si el dispositivo tiene un tamaño de ancho <= a la resolución (podria ser un dispositivo movil o tablet)*/
@media (max-width: 1279px) {
    /* Contenido de la ventana Modal*/
    .ventanaModal .contenido {
        overflow-y: scroll;
        background-color: #ffffff;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 100vw;
        /*max-width: 1200px;*/
        height: 100dvh;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    /* Ajuste para que DatosServicio no quede oculto por las zonas no táctiles del navegador/sistema en móviles. */
    .ventanaModal-datos-servicio {
        --ventanaModalMargenSuperiorMovil: calc(env(safe-area-inset-top, 0px) + 0.0rem);
        --ventanaModalMargenInferiorMovil: calc(env(safe-area-inset-bottom, 0px) + 0.0rem);
        padding-top: var(--ventanaModalMargenSuperiorMovil);
        padding-bottom: var(--ventanaModalMargenInferiorMovil);
        overflow: hidden;
    }

    .ventanaModal-datos-servicio .contenido {
        height: calc(100dvh - var(--ventanaModalMargenSuperiorMovil) - var(--ventanaModalMargenInferiorMovil));
    }

    /*El ancho de la ventana modal ocupa el 100% para los dispositivos mas pequeños*/
/*    modal-dialog-width {
        max-width: 100% !important;        
    }*/
}


/*Boton de cierre*/
.ventanaModal-cierre {
    color: red;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .ventanaModal-cierre:hover,
    .ventanaModal-cierre:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}
/*#endregion*/

/*#region Estilo del boton con relive 3D para las unidades*/
.btn3d {
    position: relative;
    top: -6px;
    border: 0;
    transition: all 40ms linear;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 2px;
    margin-right: 2px;
}

    .btn3d:active:focus,
    .btn3d:focus:hover,
    .btn3d:focus {
        -moz-outline-style: none;
        outline: medium none;
    }

    .btn3d:active,
    .btn3d.active {
        top: 2px;
    }

    .btn3d.btn-white {
        color: #666666;
        box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #f5f5f5, 0 8px 8px 1px rgba(0, 0, 0, .2);
        background-color: #fff;
    }

        .btn3d.btn-white:active,
        .btn3d.btn-white.active {
            color: #666666;
            box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
            background-color: #fff;
        }

    .btn3d.btn-default {
        color: #666666;
        box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0, 0, 0, .2);
        background-color: #f9f9f9;
    }

        .btn3d.btn-default:active,
        .btn3d.btn-default.active {
            color: #666666;
            box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
            background-color: #f9f9f9;
        }

    .btn3d.btn-primary {
        box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
        background-color: #4274D7;
    }

        .btn3d.btn-primary:active,
        .btn3d.btn-primary.active {
            box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
            background-color: #4274D7;
        }

    .btn3d.btn-success {
        box-shadow: 0 0 0 1px #31c300 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #5eb924, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
        background-color: #78d739;
    }

        .btn3d.btn-success:active,
        .btn3d.btn-success.active {
            box-shadow: 0 0 0 1px #30cd00 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
            background-color: #78d739;
        }

    .btn3d.btn-info {
        box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
        background-color: #39B3D7;
    }

        .btn3d.btn-info:active,
        .btn3d.btn-info.active {
            box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
            background-color: #39B3D7;
        }

    .btn3d.btn-warning {
        box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #D79A34, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
        background-color: #FEAF20;
    }

        .btn3d.btn-warning:active,
        .btn3d.btn-warning.active {
            box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
            background-color: #FEAF20;
        }

    .btn3d.btn-danger {
        box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #AA0000, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
        background-color: #D73814;
    }

        .btn3d.btn-danger:active,
        .btn3d.btn-danger.active {
            box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
            background-color: #D73814;
        }

    .btn3d.btn-magick {
        color: #fff;
        box-shadow: 0 0 0 1px #9a00cd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #9823d5, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
        background-color: #bb39d7;
    }

        .btn3d.btn-magick:active,
        .btn3d.btn-magick.active {
            box-shadow: 0 0 0 1px #9a00cd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
            background-color: #bb39d7;
        }
/*#endregion*/

/*#region Efecto para las imagenes*/
.imagenGiro:hover {
    -webkit-transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
}

.imagenGiroCirculo:hover {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    box-shadow: 0px 0px 15px 15px #ec731e;
    -webkit-box-shadow: 0px 0px 15px 15px #ec731e;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

.imagenOscurecer:hover {
    filter: grayscale(80%);
}

.imagenDesenfocar:hover {
    filter: blur(5px);
}

.contenedorImagen:hover .imagen {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.contenedorImagen {
    overflow: hidden;
}
/*#endregion*/

/*#region Efecto para la carga inicial de la aplicacion webassembly*/
#preloader_1 {
    position: relative;
}

    #preloader_1 span {
        display: block;
        bottom: 0px;
        width: 9px;
        height: 5px;
        background: #9b59b6;
        position: absolute;
        animation: preloader_1 1.5s infinite ease-in-out;
    }

        #preloader_1 span:nth-child(2) {
            left: 11px;
            animation-delay: .2s;
        }

        #preloader_1 span:nth-child(3) {
            left: 22px;
            animation-delay: .4s;
        }

        #preloader_1 span:nth-child(4) {
            left: 33px;
            animation-delay: .6s;
        }

        #preloader_1 span:nth-child(5) {
            left: 44px;
            animation-delay: .8s;
        }

@keyframes preloader_1 {
    0% {
        height: 5px;
        transform: translateY(0px);
        background: #9b59b6;
    }

    25% {
        height: 30px;
        transform: translateY(15px);
        background: #3498db;
    }

    50% {
        height: 5px;
        transform: translateY(0px);
        background: #9b59b6;
    }

    100% {
        height: 5px;
        transform: translateY(0px);
        background: #9b59b6;
    }
}
/*#endregion*/

/*#region Estilo personalizado para el boton subir fichero*/
.custom-input-file {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #007bff; /* Cambia este color según tu diseño */
    color: white;
    border: none;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
}

    .custom-input-file:hover {
        background-color: #0056b3; /* Color al pasar el ratón */
    }
/*#endregion*/

/*#region ICONO IA menú*/

/* CONTENEDOR */
.fab-ai-pro {
    position: relative;
}

/* BOTÓN */
.fab-content-pro {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Gradiente más intenso */
    background: linear-gradient(135deg, #7b2ff7, #00c6ff);
    color: white;
    font-size: 24px;
    /* Glow fuerte */
    box-shadow: 0 0 12px rgba(123, 47, 247, 0.7), 0 0 24px rgba(0, 198, 255, 0.6);
    transition: all 0.25s ease;
}

    /* HOVER MÁS REACTIVO */
    .fab-content-pro:hover {
        transform: scale(1.12) rotate(3deg);
        box-shadow: 0 0 18px rgba(123, 47, 247, 1), 0 0 30px rgba(0, 198, 255, 1);
    }

/* 🔥 AURA ANIMADA (esto es lo que lo hace brutal) */
.fab-ai-pro::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,198,255,0.4), transparent 70%);
    animation: auraPulse 2s infinite;
}

/* ✨ PULSO SUAVE */
@keyframes auraPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.2;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.6;
    }
}

/* 💥 MICRO REBOTE (atrae mirada) */
.fab-ai-pro {
    animation: bounceSoft 3s infinite;
}

@keyframes bounceSoft {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* 🟢 INDICADOR “VIVO” */
.fab-content-pro::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff88;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/*#endregion*/

/*#region Compatibilidad visual MAUI Blazor Hybrid
   Este bloque afecta a la presentación base del host HTML en MAUI Blazor Hybrid.
   - #blazor-error-ui define la barra de error global de Blazor, la mantiene oculta por defecto
     y fija su posición en la parte inferior para mostrar errores no controlados.
   - #blazor-error-ui .dismiss coloca el botón de cierre dentro de esa barra.
   - .status-bar-safe-area reserva el espacio seguro superior del dispositivo
     para evitar solapamientos con notch o barra de estado.
   - .safe-area-bottom reserva el espacio seguro inferior
     para evitar solapamientos con la zona de gestos o barra inferior.
*/

#app {
    height: 100%;
}

#blazor-error-ui {
    display: none;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.status-bar-safe-area {
    height: env(safe-area-inset-top);
    background-color: transparent;
}

.safe-area-bottom {
    height: env(safe-area-inset-bottom);
    background-color: transparent;
}

/*#endregion*/