:root {
    --bg-color: #F6FAFB;
    --white: #FFFFFF;
    --grey: #0F0F0F;
    --dark-blue: #0E2B3A;
    --light-blue: #0575B8;
    --footer-blue: #091b25;
    --green: #77B804;
    --red: #F00;
    --orange: #F6A001;		
    
    --card-title-lines: 1;
    --card-text-lines: 2;
}

.bg-dark-blue { background-color: var(--dark-blue)!important; border-color: var(--dark-blue)!important; }
.bg-light-blue { background-color: var(--light-blue)!important; border-color: var(--light-blue)!important }
.bg-footer-blue { background-color: var(--footer-blue)!important; border-color: var(--footer-blue)!important }
.bg-green { background-color: var(--green)!important; border-color: var(--green)!important }	
.bg-white { background-color: var(--white)!important }
.bg-orange { background-color: var(--orange)!important }
.bg-red { background-color: var(--red)!important }
	
.dark-blue { color: var(--dark-blue) }
.light-blue { color: var(--light-blue) }
.white { color: var(--white) }
.grey { color: var(--grey) }
.green { color: var(--green) }
.text-highlight { font-weight:600 }

.border-dark-blue { border: 1px solid var(--dark-blue) }
.border-light-blue { border: 1px solid var(--light-blue) }
.border-grey { border: 1px solid var(--grey) }
.border-green { border: 1px solid var(--green) }

body { background-color: var(--bg-color); font-family: Inter, Helvetica, Arial; }

.environment-disclaimer {
    padding: .1rem 0;
    font-size: 2rem;
}

main.error {
    height: 100vh;
    background: url('/images/error_background.jpg');
    background-size: cover;
}

.error-container {
    width: 50%!important;
    max-width: 26rem;
    border-radius: 0.2rem!important;
    padding: 1rem;    
}

h1.client {
    font-size: 2.2rem;
    margin-bottom: 0rem;
}

p.client-capacity {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

header .user-icon {
    max-width: 36px;    
}

header .user-icon img {
    border: 1px solid var(--dark-blue);
    background-color: var(--white);
}

header .btn-user-menu {
    color: var(--dark-blue);
    background-color: transparent;
    font-size: 1rem;
    font-weight: 600;
}

a.btn-login, a.btn-logout, a.btn-register, a.btn-dashboard {
    padding: 8px 40px !important;
    font-size: 0.9rem !important;
}

a.btn-login, a.btn-login:hover, a.btn-login:focus, a.btn-login:visited,
a.btn-logout, a.btn-logout:hover, a.btn-logout:focus, a.btn-logout:visited {
    color: var(--dark-blue);
    border-color: var(--dark-blue);
}

a.btn-register, a.btn-register:hover, a.btn-register:focus, a.btn-register:visited {
    color: var(--white)!important;
    background-color: var(--dark-blue)!important;
    border-color: var(--dark-blue)!important;
}

a.btn-dashboard, a.btn-dashboard:hover, a.btn-dashboard:focus, a.btn-dashboard:visited {
    color: var(--red);
    border-color: var(--red);
    background-color: transparent;
}

.container header, .container .page-title { padding: 0 0.5rem }		
div#scene-list { display: flex; flex-wrap: wrap; align-items: stretch; }
div.home .card { width:18rem; display: flex; flex-direction: column; border-radius: 1.7rem; margin: 0.5rem 0.8rem; }
div.home .card-body { padding: 0.4rem; display: flex; flex-direction: column; flex: 1; }
div.home .card-body .thumbnail { width: 273px; height: 172px; border-radius: 1.5rem;  background-repeat: no-repeat; background-size: cover; background-position: center center; display: flex; align-items: flex-start; }
div.home .card-body .thumbnail .user-pill { font-size: 0.9rem; background-color: #0E2B3A66;padding: 3px 10px 3px 3px; }
div.home .card-body .thumbnail .user-pill .icon { margin-right: 10px; padding: 2px; }
div.home .card-body .thumbnail .user-pill .icon i { padding: 0 5px; }
div.home .card-body .thumbnail .instanciable-badge { margin-left: auto; width: 2rem; height: 2rem; border-radius: 50%; background-color: #0E2B3A66; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: #FFFFFF; }
div.home .card img { border-radius: 1.5rem; }
div.home .card .card-body-content { margin: 1.2rem 0.8rem 0.8rem; display: flex; flex-direction: column; flex: 1; }
div.home .card .card-body-content { font-weight: 400; }
div.home .card .card-body-content a.btn, div.home .card .card-body-content div.coming-soon { margin-top: auto; }	
div.home .card .card-body-content h4.card-title, div.home .card .card-body-content .card-text { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}	
div.home .card .card-body-content h4.card-title { font-weight: 600; -webkit-line-clamp: var(--card-title-lines); line-clamp: var(--card-title-lines); }		
div.home .card .card-body-content .card-text { font-size: 0.9rem; -webkit-line-clamp: var(--card-text-lines); line-clamp: var(--card-text-lines); }		
div.home .card a.btn, div.home .card a.btn:hover, div.home .card a.btn:focus, div.home .card a.btn:visited { 
    width: 100%; 
    font-size: 0.9rem!important; 
    padding: 0.5rem 0.75rem!important;
}	
div.home .card a.btn i.icon-right { float: right; margin-top: 0.2rem; opacity: 0.3; }

.card div.coming-soon {
    width: 100%; 
    text-align: center;
    font-size: 0.9rem!important; 
    padding: 0.5rem 0.75rem!important;
}

div.scene-launch {
    text-align: center;
}
div.scene-launch .card { text-align: left; width: 54rem }
div.scene-launch .card-body .thumbnail { width: 849px }
div.scene-launch .card a.btn, div.scene-launch .card a.btn:hover, div.scene-launch .card a.btn:focus, div.scene-launch .card a.btn:visited { 
    font-size: 1.3rem!important; 
}

.vertical-align-middle { display: flex; align-items: center; justify-content: center; }

div.home a.btn, div.home a:focus.btn, div.home a:hover.btn, div.home a:visited.btn { font-size: 0.8rem; font-weight: 600; text-decoration: none; padding: 12px 20px; }
div.home a.white, div.home a:focus.white, div.home a:hover.white, div.home a:visited.white { color: var(--white)}
div.home a.green, div.home a:focus.green, div.home a:hover.green, div.home a:visited.green { color: var(--green)}
div.home a.btn-big, div.home a:focus.btn.big, div.home a:hover.btn-big, div.home a:visited.btn-big { font-weight: 600; text-decoration: none; padding: 12px 40px; }

footer { font-size: 0.7rem; background-image: url(/images/footer_background.jpg); background-repeat: repeat-x; background-position: top;  }
footer a.link, footer a:hover.link, footer a:focus.link, footer a:visited.link { color: var(--white)}
footer a.marketing, footer a:focus.marketing, footer a:visited.marketing { font-size: 1rem; font-weight: 600; text-decoration: none;}
footer a:hover.marketing { text-decoration: underline; }

footer .brand { font-size: 1.2rem }

footer .social { background-color: var(--white); width: 24px; height: 24px; display: inline-block; margin: auto 0.3rem; }
footer .social .icon { color: var(--dark-blue); width: 16px; height: 16px; margin: 4px; display: inline-block; background-position: center; background-repeat: no-repeat; }
footer .social .youtube { 
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 64 64'%3E%3Cpath fill='currentColor' d='M53.527,17.427C55.714,19.677,56,23.252,56,32s-0.286,12.323-2.473,14.573C51.34,48.822,49.062,49,32,49	s-19.34-0.178-21.527-2.427C8.286,44.323,8,40.748,8,32s0.286-12.323,2.473-14.573S14.938,15,32,15S51.34,15.178,53.527,17.427z M27.95,39.417l12.146-7.038L27.95,25.451V39.417z'%3E%3C/path%3E%3C/svg%3E"); 
}
footer .social .facebook { 
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 64 64'%3E%3Cpath fill='currentColor' d='M374.244,285.825l14.105,-91.961l-88.233,0l0,-59.677c0,-25.159 12.325,-49.682 51.845,-49.682l40.116,0l0,-78.291c0,0 -36.407,-6.214 -71.213,-6.214c-72.67,0 -120.165,44.042 -120.165,123.775l0,70.089l-80.777,0l0,91.961l80.777,0l0,222.31c16.197,2.541 32.798,3.865 49.709,3.865c16.911,0 33.511,-1.324 49.708,-3.865l0,-222.31l74.128,0Z' style='fill-rule:nonzero;'/%3E%3C/svg%3E"); 
}		
footer .social .twitter { 
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 64 64'%3E%3Cpath fill='currentColor' d='M57,17.114c-1.32,1.973-2.991,3.707-4.916,5.097c0.018,0.423,0.028,0.847,0.028,1.274c0,13.013-9.902,28.018-28.016,28.018	c-5.562,0-12.81-1.948-15.095-4.423c0.772,0.092,1.556,0.138,2.35,0.138c4.615,0,8.861-1.575,12.23-4.216	c-4.309-0.079-7.946-2.928-9.199-6.84c1.96,0.308,4.447-0.17,4.447-0.17s-7.7-1.322-7.899-9.779c2.226,1.291,4.46,1.231,4.46,1.231	s-4.441-2.734-4.379-8.195c0.037-3.221,1.331-4.953,1.331-4.953c8.414,10.361,20.298,10.29,20.298,10.29s-0.255-1.471-0.255-2.243	c0-5.437,4.408-9.847,9.847-9.847c2.832,0,5.391,1.196,7.187,3.111c2.245-0.443,4.353-1.263,6.255-2.391	c-0.859,3.44-4.329,5.448-4.329,5.448S54.314,18.335,57,17.114z'%3E%3C/path%3E%3C/svg%3E"); 
}
footer .social .linkedin { 
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 50 50'%3E%3Cg transform='translate(0.000000,512.000000) scale(0.100000,-0.100000)' fill='#000000' stroke='none'%3E %3Cpath d='M905 4598 c-136 -26 -282 -140 -344 -270 -46 -98 -60 -204 -39 -301 23 -103 60 -177 123 -245 306 -329 845 -117 845 333 0 314 -277 542 -585 483z'/%3E%3Cpath d='M3380 3290 c-47 -10 -107 -26 -135 -35 -167 -58 -335 -186 -425 -327 l-40 -60 -2 188 -3 189 -407 3 -408 2 0 -1370 0 -1370 425 0 425 0 0 733 c0 730 5 849 36 972 37 144 125 259 236 310 114 52 297 58 412 15 111 -42 194 -145 230 -286 30 -117 36 -279 36 -1006 l0 -728 425 0 425 0 0 798 c0 825 -6 1007 -41 1202 -82 465 -318 711 -746 775 -135 20 -336 18 -443 -5z'/%3E%3Cpath d='M580 1880 l0 -1370 425 0 425 0 0 1370 0 1370 -425 0 -425 0 0 -1370z'/%3E%3C/g%3E%3C/svg%3E"); 
}
footer .social .instagram { 
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 64 64'%3E%3Cpath fill='currentColor' d='M 31.820312 12 C 13.438312 12 12 13.439312 12 31.820312 L 12 32.179688 C 12 50.560688 13.438313 52 31.820312 52 L 32.179688 52 C 50.561688 52 52 50.560688 52 32.179688 L 52 32 C 52 13.452 50.548 12 32 12 L 31.820312 12 z M 43.994141 18 C 45.099141 17.997 45.997 18.889141 46 19.994141 C 46.003 21.099141 45.110859 21.997 44.005859 22 C 42.900859 22.003 42.003 21.110859 42 20.005859 C 41.997 18.900859 42.889141 18.003 43.994141 18 z M 31.976562 22 C 37.498562 21.987 41.987 26.454563 42 31.976562 C 42.013 37.498562 37.545437 41.987 32.023438 42 C 26.501437 42.013 22.013 37.545437 22 32.023438 C 21.987 26.501437 26.454563 22.013 31.976562 22 z M 31.986328 26 C 28.672328 26.008 25.992 28.701625 26 32.015625 C 26.008 35.328625 28.700672 38.008 32.013672 38 C 35.327672 37.992 38.008 35.299328 38 31.986328 C 37.992 28.672328 35.299328 25.992 31.986328 26 z'%3E%3C/path%3E%3C/svg%3E"); 
}



.signup-content, .signin-content, .reset-password-request-content, .edit-profile-content, .change-password-content,
.free-space-request-content, .free-space-wizard-content, .unsubscribe-say-hello-content {
    display: flex;
    display: -webkit-flex;
}

.signup-content-privacy-policy {
    margin-left: 2rem;
    margin-right: 0;
    font-size: 0.9rem;
}
.signup-content-privacy-policy p.title {
    font-size: 1rem;
    font-weight: bold;
}

label.required:after {
    content:"*";
}

.signup-form, .signup-image, 
.signin-form, .signin-image, 
.reset-password-request-form, .reset-password-request-image, 
.edit-profile-form, .edit-profile-image, 
.change-password-form, .change-password-image,
.free-space-request-form, .free-space-request-image,
.free-space-wizard-form, .free-space-wizard-image,
.unsubscribe-say-hello-form, .unsubscribe-say-hello-image {
    width: 50%;
    overflow: hidden;     
}

.signup-form, .signin-form, .reset-password-request-form, .edit-profile-form, .change-password-form,
.free-space-request-form, .free-space-wizard-form {
    padding: 0 8rem 0.5rem 2rem;  
}

.unsubscribe-say-hello-form {
    padding: 0 4rem 0.5rem 2rem;      
}

.signup-image, .signin-image, .reset-password-request-image, .edit-profile-image, .change-password-image,
.free-space-request-image, .free-space-wizard-image {
    margin-left: 4rem;  
}

@media screen and (max-width: 992px) {
    
    /* 1. Hacemos que el contenedor flex apile los elementos en vertical */
    .signup-content, .signin-content, .reset-password-request-content, 
    .edit-profile-content, .change-password-content, .free-space-request-content, 
    .free-space-wizard-content, .unsubscribe-say-hello-content {
        flex-direction: column;
    }

    /* 2. El formulario ahora ocupa todo el ancho y ajustamos sus paddings */
    .signup-form, .signin-form, .reset-password-request-form, 
    .edit-profile-form, .change-password-form, .free-space-request-form, 
    .free-space-wizard-form {
        width: 100%;
        padding: 0 2rem 0.5rem 2rem; /* Reducimos el padding derecho de 8rem a 2rem para que no quede un hueco enorme */
    }

    /* 3. Ocultamos por completo la columna de la imagen */
    .signup-image, .signin-image, .reset-password-request-image, 
    .edit-profile-image, .change-password-image, .free-space-request-image, 
    .free-space-wizard-image, .unsubscribe-say-hello-image {
        display: none;
    }
}

.unsubscribe-say-hello-image {
    margin-left: 0rem;  
}

fieldset.unsubscribe-fieldset div div {
    margin-bottom: 1rem;
}

fieldset.unsubscribe-fieldset {
    margin-bottom: 1rem;
}

div.home-banner {}
div.home-banner div.image-container {
    padding: 0 0.5rem;
}
div.home-banner div.image-container img {
    min-width: 100%;
}
div.home-banner div.image-container img.rounded-corners {
    border-radius: 1.5rem;
}


.alert-virtway {
    margin: 0 auto;
    text-align: center;
    max-width: 800px;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    line-height: 2rem;

    color: var(--light-blue);
    background-color: var(--white);
    border-color: var(--dark-blue);
}

.password-policy-constraints {
    margin-bottom: .5rem;
    font-size: .8rem;
}

.password-policy-constraints p {
    margin-bottom: .2rem;
}

.password-policy-constraints ul {
    margin-bottom: 0;
}

.has-own-client-container { 
    margin-bottom: 1rem;
}

.has-own-client-container a, .has-own-client-container a:hover, .has-own-client-container a:focus, .has-own-client-container a:visited {
    color: var(--white);
    font-weight: bold;
}

.card-guest-custom-nick {
    width: 800px;
    max-width: 800px;
}

.card-guest-custom-nick .guest-users, .card-guest-custom-nick .registered-users {
    margin: 0 auto;
}

.card-guest-custom-nick .guest-users h5, .card-guest-custom-nick .registered-users h5 {
    font-weight: bold;
}

.card-guest-custom-nick .guest-users p, .card-guest-custom-nick .registered-users p {
    margin: 0 auto;
    max-width: 24rem;
}

.card-guest-custom-nick .guest-users .row {
    align-items: center;
    justify-content: center;
}

/* Contact grid + card */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.contact-card {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 0.4rem;
    padding: 0.5rem;
    text-align: center;
    background: white;
}

.contact-card img {
    width: 100%; 
    max-width: 180px; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border-radius: 8px; 
    background-color: #e9ecef;    
}

.contact-card .contact-info {
    font-size: 0.8rem;
}

.contact-card .contact-info .contact-nickname {
    font-weight: bold;
}

.contact-card .contact-info .contact-data {    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.contact-card .remove-contact {
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.contact-card .remove-contact {
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card:hover .remove-contact {
    opacity: 1;
}