.tarjeta-desplegable {
    margin-top: 18px;
    background: #ffffff;
    border: 8px solid red;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    box-sizing: border-box;
}

.tarjeta-desplegable-header {
    padding: 16px 20px;
    background: #ffffff;
    cursor: pointer;
    border-bottom: 1px solid transparent;
}

    .tarjeta-desplegable-header:hover {
        background: #fafafa;
    }

.tarjeta-desplegable-titulo {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #1f2937;
    font-size: 15px;
    font-weight: 600;
}

.tarjeta-desplegable-flecha {
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 12px;
}

.tarjeta-desplegable-icono {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    background: #2563eb;
    color: #fff;
}

.tarjeta-desplegable-icono i {
    color: #fff;
    font-size: 16px;
}

.tarjeta-desplegable-icono.icon-tone-green { background: #16a34a; }
.tarjeta-desplegable-icono.icon-tone-amber { background: #d97706; }
.tarjeta-desplegable-icono.icon-tone-purple { background: #7c3aed; }
.tarjeta-desplegable-icono.icon-tone-orange { background: #ea580c; }
.tarjeta-desplegable-icono.icon-tone-teal { background: #0f766e; }

.tarjeta-desplegable-body {
    padding: 18px 20px 20px 20px;
    background: #ffffff;
    border-top: 1px solid #eef2f7;
}