:root {
    --azul-marino: #14213d;
    --granate: #7a1f2b;
    --granate-oscuro: #5e1620;
    --gris-borde: #d1d5db;
    --gris-texto: #4b5563;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f4f5f7;
    color: #1f2937;
}

.cabecera-portal {
    background: linear-gradient(135deg, var(--azul-marino), #0b1526);
    color: #fff;
    padding: 34px 20px 40px;
    text-align: center;
}
.logo-club {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    padding: 5px;
    margin-bottom: 14px;
}
.cabecera-portal h1 { margin: 0 0 6px; font-size: 26px; }
.cabecera-portal p { margin: 0; font-size: 14.5px; opacity: .85; }
.cabecera-portal .cerrar-sesion {
    display: inline-block;
    margin-top: 14px;
    color: #fff;
    opacity: .75;
    font-size: 13px;
    text-decoration: underline;
}

/* -------- Pantalla de acceso (contraseña) -------- */
.pantalla-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
.caja-login {
    background: #fff;
    padding: 36px 32px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    width: 90%;
    max-width: 360px;
    text-align: center;
}
.caja-login .logo-club {
    width: 72px; height: 72px; border-radius: 50%;
    margin-bottom: 14px;
}
.caja-login h1 { margin: 0 0 4px; font-size: 20px; color: var(--azul-marino); }
.caja-login .subtitulo { margin: 0 0 22px; color: var(--gris-texto); font-size: 13.5px; }
.caja-login form { text-align: left; }
.caja-login label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 13px; color: #374151; }
.caja-login input[type=password] {
    width: 100%; padding: 12px 13px; font-size: 15px;
    border: 1px solid var(--gris-borde); border-radius: 8px; margin-bottom: 16px;
    box-sizing: border-box;
}
.caja-login input[type=password]:focus {
    outline: none; border-color: var(--azul-marino); box-shadow: 0 0 0 3px rgba(20,33,61,.12);
}
.caja-login button {
    width: 100%; padding: 13px; background: var(--granate); color: #fff;
    border: none; border-radius: 9px; font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.caja-login button:hover { background: var(--granate-oscuro); }
.error-login {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 16px;
}

.contenedor-portal {
    max-width: 1000px;
    margin: -18px auto 0;
    padding: 0 20px 60px;
}

.rejilla-botones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

.tarjeta {
    position: relative;
    display: block;
    background: #fff;
    border-radius: 16px;
    padding: 30px 24px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease;
}
a.tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
a.tarjeta:active { transform: translateY(-1px); }

.tarjeta-icono {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(20,33,61,.08);
    color: var(--azul-marino);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.tarjeta-icono svg { width: 28px; height: 28px; }

a.tarjeta .tarjeta-icono {
    background: var(--granate);
    color: #fff;
}

.tarjeta h2 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--azul-marino);
}
.tarjeta p {
    margin: 0;
    font-size: 13.5px;
    color: var(--gris-texto);
    line-height: 1.5;
}

.tarjeta-nota {
    margin-top: 10px !important;
    background: #fff7e6;
    border: 1px solid #f5cf87;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #92620a !important;
    line-height: 1.4 !important;
}

.tarjeta-proximamente {
    cursor: not-allowed;
    opacity: .6;
}
.tarjeta-proximamente .tarjeta-icono {
    background: rgba(75,85,99,.12);
    color: #6b7280;
}

.etiqueta-proximamente {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #eef0f2;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
}

.pie-portal {
    text-align: center;
    padding: 0 20px 40px;
    color: #9ca3af;
    font-size: 12.5px;
}

@media (max-width: 480px) {
    .cabecera-portal h1 { font-size: 22px; }
    .tarjeta { padding: 24px 20px; }
}