/* ---------------------- */
/* Body y Fondo */
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: linear-gradient(146deg,#37315b,#74c7cb); /* fondo elegante */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

/* ---------------------- */
/* Logos con contorno PNG */
.logos {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.logos img {
    height: 60px;
    object-fit: contain;
    transition: transform 0.3s, filter 0.3s;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
.logos img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.7));
}

/* ---------------------- */
/* Login Box */
.login-card {
    background: rgba(255,255,255,0.34);
    padding: 40px 35px;
    width: 100%;
    max-width: 400px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 12px 35px rgba(0,0,0,0.25);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------------------- */
/* Título */
.login-card h2 {
    margin-bottom: 25px;
    color: #0f172a;
    font-weight: bold;
    letter-spacing: 1px;
}

/* ---------------------- */
/* Inputs flotantes */
.input-group {
    position: relative;
    width: 100%;
    margin: 15px 0;
}
.input-group input {
    width: 100%;
    padding: 12px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 15px;
    background: transparent;
    outline: none;
}
.input-group label {
    position: absolute;
    left: 3px;
    top: 12px;
    pointer-events: none;
    color: #666;
    transition: 0.2s;
    background: rgba(12, 239, 255, 0.068);
    padding: 0 4px;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    top: -15px;
    font-size: 12px;
    color: #060c1f;
}

/* Botones uniformes */
.login-card button, 
.btn-registro {
    display: block;           /* bloque para respetar ancho */
    width: 280px;             /* ancho fijo uniforme */
    max-width: 100%;          /* responsive */
    padding: 12px 0;          /* mismo alto */
    border-radius: 8px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin: 12px auto;        /* centrado automático */
    transition: 0.3s;
    box-sizing: border-box;
}

/* Colores individuales */
.login-form button { 
    background:#1e3a8a; 
    color:white; 
}
.login-form button:hover { 
    background:#2563eb; 
    transform:scale(1.02); 
}

.btn-registro { 
    background:#16a085; 
    color:white; 
}
.btn-registro:hover { 
    background:#1abc9c; 
    transform:scale(1.02); 
}


.separator {
    display: flex;
    align-items: center;
    margin: 15px 0;
    color: #999;
    font-weight: bold;
}
.separator span {
    flex: 1;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    line-height: 0.1em;
    margin: 0 10px;
}


.error { color:#e74c3c; margin:10px 0; }
.success { color:#27ae60; margin:10px 0; }


.modal {
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.5);
    justify-content:center;
    align-items:center;
    z-index:1000;
}
.modal-content {
    background: rgba(189,222,229,0.37);
    padding:30px;
    border-radius:12px;
    width:90%;
    max-width:360px;
    box-shadow:0 12px 25px rgba(0,0,0,0.3);
    backdrop-filter:blur(6px);
    position:relative;
}
.cerrar { position:absolute; right:12px; top:8px; font-size:22px; cursor:pointer; }

/* ---------------------- */
/* Google Sign-In centrado */
.google-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 15px 0;
}

/* ---------------------- */
/* Responsive */
@media(max-width:480px){
    .logos { flex-direction: column; gap:15px; }
    .login-card { padding:25px; }
    .login-card button { font-size:15px; }
    .input-group input { font-size:14px; }
    .input-group label { font-size:11px; }
}
.modal-content button {
    width: 100%;
    padding: 10-12px; /* según CSS anterior */
    border-radius: 8px;
    cursor: pointer;
}
.modal-content button {
    width: 100%;
    padding: 10-12px; /* según CSS anterior */
    border-radius: 8px;
    cursor: pointer;
}
/* Botón dentro del modal (registro) */
.registro-form button {
    display: block;
    margin: 15px auto 0 auto; /* centrado horizontal y espacio arriba */
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(171,132,132,60%); /* borde sutil */
    background-color: rgba(61,61,61,46%); /* verde semi-transparente */
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    box-sizing: border-box;
}

/* Hover: más brillante y ligero aumento de tamaño */
.registro-form button:hover {
    background-color: rgba(26,188,156,0.9);
    transform: scale(1.02);
}