/* ==========================================
   CLUB v3
   Estilos generales
========================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        sans-serif;
    background: #f2f2f7;
    color: #1c1c1e;
}

/* Evita que se vea el contenido oculto de Alpine */
[x-cloak] {
    display: none !important;
}

/* ==========================================
   CABECERA
========================================== */

.app-header {

    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255,255,255,.92);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid #e5e5ea;

}

.app-header h1 {

    margin: 0;

    font-size: 2rem;

    font-weight: 700;

}

.app-header p {

    margin: 0;

    color: #8e8e93;

}

/* ==========================================
   CONTENIDO
========================================== */

main {

    padding-top: 20px;
    padding-bottom: 120px;

}

/* ==========================================
   TARJETAS
========================================== */

.card {

    border: none !important;

    border-radius: 24px !important;

    box-shadow:
        0 4px 16px rgba(0,0,0,.08);

}

/* ==========================================
   BOTONES
========================================== */

.btn {

    border-radius: 16px !important;

    transition: .15s;

}

.btn:active {

    transform: scale(.96);

}

/* Botones + y - */

.btn-circle {

    width: 60px;

    height: 60px;

    border-radius: 50% !important;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

}

/* ==========================================
   CONTADOR
========================================== */

.contador {

    min-width: 70px;

    text-align: center;

    font-size: 2.2rem;

    font-weight: 700;

}

/* ==========================================
   BOTONES INFERIORES
========================================== */

.acciones {

    margin-top: 40px;

    display: grid;

    gap: 14px;

}

.acciones .btn {

    height: 58px;

    font-size: 1.05rem;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:768px){

    .card{

        margin-bottom:16px;

    }

    .btn-circle{

        width:58px;

        height:58px;

    }

}