@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova_regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova_medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@supports (scrollbar-width: auto) {
    html {
        scrollbar-color: var(--color-contraste) transparent;
    }
}
* {
    transition: background-color 0.15s cubic-bezier(0.23, 1, 0.320, 1), color 0.15s cubic-bezier(0.23, 1, 0.320, 1), border-color 0.15s cubic-bezier(0.23, 1, 0.320, 1), box-shadow 0.15s cubic-bezier(0.23, 1, 0.320, 1), fill 0.15s cubic-bezier(0.23, 1, 0.320, 1), stroke 0.15s cubic-bezier(0.23, 1, 0.320, 1);
}
:root{
    --font: Proxima Nova,-apple-system,Roboto,Arial,sans-serif;
    --fuente-secundaria: Arial, Helvetica, sans-serif;
    --color-text: rgba(0,0,0,.9);
    --color-secundario: #fff;
    --color-terciario: 0, 158, 227;
    --color-extra: #0000001a;
    --color-contraste: #e8e8e8;
    --fondo-button: #009ee3;
    --fondo-input: #fff;
    --fondo-input-2: #f5f5f5;
    --redondeo-esquinas: .375em;
    --redondeo-esquinas-2: .25em;
    --subtitulos-size: 14px;
    --espaciado: 1rem;
    --espaciado-2: 8px;
    --espaciado-inputs: 1rem;
    --espaciado-inputs-2: 8px;
    --espaciado-medio: .5rem;
    --input-height: 50px;
    --input-text-size: 16px;
    --input-text-size-2: 14px;
    --box-shadow: 0 1px 2px 0 rgba(0,0,0,.12);
    --input-border: 0 1px 2px 0 rgba(0,0,0,.12);
    --input-border-1: 0px 0px 0px 1px rgba(0, 0, 0, .14);
    --input-border-2: none;
    --input-border-3: var(--box-shadow), 0 6px 16px 0 rgba(0,0,0,.1);
    --padding-contenedor: 32px;
    --padding-contenedor-2: 16px;
}
html{
    scrollbar-width: thin;
}

a{
    all: unset;
    cursor: pointer;
}
body{
    margin:0;
    min-height: calc(100vh - 64px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font);
    background-color: rgba(0, 0, 0, 0.7);
    transition: all .15s cubic-bezier(0.23, 1, 0.320, 1);
}
.menu-principal{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: start;
    margin: 40px 40px 0px 40px;
    margin-left: 93px !important;
    gap: 24px;
    width: 100%;
    transition: all .15s cubic-bezier(0.23, 1, 0.320, 1);
}

.menu-grande{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    min-width: 53px;
    min-height: calc(100vh - 64px);
    /* height: 100%; */
    background-color: white;
    border-right: 1px solid rgba(0,0,0,.1);
    box-sizing: border-box;
    /* padding-top: 12px; */
    position: fixed;
    z-index: 4;
    overflow: hidden;
    transition: all .35s cubic-bezier(0.23, 1, 0.320, 1);
}
.menu-grande a, .menu-grande .linea-divisoria-2{
    width: 100%;
}
.a-noselect:hover{
    background-color: transparent !important;
}
#listado_pacientes:focus{
    background-color: #fff;
}
.opciones-menu-bottom{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    box-sizing: border-box;
    /* padding-bottom: 12px; */
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.opciones-menu-bottom a{
    width: 100%;
}
.opcion-menu{
    padding: 11px 0;
    padding-left: 14px;
    position: relative;
    cursor: pointer;
    transition: all .35s cubic-bezier(0.23, 1, 0.320, 1);
}
.opcion-menu-seleccionada{
    border-left: 4px solid #009DE2;
    padding-left: 10px;
    color: #009DE2;
}
.opcion-menu:hover, .user-section:hover, .menu-section:hover{
    background-color: rgba(0,0,0,.04);
    cursor: pointer;
}
.opcion-menu-seleccionada p, .opcion-menu-seleccionada svg, .eliminar-familiar{
    color: #009DE2;
    fill: #009DE2;
    font-weight:500;
}
.opcion-menu-seleccionada .svg-icon-menu-alternative{
    stroke: #009DE2;
}

h1 {
    font-size: 2rem;
    line-height: 25px;
    font-weight: 600;
    color: var(--color-text);
    transition: all .2s ease;
}

/*Fondo pantalla de carga*/
.opacador {
    /*Posicionamiento*/
    background: hsla(0,0%,100%,.92);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;

    /*Ocultar temporalmente*/
    opacity: 0;
    pointer-events: none;

    /*Interacción con objetos hijos*/
    display: flex;
    justify-content: center;
    align-items: center;

    /*Transición*/
    transition: all .2s cubic-bezier(0.23, 1, 0.320, 1);
}
.opacador-full{
    position: fixed;
}
.opacador-open{
    opacity: 1;
    pointer-events: all;
}
.opacador-open-blur{
    backdrop-filter: blur(4px);
    opacity: 1;
    background-color: #151b2396 !important;
    pointer-events: all;
    position: fixed;
}

/*Iconos pantalla de carga*/
.loading-animation{
    position: absolute;
    width: 60px;
    opacity: 0;
    stroke: #009DE2;

    /*Transición*/
    transition: all .2s cubic-bezier(0.23, 1, 0.320, 1);
}
.opacador stop{
    stop-color: #009DE2;
}
.loading-animation-open{
    width: 90px;
    opacity: 1;
}
.opacador .loading-animation, .ready-icon{
    stroke: rgba(var(--color-terciario),1);
}
.ready-icon{
    position: absolute;
    width: 80px;
    opacity: 0;
    transition: all .1s cubic-bezier(0.23, 1, 0.320, 1);
}
.ready-icon-open{
    width: 93px;
    opacity: 1;
}

/*Iconos*/
.svg-icon-menu-alternative{
    stroke: black;
}
.svg-button-icon{
    height: 2.2rem;
    width: 2.2rem;
    fill: white;
}
.svg-change-color{
    fill: #009DE2;
    max-height: 1.2rem;
    max-width: 1.2rem;
    min-height:1.2rem;
    min-width: 1.2rem;
}
.circulo-familiar{
    margin-bottom: 6px !important;
    width: 50px !important;
    height: 50px !important;
    box-sizing: border-box;
    padding: 3px;
    overflow: hidden;
    opacity: 1;
    border: none !important;
    box-shadow: 0px 0px 0px 1px rgba(var(--color-terciario),1) !important;
    transition: all .15s cubic-bezier(0.23, 1, 0.320, 1);
}

/*Botones*/
.iniciar_sesion_google:hover, .iniciar_sesion_google:focus{
    background-color: white !important;
}
.button-alternativo-2{
    background-color: #009ee340 !important;
    color: #009ee3 !important;
}
.button-add{
    background-color: #009ee3;
    color: #fff;
    border: none;
    padding: .8rem 1rem;
    border-radius: var(--redondeo-esquinas);
    cursor: pointer;
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 3.2rem;
    width: 12rem;
    box-sizing: border-box;
    text-align: center;
    text-wrap: nowrap;
    transition: all .2s ease;
}
.button-alternativo{
    background-color: rgba(71,154,209,.2);
    color: #009ee3;
}
.button-function{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    width: 100%;
}
.button-premium-ia {
    display: flex;
    cursor: pointer;
    font-weight: bold;
    text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
    background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
    background-size: 300%;
    color: #fff;
    border: none;
    opacity: 1;
    background-position: left center;
    box-shadow: var(--box-shadow), 0 6px 16px 0 rgba(0,0,0,.1);
    transition: all .5s cubic-bezier(0.23, 1, 0.320, 1) !important;
}
.button-premium-ia:hover {
  background-size: 320%;
  background-position: right center;
}
.button-premium-ia span {
    transition: all .5s cubic-bezier(0.23, 1, 0.320, 1) !important;
    opacity: 0;
}
.button-premium-ia:hover span {
    opacity: 1;
}
.button-premium-ia:hover svg {
    fill: #f09f33;
}
.button-premium-ia svg {
    min-width: 2.3rem;
    fill: #fff;
    transition: all .35s cubic-bezier(0.23, 1, 0.320, 1) !important;
}
.boton-s{
    text-wrap: nowrap;
    transition: all .15s cubic-bezier(0.23, 1, 0.320, 1);
}
.text-link:hover{
    color: rgba(var(--color-terciario),1) !important;
}
.bloquear-input{
    opacity: .8 !important;
    pointer-events: none !important;
}

/*Organizacion*/
.fila-datos{
    display: flex;
    justify-content: center;
    align-items: start;
    gap:var(--espaciado);
    width: 100%;
}
.fila-datos label, .fila label {
    font-family: var(--font);
    text-wrap: nowrap;
    color: var(--color-text);
    line-height: 18px;
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0 0 0 .4285714286em;
    user-select: none;
    transition: all .05s ease;
}
.fila-datos input:focus, .textarea-form:focus, .fila-datos select:focus, textarea:focus, .input-login:focus, .letra-seleccionada{
    box-shadow: 0px 0px 0px 1px rgba(var(--color-terciario),1);
    outline: none;
}
textarea, .text-button, .svg-carga-button{
    transition: all .15s cubic-bezier(0.23, 1, 0.320, 1) !important;
}
.panel-password{
    position: relative;
    width: 460px !important;
    /* padding: 2.5rem; */
    box-shadow: none !important;
    margin-bottom: 0;
}
.panel-password:hover{
    cursor: default;
    background-color: var(--fondo-input) !important;
}
.panel-familiar{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0 !important;
    width:min-content !important;
    max-width: 82px;
    min-width: 82px;
    position: relative;
    overflow: visible !important;
    width: 100% !important;
    background-color: #FEFEFE !important;
    cursor: default !important;
    box-shadow: inset 0px 0px 10px 3px #F9F7F7, 0px 0px 0px 1px #e8e8e8 !important;
}
.panel-ant{
    min-width: 100% !important;
}
.panel-antecedentes{
    min-width: 306px;
    width: 100% !important;
    max-width: 100%;
    max-height: 170px;
    text-wrap: nowrap;
    padding-bottom: 5px;
    margin-bottom:14px !important;
    overflow:visible;
    position:relative;
    transition: all .4s cubic-bezier(0.23, 1, 0.320, 1) !important;
}
.panel-flotante{
    min-width: 300px;
    width: auto !important;
    max-width: 480px;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: calc(50%);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 111;
}
.antecedente-disabled {
    filter: grayscale(1);
    opacity: .4;
    pointer-events: none;
    box-shadow: none !important;
}
.ocultar_antecedentes {
    margin-bottom: 0 !important;
    max-height: 0 !important;
    padding: 0px 16px !important;
    min-height: 0px;
    overflow: hidden;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}
.ocultar_nucleo_familiar {
    overflow: hidden;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}
.detalle-panel{
    position: absolute;
    z-index: 1;
    padding: 6px 8px !important;
    max-width: 250px;
    text-wrap: wrap;
    left: calc(100% + 21px);
    top: 50%;
    transform: translateY(-50%);
    width: max-content !important;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--box-shadow), 0px 0px 1px gray !important;
    transition: all .15s cubic-bezier(0.23, 1, 0.320, 1) !important;
}
.antecendete-opaco{
    opacity: .2 !important;
    filter: grayscale(1) blur(1px);
}
.panel-activo:hover .detalle-panel{
    opacity: 1 !important;
}
.touchable.descripcion-consulta:hover{
    background-color: transparent !important;
}
.descripcion-tratamiento{
    display: flex;
    align-items: center;
    gap: 9px;
    background-color: #FEFEFE !important;
    box-shadow: inset 0px 0px 10px 3px #F9F7F7, 0px 0px 0px 1px #e8e8e8 !important;
    border-radius: 6px;
    padding: 7px 12px;
}
.encuadrador{
    display: flex;
    justify-content: center;
    align-items: center;
}
.encuadrador .descripcion-familiar{
    position: absolute;
    color: rgba(var(--color-terciario), 1) !important;
    pointer-events: none;
    opacity: 0;
    transition: all .15s cubic-bezier(0.23, 1, 0.320, 1) !important;
}
.panel-figura{
    cursor: pointer !important;
}
.panel-figura:hover .descripcion-familiar{
    opacity: 1 !important;
}
.panel-figura:hover .circulo-familiar{
    opacity: 0 !important;
}
#panel_nucleo_familiar{
    cursor: grab;
    position: fixed;
    transition: background-color 0.15s cubic-bezier(0.23, 1, 0.320, 1),transform 0.15s cubic-bezier(0.23, 1, 0.320, 1), opacity 0.15s cubic-bezier(0.23, 1, 0.320, 1), box-shadow 0.3s cubic-bezier(0.23, 1, 0.320, 1), color 0.15s cubic-bezier(0.23, 1, 0.320, 1);
}
#panel_nucleo_familiar.panel-dragging{
    cursor: move;
    box-shadow: 0px 0px 0px 1px rgba(var(--color-terciario)), 0px 0px 6px 1px rgba(var(--color-terciario)) !important;
}
.panel-1.resaltar-panel{
    box-shadow: 0px 0px 0px 1px rgba(var(--color-terciario)), 0px 0px 6px 1px rgba(var(--color-terciario)) !important;
}

/*Animaciones fantasticas*/
.panel-changed{
    box-shadow: 0px 0px 2px 1px rgba(0, 159, 227, 0.295) !important;
}
.linea-changed{
    border-top: 1px solid rgba(0, 158, 227,.3) !important;
}
.letra-changed{
    color: rgba(0, 158, 227,.6) !important;
}
.pass_changed{
    background: linear-gradient(60deg,
    rgba(0, 158, 227, 0) 0%,
    rgba(0, 158, 227, 0.089) 10%,
    rgba(0, 158, 227, 1) 30%,
    rgba(0, 158, 227, 0) 50%,
    rgba(0, 158, 227, 0) 100%);
    background-size: 400% 100%;
    animation: mover-fondo 2s linear infinite;
    transform: scale(2);
}

@keyframes mover-fondo {
  0% {
    background-position: 77% 0%;
    opacity: 0;
  }
  35%{
    background-position: 47% 0%;
  }
  50% {
    background-position: 15% 0%;
    opacity: 1;
  }
  80% {
    background-position: -25% 0%;
  }
  100% {
    background-position: -40% 0%;
    opacity: 0;
  }
}

.ocultar{
    pointer-events: none !important;
    opacity: 0 !important;
    transition: all .15s cubic-bezier(0.23, 1, 0.320, 1) !important;
}
.ocultar_sobras{
    overflow: hidden !important;
}
.mostrar{
    pointer-events: all !important;
    opacity: 1 !important;
    transition: all .15s cubic-bezier(0.23, 1, 0.320, 1) !important;
}

/*Estilos menu lateral (para nada universales jaja)*/
.menu-texto-opcion{
    max-width: 0;
    opacity: 0;
    text-wrap: nowrap;
    transition: all .35s cubic-bezier(0.23, 1, 0.320, 1);
}
.fila-opcion-menu{
    gap: 0;
    transition: all .35s cubic-bezier(0.23, 1, 0.320, 1);
}

.menu-grande:hover{
    min-width: 255px !important;
}
.menu-grande:hover .opcion-menu{
    padding-left: 25px !important;
}
.menu-grande:hover .opcion-menu-seleccionada{
    padding-left: 22px !important;
}
.menu-grande:hover .fila{
    gap: 14px !important;
}
.menu-grande:hover .titulo-s{
    opacity: 1 !important;
    max-width: 130px !important;
}


/*Estilos para funciones IA*/
.input_ia:focus{
    box-shadow: 0px 0px 0px 1px rgba(206, 138, 33, 0.86) !important;
}
.mostrar-seccion{
    opacity: 1 !important;
    pointer-events: all !important;
}
.boton_cerrar_funcion_ia{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 .4rem !important;
}
#interacciones_farmacologicas_ia{
    overflow: hidden;
    max-width: 2.8rem;
    box-shadow: none;
    width: min-content;
    text-align: start;
    justify-content: start;
    height: 2.7rem;
    padding: 0 .3rem;
    font-size: 1.4rem;
    position: absolute;
    top: 7px;
    right: 7px;
    transition: all 0.15s cubic-bezier(0.23, 1, 0.320, 1);
}
#interacciones_farmacologicas_ia:hover{
    max-width: 23rem;
    padding: 0px .6rem;
}


/*Estilos resize window*/
.columna-general{
    flex-direction: row !important;
    gap: 18px;
    width: 100%;
}
@media(max-width: 1360px){
    .columna-general{
        flex-direction: column !important;
        gap: 0px !important;
        width: auto !important;
    }
}
@media(min-width:1360px){
    .columna-general .columna-contenedores:nth-of-type(2){
        position: sticky;
        top: 104px;
        max-width: 580px !important;
    }
    .enfermedad_actual_text{
        max-height: 170px;
        overflow: scroll;
    }
}

/*Seccion tutorial*/
.seccion_tuto{
    opacity: 1;
    pointer-events: all;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}
.ocultar_seccion_tuto{
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}
.resaltar-tuto {
    pointer-events: none !important;
    z-index: 71;
    transition: min-width 0.4s cubic-bezier(0.23, 1, 0.320, 1), opacity 0.4s cubic-bezier(0.23, 1, 0.320, 1), background-color 0.4s cubic-bezier(0.23, 1, 0.320, 1), color 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}
.menu-grande.hover-simulado{
    min-width: 255px !important;
}
.menu-grande.hover-simulado a{
    width: 100% !important;
}
.menu-grande.hover-simulado .opcion-menu{
    padding-left: 25px !important;
}
.menu-grande.hover-simulado .opcion-menu-seleccionada{
    padding-left: 20px !important;
}
.menu-grande.hover-simulado .fila{
    gap: 14px !important;
}
.menu-grande.hover-simulado .titulo-s{
    opacity: 1 !important;
    max-width: 130px !important;
}


/*Cambiar tamaño de texto*/
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(var(--color-terciario), 0.3);
  border-radius: 4px;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  background: rgba(var(--color-terciario), 0.3);
  border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--color-terciario), 1);
  margin-top: -4px; /* Alinear verticalmente */
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--color-terciario), 1);
  border: none;
  cursor: pointer;
}
.panel_enfermedad_actual:hover a.boton-s, .panel_datos_paciente:hover a.boton-s, #antecedentes_paciente_sector:hover a.boton-s, #panel_nucleo_familiar:hover a.boton-s{
    opacity: 1 !important;
}