*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",Arial,sans-serif
}

html,body{
width:100%;
min-height:100%;
margin:0;
padding:0
}

:root{
--fondo-ancho:1920;
--fondo-alto:1080;
--form-x:180;
--form-y:350;
--form-ancho:470px;
--azul:#1b396a;
--azul2:#244c86;
--verde:#20c85a
}

body{
min-height:100vh;
width:100%;
background:#d4d4d4 url("https://sigaa.tesi.org.mx/img/fondos/sigaa.png") center center no-repeat;
background-size:100% 100%;
overflow-x:hidden
}

.main-container{
width:100%;
min-height:100vh;
position:relative;
z-index:1
}

.botones-superiores{
position:absolute;
left:calc(940 / 1920 * 100vw);
top:calc(28 / 1080 * 100vh);
width:calc(880 / 1920 * 100vw);
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:18px;
row-gap:calc(32 / 1080 * 100vh);
z-index:1000
}

.boton-superior{
position:relative;
width:100%;
height:55px;
border:1px solid rgba(255,255,255,.28);
border-radius:16px;
background:linear-gradient(135deg,rgba(18,43,82,.94),rgba(31,78,133,.90));
color:#fff;
font-size:clamp(13px,.88vw,17px);
font-weight:700;
letter-spacing:.3px;
cursor:pointer;
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:0 18px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:all .3s cubic-bezier(.2,.8,.2,1)
}

.boton-superior::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:70%;
height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
transform:skewX(-20deg);
transition:left .55s ease
}

.boton-superior::after{
content:"";
position:absolute;
inset:0;
border-radius:16px;
background:radial-gradient(circle at 50% 0,rgba(255,255,255,.13),transparent 65%);
pointer-events:none
}

.boton-superior:hover{
transform:translateY(-4px) scale(1.015);
background:linear-gradient(135deg,rgba(27,57,106,.98),rgba(37,94,157,.96));
border-color:rgba(255,255,255,.48);
box-shadow:0 16px 35px rgba(0,0,0,.32),0 0 0 3px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.30)
}

.boton-superior:hover::before{
left:140%
}

.boton-superior:active{
transform:translateY(-1px) scale(.99);
box-shadow:0 7px 16px rgba(0,0,0,.25)
}

.boton-superior>span{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
gap:10px
}

.boton-icono{
font-size:21px;
line-height:1;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))
}

.boton-texto{
white-space:nowrap
}

.card{
width:var(--form-ancho);
max-width:calc(100vw - 40px);
padding:38px 40px 30px;
border-radius:28px;
background:rgba(15,32,57,.10);
border:1px solid rgba(255,255,255,.35);
box-shadow:0 20px 55px rgba(0,0,0,.40),0 5px 15px rgba(0,0,0,.20);
text-align:center;
position:absolute;
left:calc(var(--form-x) / var(--fondo-ancho) * 100vw);
top:calc(var(--form-y) / var(--fondo-alto) * 100vh);
transform:none;
overflow:hidden;
animation:entrada .8s ease;
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px)
}

.card::before{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:50%;
background:rgba(255,255,255,.06);
top:-90px;
right:-70px
}

.card::after{
content:"";
position:absolute;
width:130px;
height:130px;
border-radius:50%;
background:rgba(32,200,90,.06);
bottom:-70px;
left:-50px
}

.card>*{
position:relative;
z-index:2
}

.card h2{
color:#fff;
font-size:30px;
font-weight:800;
letter-spacing:2px;
margin-bottom:27px;
text-shadow:0 3px 12px rgba(0,0,0,.30)
}

.input-group{
width:100%;
position:relative;
margin-bottom:17px
}

.input-group input{
width:100%;
height:56px;
border:1px solid rgba(255,255,255,.20);
outline:none;
border-radius:14px;
background:#fff;
color:#17263d;
font-size:16px;
font-weight:500;
padding:0 48px 0 55px;
box-shadow:0 6px 15px rgba(0,0,0,.15),inset 0 1px 2px rgba(0,0,0,.04);
transition:all .25s ease
}

.input-group input::placeholder{
color:#687384;
opacity:1
}

.input-group input:focus{
background:#fff;
border-color:#20c85a;
box-shadow:0 0 0 4px rgba(32,200,90,.18),0 8px 22px rgba(0,0,0,.20);
transform:translateY(-1px)
}

.input-icon{
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
width:25px;
height:25px;
display:flex;
align-items:center;
justify-content:center;
font-size:21px;
color:#1b396a;
z-index:3;
pointer-events:none
}

.toggle-password{
position:absolute;
right:17px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
font-size:20px;
color:#536071;
z-index:4;
user-select:none;
transition:.2s ease
}

.toggle-password:hover{
color:#1b396a;
transform:translateY(-50%) scale(1.12)
}

.alerta-error{
background:#dc3545;
color:#fff;
padding:12px 15px;
border-radius:12px;
margin:-7px 0 17px;
font-size:14px;
font-weight:600;
box-shadow:0 7px 18px rgba(0,0,0,.20);
border:1px solid rgba(255,255,255,.18);
animation:sacudir .4s ease
}

.btn-entrar{
width:100%;
height:56px;
border:0;
border-radius:14px;
background:linear-gradient(135deg,#20c85a,#12aa49);
color:#fff;
font-size:18px;
font-weight:800;
letter-spacing:.5px;
cursor:pointer;
box-shadow:0 8px 20px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.20);
transition:all .25s ease;
margin-top:3px
}

.btn-entrar:hover{
background:linear-gradient(135deg,#25d663,#0e9e42);
transform:translateY(-2px);
box-shadow:0 12px 26px rgba(0,0,0,.28),0 0 0 4px rgba(32,200,90,.12)
}

.btn-entrar:active{
transform:translateY(0)
}

.modal{
width:100%;
height:100%;
background:rgba(3,12,25,.82);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:center;
padding:20px;
z-index:5000
}

.modal.active{
display:flex
}

.modal-content.modern-modal{
background:#fff;
border:1px solid rgba(255,255,255,.8);
border-radius:24px;
padding:32px 38px;
max-width:650px;
width:100%;
max-height:90vh;
overflow-y:auto;
box-shadow:0 25px 70px rgba(0,0,0,.40);
text-align:center;
animation:entradaModal .4s ease
}

.modal-content h2{
color:#1b396a;
margin-bottom:12px;
font-size:28px;
font-weight:800
}

.video-modal-content{
width:min(1050px,96vw);
max-height:92vh;
background:#0b1424;
border:1px solid rgba(255,255,255,.20);
border-radius:24px;
padding:18px;
box-shadow:0 25px 80px rgba(0,0,0,.60);
position:relative;
animation:entradaModal .4s ease
}

.video-modal-content video{
width:100%;
max-height:82vh;
display:block;
border-radius:15px;
background:#000
}

.video-modal-close{
position:absolute;
right:12px;
top:12px;
width:44px;
height:44px;
border:0;
border-radius:50%;
background:rgba(220,53,69,.95);
color:#fff;
font-size:21px;
font-weight:800;
cursor:pointer;
z-index:5;
box-shadow:0 5px 18px rgba(0,0,0,.35);
transition:.25s ease
}

.video-modal-close:hover{
background:#c9302c;
transform:scale(1.08)
}

.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:14px;
margin:20px 0
}

.contact-card{
background:linear-gradient(135deg,#1b396a,#244c86);
color:#fff;
padding:17px;
border-radius:15px;
transition:.25s ease;
box-shadow:0 6px 15px rgba(0,0,0,.12)
}

.contact-card h3{
margin-bottom:8px;
font-size:14px
}

.contact-card p{
font-size:14px
}

.contact-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 22px rgba(0,0,0,.18)
}

.horario{
font-weight:600;
margin-top:15px;
color:#333;
line-height:1.5;
font-size:14px
}

.boton-cerrar{
background:#d9534f;
color:#fff;
border:none;
border-radius:11px;
padding:11px 28px;
cursor:pointer;
font-weight:700;
font-size:14px;
margin-top:15px;
transition:.25s ease
}

.boton-cerrar:hover{
background:#c9302c;
transform:translateY(-2px);
box-shadow:0 7px 15px rgba(0,0,0,.15)
}

.manual-list{
list-style:none;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
margin:20px 0
}

.manual-list li a{
display:block;
padding:13px 18px;
background:#1b396a;
color:#fff;
border-radius:11px;
text-decoration:none;
font-weight:600;
transition:.25s ease;
box-shadow:0 4px 10px rgba(0,0,0,.10)
}

.manual-list li a:hover{
background:#244c86;
transform:translateX(4px)
}

.social-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
margin:25px 0 20px
}

.social-card{
text-decoration:none;
color:#fff;
min-height:125px;
border-radius:18px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
font-weight:700;
box-shadow:0 8px 18px rgba(0,0,0,.15);
transition:all .3s ease;
border:1px solid rgba(255,255,255,.25)
}

.social-card:hover{
transform:translateY(-6px) scale(1.03);
box-shadow:0 14px 28px rgba(0,0,0,.25)
}

.social-icon{
width:58px;
height:58px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:25px;
font-weight:800;
background:rgba(255,255,255,.18);
border:2px solid rgba(255,255,255,.35)
}

.social-name{
font-size:13px;
letter-spacing:.4px
}

.social-facebook{
background:linear-gradient(135deg,#1877f2,#0d5dcc)
}

.social-web{
background:linear-gradient(135deg,#1b396a,#244c86)
}

.social-instagram{
background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)
}

.social-tiktok{
background:linear-gradient(135deg,#111,#333)
}

.social-twitter{
background:linear-gradient(135deg,#000,#333)
}

.social-description{
color:#555;
font-size:14px;
line-height:1.5;
margin-bottom:5px
}

.modal-avisos{
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:center;
padding:20px;
background:rgba(0,0,0,.78);
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
z-index:4500
}

.modal-avisos.active{
display:flex
}

.modal-avisos .contenido{
position:relative;
width:100%;
max-width:650px;
max-height:88vh;
overflow-y:auto;
background:linear-gradient(145deg,#222b38,#111820);
color:#fff;
padding:38px 30px 28px;
border:1px solid rgba(255,255,255,.14);
border-radius:20px;
text-align:center;
box-shadow:0 25px 70px rgba(0,0,0,.60);
animation:entradaModal .4s ease;
line-height:1.6
}

.modal-avisos .numero{
position:absolute;
right:20px;
top:14px;
font-size:13px;
opacity:.75;
font-weight:600
}

.modal-avisos .contenido>div:not(.numero):not(.aviso-confirmacion){
font-size:16px
}

.aviso-confirmacion{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:25px auto 5px;
padding:13px 16px;
border-radius:12px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
max-width:420px;
text-align:left
}

.aviso-confirmacion input{
width:20px;
height:20px;
min-width:20px;
accent-color:#20c85a;
cursor:pointer
}

.aviso-confirmacion label{
color:#fff;
font-size:15px;
font-weight:600;
cursor:pointer;
line-height:1.3
}

.modal-avisos button{
width:100%;
max-width:330px;
margin-top:15px;
padding:13px 18px;
border:none;
border-radius:11px;
background:linear-gradient(135deg,#ff6464,#dc3545);
color:#fff;
cursor:pointer;
font-weight:700;
font-size:14px;
transition:.25s ease;
box-shadow:0 7px 18px rgba(0,0,0,.25)
}

.modal-avisos button:hover:not(:disabled){
background:linear-gradient(135deg,#ff4c4c,#c9302c);
transform:translateY(-2px)
}

.modal-avisos button:disabled{
background:#68727c;
color:#cdd2d6;
cursor:not-allowed;
opacity:.65;
box-shadow:none;
transform:none
}

#toast-container{
position:fixed;
top:20px;
right:20px;
width:360px;
max-width:calc(100vw - 30px);
display:flex;
flex-direction:column;
gap:12px;
z-index:9000;
pointer-events:none
}

.toast{
width:100%;
background:#202c33;
color:#e9edef;
border-radius:13px;
padding:15px;
box-shadow:0 12px 30px rgba(0,0,0,.42);
border-left:4px solid #25d366;
position:relative;
animation:waEntrada .35s ease;
transition:.2s;
pointer-events:auto
}

.toast:hover{
transform:translateY(-2px)
}

.toast h3{
font-size:13.5px;
font-weight:700;
margin:0 0 7px
}

.toast p{
font-size:13px;
line-height:1.45;
margin:0 0 10px;
color:#fff
}

.toast .fechas{
font-size:11.5px;
background:rgba(255,255,255,.06);
padding:8px;
border-radius:8px;
margin-top:8px;
color:#fff;
line-height:1.4
}

.toast button{
margin-top:10px;
width:100%;
padding:9px;
border:none;
border-radius:8px;
cursor:pointer;
background:#25d366;
color:#111b21;
font-weight:700;
font-size:13px;
transition:.2s
}

.toast button:hover{
background:#20c05c
}

.rocko-chat-widget{
position:relative;
z-index:99999
}

.rocko-chat-widget .burbuja{
position:fixed;
right:22px;
bottom:22px;
width:62px;
height:62px;
background:linear-gradient(135deg,#1b396a,#244c86);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:99999;
box-shadow:0 10px 28px rgba(0,0,0,.35);
animation:palpitar 2s infinite;
border:2px solid #fff
}

.rocko-chat-widget .burbuja img{
width:82px;
height:82px;
object-fit:contain
}

.tooltip{
position:absolute;
right:74px;
top:50%;
transform:translateY(-50%);
background:#fff;
color:#333;
padding:10px 14px;
border-radius:10px;
width:280px;
font-size:13px;
font-weight:600;
box-shadow:0 5px 18px rgba(0,0,0,.22);
opacity:0;
visibility:hidden;
transition:.3s;
pointer-events:none;
white-space:nowrap
}

.tooltip.show{
opacity:1;
visibility:visible
}

.rocko-chat-widget .burbuja:hover .tooltip{
opacity:1;
visibility:visible
}

.chat{
position:fixed;
right:22px;
bottom:100px;
width:400px;
max-width:calc(100vw - 30px);
height:600px;
max-height:75vh;
background:#fff;
border-radius:18px;
box-shadow:0 18px 45px rgba(0,0,0,.38);
display:none;
flex-direction:column;
overflow:hidden;
z-index:99998;
border:1px solid rgba(27,57,106,.15)
}

.chat.activo{
display:flex;
animation:chatEntrada .3s ease
}

.header{
background:linear-gradient(135deg,#1b396a,#244c86);
color:#fff;
padding:11px 15px;
display:flex;
justify-content:space-between;
align-items:center
}

.header-left{
display:flex;
align-items:center;
gap:10px;
min-width:0
}

.header-left img{
width:58px;
height:58px;
object-fit:contain
}

.header h3{
margin:0;
font-size:17px
}

.header span{
font-size:11px;
opacity:.9
}

.cerrar{
background:none;
border:none;
color:#fff;
font-size:30px;
cursor:pointer;
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
transition:.2s
}

.cerrar:hover{
background:rgba(255,255,255,.12)
}

.messages{
flex:1;
padding:15px;
overflow-y:auto;
background:#f4f6f8;
scroll-behavior:smooth
}

.message{
max-width:82%;
padding:10px 14px;
margin-bottom:10px;
border-radius:12px;
word-wrap:break-word;
overflow-wrap:anywhere;
font-weight:normal;
line-height:1.45;
font-size:14px
}

.message.bot{
background:#fff;
border-left:4px solid #ffcc00;
color:#222;
box-shadow:0 2px 6px rgba(0,0,0,.05)
}

.message.user{
background:#6ab04c;
color:#fff;
margin-left:auto;
box-shadow:0 2px 6px rgba(0,0,0,.08)
}

.input{
display:flex;
gap:8px;
padding:10px;
border-top:1px solid #ddd;
background:#fff
}

.input input{
flex:1;
min-width:0;
padding:11px 12px;
border:1px solid #ccc;
border-radius:9px;
background:#fff;
color:#222;
outline:none
}

.input input:focus{
border-color:#1b396a;
box-shadow:0 0 0 3px rgba(27,57,106,.10)
}

.input button{
background:#ffcc00;
border:none;
padding:10px 16px;
border-radius:9px;
cursor:pointer;
font-weight:bold;
transition:.2s
}

.input button:hover{
background:#f2bd00;
transform:translateY(-1px)
}

.input button:disabled{
opacity:.6;
cursor:not-allowed;
transform:none
}

.burbuja-buzon{
position:fixed;
right:22px;
bottom:98px;
width:62px;
height:62px;
background:linear-gradient(135deg,#1877f2,#0d5dcc);
border-radius:50%;
border:2px solid #fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:99999;
box-shadow:0 10px 28px rgba(0,0,0,.35);
animation:palpitarBuzon 2s infinite;
text-decoration:none
}

.burbuja-buzon img{
width:82px;
height:82px;
object-fit:contain
}

.tooltip-buzon{
position:absolute;
right:74px;
top:50%;
transform:translateY(-50%);
background:#fff;
color:#333;
padding:10px 14px;
border-radius:10px;
width:220px;
font-size:13px;
font-weight:600;
box-shadow:0 5px 18px rgba(0,0,0,.22);
opacity:0;
visibility:hidden;
transition:.3s;
pointer-events:none;
white-space:nowrap
}

.burbuja-buzon:hover .tooltip-buzon{
opacity:1;
visibility:visible
}

@keyframes entrada{
from{
opacity:0;
transform:translateY(15px) scale(.98)
}
to{
opacity:1;
transform:translateY(0) scale(1)
}
}

@keyframes entradaModal{
from{
opacity:0;
transform:scale(.95)
}
to{
opacity:1;
transform:scale(1)
}
}

@keyframes chatEntrada{
from{
opacity:0;
transform:translateY(15px) scale(.97)
}
to{
opacity:1;
transform:translateY(0) scale(1)
}
}

@keyframes sacudir{
25%{
transform:translateX(-5px)
}
50%{
transform:translateX(5px)
}
75%{
transform:translateX(-5px)
}
}

@keyframes waEntrada{
from{
opacity:0;
transform:translateY(20px) scale(.95)
}
to{
opacity:1;
transform:translateY(0) scale(1)
}
}

@keyframes salida{
from{
opacity:1;
transform:translateY(0) scale(1)
}
to{
opacity:0;
transform:translateY(20px) scale(.95)
}
}

@keyframes palpitar{
0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(27,57,106,.6)
}
70%{
transform:scale(1.08);
box-shadow:0 0 0 15px rgba(27,57,106,0)
}
100%{
transform:scale(1)
}
}

@keyframes palpitarBuzon{
0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(24,119,242,.55)
}
70%{
transform:scale(1.07);
box-shadow:0 0 0 14px rgba(24,119,242,0)
}
100%{
transform:scale(1)
}
}

@media(max-width:1400px) and (min-width:1001px){
.botones-superiores{
left:51%;
width:46%;
column-gap:14px;
row-gap:22px
}

.card{
left:5%;
width:430px
}
}

@media(max-width:1000px) and (min-width:701px){
body{
background-size:cover;
background-position:center
}

.botones-superiores{
left:50%;
top:25px;
transform:translateX(-50%);
width:680px;
max-width:90vw;
column-gap:12px;
row-gap:16px
}

.boton-superior{
height:52px;
font-size:13px
}

.card{
left:50%;
top:55%;
transform:translate(-50%,-50%);
width:430px;
max-width:88vw
}

.social-grid{
grid-template-columns:repeat(3,1fr)
}

.video-modal-content{
width:94vw
}
}

@media(max-width:700px){
body{
background-image:url("https://sigaa.tesi.org.mx/img/fondos/sigaa1.png");
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed
}

.main-container{
min-height:100vh;
width:100%;
position:relative
}

.botones-superiores{
left:20px;
top:18px;
width:calc(100vw - 40px);
transform:none;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:10px;
row-gap:14px
}

.boton-superior{
height:53px;
min-height:53px;
border-radius:15px;
font-size:12px;
padding:0 7px
}

.boton-superior:hover{
transform:translateY(-2px) scale(1.01)
}

.boton-superior>span{
gap:6px
}

.boton-icono{
font-size:18px
}

.boton-texto{
white-space:normal;
line-height:1.15
}

.card{
width:calc(100vw - 30px);
max-width:440px;
left:50%;
top:54%;
transform:translate(-50%,-50%);
padding:32px 25px 27px;
border-radius:23px
}

.card h2{
font-size:25px;
margin-bottom:23px
}

.input-group input{
height:52px;
font-size:16px
}

.btn-entrar{
height:52px;
font-size:17px
}

.video-modal-content{
width:96vw;
padding:10px;
border-radius:18px
}

.video-modal-content video{
max-height:78vh;
border-radius:11px
}

.video-modal-close{
width:38px;
height:38px;
font-size:19px;
right:7px;
top:7px
}

.modal-content.modern-modal{
padding:27px 20px
}

.social-grid{
grid-template-columns:repeat(2,1fr);
gap:12px
}

.social-card{
min-height:110px
}

.social-icon{
width:50px;
height:50px;
font-size:22px
}

.modal-avisos .contenido{
max-height:90vh;
padding:34px 18px 22px
}

.modal-avisos .contenido>div:not(.numero):not(.aviso-confirmacion){
font-size:15px
}

.aviso-confirmacion{
max-width:100%;
padding:12px 13px;
gap:8px
}

.aviso-confirmacion label{
font-size:13px
}

#toast-container{
top:10px;
right:10px;
left:10px;
width:auto;
max-width:none
}

.toast{
font-size:13px
}

.chat{
right:2.5%;
bottom:90px;
width:95%;
max-width:none;
height:72vh;
max-height:none;
border-radius:16px
}

.rocko-chat-widget .burbuja{
right:15px;
bottom:15px;
width:58px;
height:58px
}

.burbuja-buzon{
right:15px;
bottom:85px;
width:58px;
height:58px
}

.tooltip,.tooltip-buzon{
display:none
}

.header-left img{
width:52px;
height:52px
}

.input{
padding:8px
}

.input button{
padding:10px 12px
}
}

@media(max-width:500px){
.botones-superiores{
left:16px;
top:15px;
width:calc(100vw - 32px);
column-gap:8px;
row-gap:10px
}

.boton-superior{
height:49px;
min-height:49px;
font-size:11px;
border-radius:13px;
padding:0 5px
}

.boton-icono{
font-size:17px
}

.boton-superior>span{
gap:5px
}

.card{
width:calc(100vw - 24px);
padding:28px 18px 23px
}

.card h2{
font-size:23px;
letter-spacing:1px
}

.input-group input{
height:50px;
font-size:15px;
padding-left:50px
}

.input-icon{
left:15px;
font-size:20px
}

.toggle-password{
right:14px
}

.btn-entrar{
height:50px;
font-size:16px
}

.modal{
padding:10px
}

.modal-content.modern-modal{
padding:22px 15px;
border-radius:18px
}

.modal-content h2{
font-size:23px
}

.contact-grid{
grid-template-columns:1fr
}

.social-grid{
grid-template-columns:1fr 1fr;
gap:9px
}

.social-card{
min-height:100px;
border-radius:14px
}

.social-icon{
width:45px;
height:45px;
font-size:20px
}

.social-name{
font-size:11px
}

.modal-avisos{
padding:10px
}

.modal-avisos .contenido{
padding:32px 14px 18px;
border-radius:16px
}

.modal-avisos button{
max-width:100%;
font-size:13px
}

.aviso-confirmacion{
margin-top:20px
}
}

@media(max-width:400px){
.botones-superiores{
left:12px;
top:12px;
width:calc(100vw - 24px);
grid-template-columns:1fr 1fr;
column-gap:6px;
row-gap:8px
}

.boton-superior{
height:46px;
min-height:46px;
font-size:9.5px;
border-radius:11px;
padding:0 3px
}

.boton-icono{
font-size:15px
}

.boton-superior>span{
gap:3px
}

.card{
width:calc(100vw - 20px);
top:55%;
padding:25px 16px 21px;
border-radius:18px
}

.card h2{
font-size:21px;
margin-bottom:19px
}

.input-group{
margin-bottom:13px
}

.input-group input{
height:47px;
font-size:14px;
padding-left:47px;
padding-right:42px
}

.input-icon{
left:13px;
font-size:18px
}

.toggle-password{
right:12px;
font-size:18px
}

.btn-entrar{
height:47px;
font-size:15px
}

.modal-content.modern-modal{
padding:18px 12px
}

.modal-avisos .contenido{
padding:30px 11px 15px
}

.aviso-confirmacion label{
font-size:12px
}

.chat{
height:76vh
}

.message{
max-width:90%;
font-size:13px
}

.header-left img{
width:47px;
height:47px
}

.header h3{
font-size:15px
}

.header span{
font-size:10px
}
}