:root {
    /*Colores*/
    --primario: rgb(19, 73, 125);
    --sombraClara: rgb(192, 192, 192, 0.07);
    --rojo: rgb(211, 47, 47);
    --verde: rgb(56, 142, 60);
    --dorado: rgb(250, 181, 5);
    --azul: rgb(24, 134, 185);
    --azul_oscuro: rgb(0, 70, 221);
    --rosa: rgb(0, 70, 221);
    --sociable: rgb(24, 134, 185, 0.7);
    --gris: rgb(0, 0, 0, 0.7);
    --diamante: rgb(207, 228, 238);
    --sombraPrimario: rgb(19, 73, 125, 0.2);
    --sombraDiamante: rgb(207, 228, 238, 0.25);
    --sombraVerde: rgb(56, 142, 60, 0.1);
    --marino:  #0D47A1; /* azul marino educado */


    --color_1:  #B00020; /* rojo peligro */
    --color_2:  #FF6D00; /* naranja amenaza activa */
    --color_3:  #FFD600; /* amarillo reacción agresiva */
    --color_4:  #AEEA00; /* lima energético/brusco */
    --color_5:  #1DE9B6; /* turquesa MÁS vivo (Teal A400) */ 
    --color_6:  #56B4E9; /* azul claro tímido */
    --color_7:  #D500F9; /* morado neón (Purple A400) */ 
    --color_8:  #0D47A1; /* azul marino educado */
    --color_9:  #00C853; /* verde súper vivo (Green A700) */
    --color_10: #FF4FB8; /* rosa amoroso */

    --sukhumvitset: "sukhumvitset";
    --monserrat_bold: "monserrat_bold";
    --roboto_bold: "roboto_bold";
    --lato_light: "lato_light";
    --lato: "lato";
}

@font-face {
    font-family: 'sukhumvitset';
    src: url('../fuentes/sukhumvitset.ttf') format('opentype');
    /* src: url('/vista/css/../fuentes/helveticaneue.ttf')  format('truetype'); */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'monserrat_bold';
    src: url('../fuentes/monserrat_bold.ttf') format('opentype');
    /* src: url('/vista/css/../fuentes/helveticaneue.ttf')  format('truetype'); */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'roboto_bold';
    src: url('../fuentes/roboto_bold.ttf') format('opentype');
    /* src: url('/vista/css/../fuentes/helveticaneue.ttf')  format('truetype'); */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'lato_light';
    src: url('../fuentes/lato_light.ttf') format('opentype');
    /* src: url('/vista/css/../fuentes/helveticaneue.ttf')  format('truetype'); */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'lato';
    src: url('../fuentes/lato.ttf') format('opentype');
    /* src: url('/vista/css/../fuentes/helveticaneue.ttf')  format('truetype'); */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: var(--lato_light);
    /* iOS */
    -moz-outline-style: none;
    outline-style: none;
    /* Firefox */
    outline: none;
    /* Todos los demás navegadores */
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow-y: scroll;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}

div {
    display: flex;
}

img {
    object-fit: contain;
}

input {
    border: none;
    outline: none;
}

#contenedor {
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    background: none;
    z-index: 1;
}

#capa_perfil {
    width: 700px;
    height: auto;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s;
}

#portada {
    width: 100%;
    height: 250px;
    min-height: 250px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}


#img_portada {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 1;
}

#foto_perfil {
    width: 205px;
    height: 205px;
    border-radius: 50%;
    z-index: 2;
    object-fit: cover;
}

#btn_galeria{
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    cursor: pointer;
    transition: all 0.5s;
    opacity: 0.8;
}

#btn_galeria:hover{
    transform: scale(1.001);
    opacity: 1;
}

#p_btn_galeria{
    width: auto;
    height: auto;
    font-size: 22px;
    color: var(--marino);
    font-family: var(--roboto_bold);
    margin-right: 11px;
}

#icono_btn_galeria{
    width: 25px;
    height: 25px;
}

#info {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    padding: 16px;
}

.div_dato {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#p_nombre {
    width: auto;
    height: auto;
    font-size: 43px;
    font-family: var(--roboto_bold);
    text-align: center;
}

#icono_animal {
    width: 43px;
    height: 43px;
    margin-left: 7px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
}

#p_tipo {
    width: 100%;
    height: auto;
    font-size: 30.4px;
    margin-top: 25px;
    text-align: center;
    font-family: var(--lato);
}

.sexo {
    font-family: var(--roboto_bold);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
}

.masculino {
    color: var(--rojo);
}

.femenino {
    color: var(--azul);
}

#p_edad {
    width: 100%;
    height: auto;
    font-size: 18px;
    text-align: center;
}

#div_temperamento {
    margin-top: 11px;
}

#div_color_temperamento {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
}

#p_temperamento {
    width: auto;
    height: auto;
    font-size: 22px;
    text-align: center;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
    margin-left: 11px;
}

.sociable {
    color: var(--sociable);
}

.color_sociable {
    background: var(--sociable);
}

#p_descripcion {
    width: 100%;
    max-width: 700px;
    height: auto;
    font-size: 20px;
    margin-top: 16px;
    text-align: center;
    font-family: var(--lato_light);
}

#div_salud {
    margin-top: 34px;
}

.icono_capa {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
}

.icono_salud {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
}

#p_salud {
    margin-left: 16px;
    font-size: 20px;
}

#div_vacunas {
    width: 280px;
    margin-top: 34px;
    padding: 11px;
    background: var(--diamante);
    border-radius: 25px;
    cursor: pointer;
    align-self: center;
    border: solid 0.5px var(--azul);
    opacity: 0.8;
    transition: all 0.7s;
}

#div_vacunas:hover {
    transform: scale(1.006);
    opacity: 1;
}

#btn_vacunas {
    margin-left: 16px;
    font-size: 20px;
    font-family: var(--roboto_bold);
    color: var(--azul);
    padding: 1.6px;
    border-bottom: solid 1px var(--azul);
}

#div_usuario {
    width: 100%;
    max-width: 520px;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 25px;
    border-radius: 16px;
    border: solid 1px var(--sombraDiamante);
    margin-top: 16px;
    margin-bottom: 34px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.07),
        0 4px 8px rgba(0, 0, 0, 0.05);
}

#div_foto_usuario {
    width: auto;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#foto_usuario {
    width: 93px;
    height: 93px;
    border-radius: 16px;
    border: solid 0.7px var(--sombraClara);
}

.titulo {
    width: 100%;
    height: auto;
    font-size: 25px;
    font-family: var(--roboto_bold);
    margin-top: 34px;
    text-align: center;
}

#datos_usuario {
    width: 100%;
    height: auto;
    flex-direction: column;
    margin-left: 11px;
}

#p_usuario {
    width: auto;
    height: auto;
    font-size: 22px;
    font-family: var(--monserrat_bold);
}

#div_telefono {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.div_info_usuario {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    margin-top: 16px;
    cursor: pointer;
}

.icono_usuario {
    width: 25px;
    height: 25px;
    pointer-events: none;
}

.p_usuario {
    width: 100%;
    height: auto;
    font-size: 16px;
    margin-left: 7px;
    pointer-events: none;
}

#p_telefono {
    color: var(--azul_oscuro);
}

#p_whatsapp {
    color: var(--verde);
}

#capa_cartilla {
    width: 100%;
    height: 100%;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    display: none;
    opacity: 0;
    z-index: 7;
}

.header_capa {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 11px;
    border-bottom: solid 1px var(--sombraDiamante);
}

#btn_volver_info {
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.titulo_capa {
    width: auto;
    height: auto;
    font-size: 25px;
    font-family: var(--monserrat_bold);
    color: var(--azul);
    margin-left: 11px;
    margin-right: 11px;
}

#titulo_galeria{
    color: #000000;
}

#div_fotos_cartilla {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
}

#cartilla_salud {
    width: 100%;
    height: 430px;
    object-fit: contain;
    background: #000000;
}

#div_slider {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: scroll;
    padding: 11px;
}

.div_img_slider.activo{
    outline: 2px solid var(--sombraClara);   /* o tu color */
    transform: scale(1.07);
    box-shadow:
        0 1px 2px rgb(13, 71, 161, 0.07),
        0 2px 3px rgba(13, 71, 161, 0.05);
}

.div_img_slider{
    width: 93px;
    height: 93px;
    border-radius: 11px;
    position: relative;
    border: solid 1px var(--sombraPrimario);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.07),
        0 2px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform .5s ease, outline-color .5s ease;
    margin-right: 16px;
}

.img_slider{
    width: 100%;
    height: 100%;
    border-radius: 11px;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.marca_agua {
    width: 70px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 7px;
    margin-top: 7px;
    opacity: 0.4;
    z-index: 7;
}

.footer {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    border-top: solid 1px var(--sombraClara);
    cursor: pointer;
}

#footer_galeria{
    margin-top: 70px;
}

.logo_footer {
    width: 43px;
    height: 43px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
}

.p_footer {
    width: auto;
    height: auto;
    font-size: 20px;
    font-family: var(--lato);
    color: var(--primario);
}

#capa_desaparecido {
    display: none;
    width: 100%;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 43px;
}

.caja_foto_desaparecido {
    width: 250px;
    height: 250px;
}

.foto_desaparecido {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: solid 1px var(--sombraClara);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
}

.caja_alerta {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 43px;
    flex-direction: column;
}

.icono_desaparecido {
    width: 93px;
    height: 93px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
}

#p_desaparecido {
    width: auto;
    height: auto;
    font-size: 34px;
    font-family: var(--roboto_bold);
    margin-top: 25px;
    color: var(--rojo);
    text-align: center;
}

#caja_ubicacion {
    width: auto;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 22px;
    border: solid 1px var(--sombraDiamante);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.07),
        0 2px 3px rgba(0, 0, 0, 0.05);
    margin-top: 43px;
    background: var(--sombraDiamante);
}

#p_ubicacion_desaparecido {
    width: auto;
    height: auto;
    font-size: 22px;
    font-family: var(--lato);
    color: var(--primario);
    text-align: center;
}

.icono_ubicacion_desaparecido {
    width: 77px;
    height: 77px;
    margin-top: 16px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
}

#p_evidencia {
    width: auto;
    height: auto;
    font-size: 22px;
    font-family: var(--lato);
    text-align: center;
    margin-top: 43px;
}

#mensaje_desaparecido {
    width: 520px;
    min-width: 520px;
    height: 160px;
    min-height: 160px;
    font-size: 20px;
    border: solid 1px var(--sombraPrimario);
    resize: none;
    margin-top: 25px;
    padding: 16px;
    border-radius: 16px;
}

.btn_foto {
    width: 250px;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 11px;
    border-radius: 16px;
    background: var(--sombraVerde);
    margin-top: 25px;
    cursor: pointer;
}

.icono_btn_foto {
    width: 25px;
    height: 25px;
}

.p_btn_foto {
    width: auto;
    height: auto;
    font-size: 16px;
    font-family: var(--monserrat_bold);
    color: var(--verde);
    margin-left: 25px;
}

#btn_continuar {
    width: 160px;
    height: auto;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-family: var(--roboto_bold);
    padding: 11px;
    border-radius: 11px;
    color: #ffffff;
    background: var(--rojo);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34));
    margin-top: 43px;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.5s;
}

#btn_continuar:hover{
    opacity: 1;
    transform: scale(1.002);
}

#capa_looki {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#logo_intro {
    width: 250px;
    height: 250px;
    opacity: 0;
    /* animación */
    animation: bounce_leve 1s infinite;
    transform-origin: center bottom;
    will-change: transform;
}

#logo_tipografia{
    width: 160px;
    height: auto;
    opacity: 0;
}

.capa{
    display: none;
    width: 100%;
    height: auto;
    flex-direction: column;
}

#capa_looki{
    display: flex;
}

#capa_galeria{
    width: 800px;
    justify-content: center;
    align-items: center;
}

#header_galeria{
    justify-content: center;
    align-items: center;
}

#div_fotos_galeria{
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 25px;
}

.btn_cerrar_galeria{
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 11px;
    margin-right: 11px;
    cursor: pointer;
    transition: all 0.7s;
    opacity: 0.8;
    z-index: 11;
}

#btn_cerrar_galeria:hover{
    opacity: 1;
    transform: scale(1.001);
}

.img_galeria{
    width: 250px;
    min-width: 250px;
    height: 250px;
    min-height: 250px;
    margin: 11px;
    border-radius: 11px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.07),
        0 4px 8px rgba(0, 0, 0, 0.05);
    object-fit: cover;
    cursor: pointer;
    transition: all 0.7s;
}

.img_galeria:hover{
    transform: scale(1.003);
}

#capa_imagen{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #000000;
    z-index: 93;
    opacity: 0;
}

#div_imagen{
    width: 100%;
    height: 100%;
    position: relative;
    flex-direction: column;
}

#imagen_zoom{
    width: 100%;
    height: 100%;
}

.negritas{
    font-family: var(--roboto_bold);
}

#btn_dar_permisos{
    width: auto;
    height: auto;
    font-size: 22px;
    font-family: var(--roboto_bold);
    color: var(--primario);
    margin-top: 25px;
    text-decoration: underline;
    visibility: hidden;
    cursor: pointer;
    text-align: center;
}

@keyframes bounce_leve {
    /* suelo */
    0% {
      transform: translateY(0) scaleX(1) scaleY(1);
      animation-timing-function: cubic-bezier(.15,.85,.25,1); /* sube lento */
    }
  
    /* pico (llega suave) */
    45% {
      transform: translateY(-18px) scaleX(.98) scaleY(1.02);
      animation-timing-function: cubic-bezier(.75,0,.85,.35); /* cae lento */
    }
  
    /* regresa al suelo */
    90% {
      transform: translateY(0) scaleX(1.03) scaleY(.97);
      animation-timing-function: cubic-bezier(.2,.7,.35,1); /* rebote corto */
    }
  
    /* estabiliza */
    100% {
      transform: translateY(0) scaleX(1) scaleY(1);
    }
  }
  

@media screen and (max-width:550px) {
    #capa_desaparecido {
        padding: 16px;
    }

    #mensaje_desaparecido {
        width: 100%;
        min-width: auto;
    }

    #p_evidencia {
        font-size: 16px;
    }
}