/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

/* BODY */
body {
    font-family: "Segoe UI", system-ui, sans-serif;
    background: radial-gradient(circle at top right, #d8efff, #1f4f91);
    min-height: 100vh;
}

/* HEADER */
header {
    padding: 15px 25px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ICONOS */
.social-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* 🔹 TAMAÑOS INDEPENDIENTES */
    .social-links img[src*="instagram"] { width: 50px; height: 50px; }
    .social-links img[src*="facebook"]  { width: 50px; height: 50px; }
    .social-links img[src*="youtube"]   { width: 52px; height: 52px; }
    .social-links img[src*="pngegg"]    { width: 62px; height: 52px; }
    .social-links img[src*="asa1"]      { width: 180px; height: auto; }

/* BUTTON */
.btn-pink {
    background: #ffd84d;
    border-radius: 14px;
    padding: 10px 22px;
    font-weight: bold;
    border: none;
}

/* MAIN */
.main-content {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
}

/* LOGO */
.logo-principal {
    max-width: 85%;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,.3));
}

/* TEXT */
.titulo-login {
    font-size: 2rem;
}

.subtitulo-login {
    margin-bottom: 20px;
    color: #444;
}

/* CARD */
.login-card {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(14px);
    padding: 30px;
    border-radius: 20px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 15px 35px rgba(0,0,0,.25);
}

/* INPUT */
.form-control,
.form-select {
    border-radius: 10px;
    padding: 12px;
}

/* BUTTON */
.btn-login {
    background: linear-gradient(#ffd84d, #ffc107);
    border-radius: 14px;
    padding: 12px;
    font-weight: bold;
}

/* FOOTER */
footer {
    text-align: center;
    padding: 10px;
    color: #fff;
}

/* MOBILE */
@media (max-width: 768px) {

    .header-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    /* 🔹 TAMAÑOS INDEPENDIENTES EN MÓVIL */
    .social-links img[src*="instagram"] { width: 30px; height: 30px; }
    .social-links img[src*="facebook"]  { width: 30px; height: 30px; }
    .social-links img[src*="youtube"]   { width: 32px; height: 32px; }
    .social-links img[src*="pngegg"]    { width: 32px; height: 26px; }
    .social-links img[src*="asa1"]      { width: 180px; height: auto; }
}