/* ==========================================================================
   TARJETAS (Cards)
   ==========================================================================
*/

.action-card,
.content-card,
.page-card{
    background:var(--color-card);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
}

.action-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:30px;
    text-decoration:none;
    color:inherit;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.action-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-card-hover);
    color:inherit;
}

.action-card:visited{
    color:inherit;
}

.action-card:focus-visible{
    outline:3px solid #0071e3;
    outline-offset:4px;
}

.card-icon{
    font-size:38px;
    line-height:1;
    margin-bottom:18px;
}

.action-card p{
    min-height:46px;
    margin-bottom:24px;
}


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

button,
.button{
    font-family:inherit;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    background:var(--color-brand);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:12px 20px;
    font-size:16px;
    font-weight:500;
    line-height:1.25;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
    transition:
        background-color .2s ease,
        transform .2s ease;
}

.button:hover{
    background:var(--color-brand-hover);
}

.button:active{
    transform:scale(.98);
}


/* ==========================================================================
   VARIANTES DE BOTONES
   ==========================================================================
*/

.submit-button{
    width:100%;
}

.back-button{
    width:min(220px,100%);
    margin:24px auto 0;
}

.button.full{
    max-width:none;
}

/* ==========================================================================
   MENSAJES DE ESTADO
   ==========================================================================
*/

.status-message{
    min-height:20px;
    margin-top:14px;
    padding:12px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    text-align:center;
    opacity:0;
    transition:opacity .3s ease;
}

.status-message.show{
    opacity:1;
}

.status-message.success{
    color:#2c8c99;
}

.status-message.error{
    color:#c0392b;
}

.status-message.info{
    color:#6e6e73;
}