/* ============================================================================
   SECUNDARIA 302 — ESTILOS VISUALES
   Esta hoja NO modifica PHP, sesiones, formularios, IDs, enlaces ni JavaScript.
   Fondo: conserva la imagen fondo.png que ya utiliza el proyecto.
   ============================================================================ */


/* ============================================================================
   01. CONFIGURACIÓN GENERAL
   ============================================================================ */

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

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    color: #173047;
    background: url("../fondo.png") center / cover no-repeat fixed;
    overflow-x: hidden;
    padding: 22px 22px 66px;
    position: relative;
}


/* ============================================================================
   02. CAPA SOBRE LA IMAGEN DE FONDO
   ============================================================================ */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(4, 17, 28, 0.30),
        rgba(4, 17, 28, 0.05) 42%,
        rgba(4, 17, 28, 0.28)
    );
}

.main-layout-container {
    position: relative;
    z-index: 2;
}

/* ============================================================================
   FOOTER INSTITUCIONAL FIJO
   No modifica el contenido ni la funcionalidad del portal.
   ============================================================================ */

body::after{
    content:"“Formamos estudiantes con valores, responsabilidad y orgullo colosista.”  🐾";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9998;

    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 20px;

    background:rgba(4,25,42,.94);
    border-top:1px solid rgba(241,196,15,.55);

    color:#f1c40f;
    font-size:clamp(13px,1.15vw,18px);
    font-weight:700;
    letter-spacing:.2px;
    text-align:center;

    box-shadow:0 -8px 25px rgba(0,0,0,.25);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    pointer-events:none;
}
/* ============================================================================
   03. ENCABEZADO
   ============================================================================ */

.main-header {
    color: #fff;
    text-align: center;
}

.main-header h1,
.main-header h2,
.main-header p {
    text-shadow: 0 4px 13px rgba(0, 0, 0, 0.78);
}

.main-header h1 {
    font-size: clamp(35px, 4.15vw, 64px);
    line-height: 0.98;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.main-header h2 {
    font-size: clamp(17px, 2.05vw, 31px);
    line-height: 1.1;
    font-weight: 900;
    margin-top: 8px;
}

.main-header p {
    color: #f1c40f;
    font-size: clamp(13px, 1.25vw, 19px);
    font-weight: 900;
    line-height: 1.2;
}


/* ============================================================================
   04. CONTENEDORES GRISES TRANSLÚCIDOS
   ----------------------------------------------------------------------------
   CAMBIO:
   Antes: rgba(242, 243, 241, 0.76)
   Ahora: rgba(242, 243, 241, 0.50)
   ============================================================================ */

.floating-btn,
.social-sidebar-box,
#login-form,
.portal-organigrama,
.portal-visitas,
.portal-sitios {
    background: rgba(242, 243, 241, 0.50);

    border: 1px solid rgba(255, 255, 255, 0.72);

    box-shadow:
        0 15px 34px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}


/* ============================================================================
   05. BOTONES PRINCIPALES
   ----------------------------------------------------------------------------
   CAMBIOS:
   - Texto más grande.
   - Iconos más grandes.
   - Un poco más de separación entre icono y texto.
   - Un poco más de altura para que respire mejor.
   ============================================================================ */

.floating-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 16px;

    min-height: 82px;
    padding: 13px 16px;

    border-radius: 15px;

    color: #173047;
    text-decoration: none;

    /* TEXTO MÁS GRANDE */
    font-size: clamp(16px, 1.15vw, 21px);

    font-weight: 900;
    text-align: left;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* ============================================================================
   06. ICONOS DE LOS BOTONES
   ----------------------------------------------------------------------------
   El HTML existente conserva sus iconos.
   Solo aumentamos su tamaño visual.
   ============================================================================ */

.floating-btn:first-letter {
    font-size: 34px;
    line-height: 1;
}


/* ============================================================================
   07. EFECTO HOVER DE LOS BOTONES
   ============================================================================ */

.floating-btn:hover {
    background: rgba(12, 40, 61, 0.94);
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.35);
}


/* ============================================================================
   08. FORMULARIO DE LOGIN
   ============================================================================ */

#login-form {
    width: 100%;
    color: #173047;
    text-align: center;
}

#login-form h2 {
    color: #173047;
    font-size: clamp(25px, 2.1vw, 34px);
    font-weight: 900;
    letter-spacing: 0.4px;
    margin-bottom: 24px;
}

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

.input-group input,
.password-container input {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;

    border: 1px solid rgba(23, 48, 71, 0.16);
    border-radius: 10px;

    background: rgba(251, 252, 253, 0.94);
    color: #173047;

    font-size: clamp(14px, 1vw, 17px);
    font-weight: 600;

    outline: none;
    transition: 0.2s ease;
}

.input-group input:focus,
.password-container input:focus {
    border-color: #b98214;

    box-shadow:
        0 0 0 3px rgba(241, 196, 15, 0.15);
}

.password-container {
    position: relative;
    width: 100%;
    margin-bottom: 18px;
}

.toggle-password-btn {
    position: absolute;
    right: 14px;
    top: 50%;

    transform: translateY(-50%);

    background: transparent;
    border: 0;

    cursor: pointer;
    font-size: 19px;

    z-index: 5;
}


/* ============================================================================
   09. BOTÓN DE LOGIN
   ============================================================================ */

#login-btn {
    width: 100%;
    min-height: 54px;
    padding: 13px 18px;

    background: #102f48;
    color: #f1c96b;

    border: 1px solid #d49b22;
    border-radius: 10px;

    font-size: clamp(15px, 1.05vw, 18px);
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(16, 47, 72, 0.28);

    transition: 0.25s ease;
}

#login-btn:hover {
    background: #071d2d;
    color: #fff;

    transform: translateY(-2px);
}


/* ============================================================================
   10. REDES SOCIALES
   ============================================================================ */

.social-sidebar-box {
    padding: 14px;
    border-radius: 15px;
    text-align: center;
}

.social-sidebar-box p {
    color: #173047 !important;
    text-shadow: none !important;

    font-size: 14px;
    font-weight: 900;
}

.social-icons-grid {
    display: flex;
    justify-content: center;

    gap: 12px;
    margin-top: 11px;
}

.icon-circle {
    width: 44px;
    height: 44px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    text-decoration: none;

    font-size: 19px;

    box-shadow:
        0 6px 13px rgba(0, 0, 0, 0.23);

    transition: 0.2s ease;
}

.icon-circle:hover {
    transform: scale(1.1);
}

.fb {
    background: #1877f2;
}

.tk {
    background: #000;
}

.ig {
    background: linear-gradient(
        45deg,
        #f09433,
        #bc1888
    );
}


/* ============================================================================
   11. CONTROL DE MÚSICA
   ============================================================================ */

.music-control-container {
    position: fixed;

    top: 20px;
    right: 20px;

    z-index: 999999;
}

.music-toggle-btn {
    width: 56px;
    height: 56px;

    border-radius: 50%;

    background: rgba(7, 39, 60, 0.90);
    color: #fff;

    border: 1px solid rgba(241, 196, 15, 0.82);

    cursor: pointer;

    font-size: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 9px 23px rgba(0, 0, 0, 0.38);

    backdrop-filter: blur(7px);
}

.music-playing {
    animation: pulse 1.2s infinite;
    background: #0d5263;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}



/* ============================================================================
   12. PANTALLA DE CARGA
   ============================================================================ */

.loading-overlay {
    position: fixed;
    inset: 0;

    background: #071d2d;

    z-index: 999999;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

.loading-logo {
    width: 140px;
    margin-bottom: 20px;
}

.spinner {
    width: 50px;
    height: 50px;

    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #f1c40f;

    border-radius: 50%;

    animation: spin 1s linear infinite;
}

.loading-overlay p {
    color: #fff;

    margin-top: 15px;

    font-weight: 700;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.hidden {
    display: none !important;
}


/* ============================================================================
   13. FOOTER
   ----------------------------------------------------------------------------
   Se conserva EXACTAMENTE como estaba.
   ============================================================================ */

.portal-footer {
    display: none;
}


/* ============================================================================
   14. RESPONSIVE — TABLET
   ============================================================================ */

@media (max-width: 900px) {

    body {
        padding: 14px 12px 62px;
    }

    .music-control-container {
        top: 12px;
        right: 12px;
    }

    .music-toggle-btn {
        width: 48px;
        height: 48px;
    }
}


/* ============================================================================
   15. RESPONSIVE — MÓVIL
   ============================================================================ */

@media (max-width: 560px) {

    body {
        padding: 10px 8px 60px;
        background-attachment: scroll;
    }

    .music-toggle-btn {
        width: 46px;
        height: 46px;
    }
}

@media(max-width:560px){

    body{
        padding-bottom:62px;
    }

    body::after{
        height:48px;
        font-size:12px;
        padding:0 10px;
    }

}