@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
    font-family: 'Roboto', sans-serif;
    margin:0;
    padding:0;
    background:#f1f3f4;
}

body.landing header{
    display:none;
}

#view-landing{
    display:none;
    flex-direction:column;

    justify-content:flex-start;
    align-items:center;
    height:100vh;
    text-align:center;
    padding-top:5vh;

}
body.landing #view-landing{
    display:flex;
}

#landing-logo{
    width:80%;
    margin-bottom:20px;
    animation:heartbeat 1.5s infinite;
}

#welcome-message{
    max-width:90%;
    margin:20px auto;
    line-height:1.4;

    text-align:justify;
    text-justify:inter-word;

}

#btn-ingresar{
    width:auto;
    padding:10px 20px;
    margin-top:20px;
}

@keyframes heartbeat{
    0%,40%,80%,100%{transform:scale(1);}
    20%,60%{transform:scale(1.2);}
}

#background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
header{
    background:#fff;
    color:#000;
    padding:12px;

    text-align:left;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    display:flex;
    align-items:center;
}
#user-info {
    margin-left:auto;
    display:flex;
    align-items:center;
    font-weight:bold;
}
#cuidador-display {
    margin-bottom:8px;
    font-weight:bold;

    text-align:left;

}
#btn-cerrar-sesion {

    background:none;
    border:none;
    cursor:pointer;
    font-size:1.2em;
    color:#000;
}
#btn-cerrar-sesion:hover {
    transform:scale(1.1);
}
header img{
    height:80px;

}
.view{ display:none; padding:20px; max-width:600px; margin:0 auto; }
.view.active{ display:block; }
input,textarea,button,select{
    display:block;
    margin:10px 0;
    padding:8px;
    width:100%;
    box-sizing:border-box;
}
table{ width:100%; border-collapse:separate; border-spacing:1px; }
td,th{ background:white; border:1px solid #e0e0e0; padding:8px; text-align:center; }
th{ background:#f6f8f9; }
th:first-child, td:first-child{
    white-space:nowrap;
    width:1%;
}
tr:nth-child(even) td{ background:#fafafa; }
button{ background:#1a73e8; color:white; border:none; cursor:pointer; border-radius:4px; }
button:hover{ background:#1765c1; }

td.libre{
    background:#fff;
    color:#e53935;
    font-weight:bold;
    text-align:center;
    position:relative;
}
td.libre::before{
    content:'+';
    color:#e53935;
    font-size:1.2em;
}

.share-link a,
.share-link span{
    margin-left:8px;
    cursor:pointer;
    user-select:none;
}
.share-link a:first-child{
    margin-left:0;
}